Usar bordas arredondadas nos templates e elementos CSS do layout de um blog deixa-o com um estilo (style) mais elegante, moderno e bonito. Mas nem todos os blogs usam bordas arredondadas, pois a implementação das mesmas não funciona adequadamente em todos os navegadores, principalmente no Internet Explorer (IE). Mas as que você verá nessa postagem, funciona perfeitamente nos principais navegadores, inclusive no IE.

BORDAS ARREDONDADAS QUE FUNCIONAM TAMBÉM NO INTERNET EXPLORER

O futuro também funciona no IE (Internt Explorer). Não é preciso mais várias linhas de códigos CSS e “hacks” (jeitinhos feitos especialmente para funcionar também no IE) para obter um funcionamento perfeito nos principais navegadores: Chrome, Firefox, Opera e Internet Explorer. A definição de bordas em CSS agora funciona em todos os navegadores citados acima. E para a implementação basta usar uma linha de código.

  1. border-radius: 0px;
  2. border-radius: 0px 0px 0px 0px;

Ambas as linhas CSS acima estão com valores 0px (zero pixel). Na primeira linha as definições do grau de arredondamento é implementado de uma vez em todos os 4 lados do elemento. Já na segunda linha é implementado no sentido horário, cujo qual você pode colocar valores diferentes e personalizar do jeito que preferir.

Bordas arredondadasque funcionam no IE

Veja funcionando no Amarino Blogger, no layout do blog tem alguns elementos com cantos arredondados que foram implementados com os estilos CSS acima mencionados e funcionam praticamente em todos os navegadores.

O QUE MUDOU?

Antes era assim:

-moz-border-radius:6px;
-webkit-border-radius:6px;
-goog-ms-border-radius:6px;

ou assim:

-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;

Talvez não fosse necessário nesta postagem dizer onde e como implementar a CSS no Blogger, pois o caminho provavelmente você já conhece. No entanto.

COMO E ONDE IMPLEMENTAR AS BORDAS ARREDONDADAS NO BLOGGER?

Para alguém que esteja iniciando no assunto em questão, para colocar CSS no template do Blogger vá em: painel do Blogger, abra seu blog, clique em modelo e depois em editar HTML. Dê um Crtl+F com o teclado e procure pelo elemento cujo qual vai modificar.

  • Dica: Todos os elementos CSS do seu blog, no editor de HTML do Blogger ficam acima da tag “]]></b:skin>”.

Você pode substituir todo o código das bordas pelo novo “border-radius: 0px 0px 0px 0px;“ e dar os valores dos “px” que preferir. Visualize para ver o resultado de como ficou, se gostou salve, se não vá mudando os valores do “px” até chegar a uma aparência que goste.

Essa implementação é uma novidade que trás mais possibilidades para estilos e personalizações dos layouts e templates do Blogger. Você usa bordas arredondadas em seu template e elas funcionam em todos os navegadores? Deixe sua experiência ou opinião nos comentários. “O futuro parece também funcionar no Internet Explorer” pelo menos as bordas arredondas funcionam.

Guilherme Amarino

Graduando em Analise e Desenvolvimento de Sistemas, formado em Técnico de Informática. Atualmente conteudista e desenvolvimento web de templates para a plataforma do blogspot. Conheça o www.amarinoblogger.com

Participe da conversa

9 Comentários

Comentários

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

  1. Olá,

    necessito de ajuda sobre oborder-radius no Internet Explorer. Tenho uma barra de menu inserida no layout do blog (fraldasdamaria.blogspot.pt); no entanto não consigo que o “border-radius” funcione no Internet Explorer!! O código inserido é:

    #menuWrapper {
    width:100%; /* Ancho del menú */
    height:35px; /* Altura da barra principal */
    padding-left:15px;
    background:#1F151E; /* Color de fondo */
    border-radius: 20px;
    }
    .menu {
    padding:0;
    margin:0;
    list-style:none;
    height:35px;
    position:relative;
    z-index:5;
    font-family:”Lucida Sans Unicode”, “Trebuchet Unicode MS”, “Lucida Grande”,sans-serif;
    }
    .menu li:hover li a {
    background:none;
    }

    Alguém me pode ajudar?
    Obrigado

    1. Olá João!

      Acabei de dá uma olhada nos códigos e fazer um teste aqui, veja, não há nada de errado com ele, pois aqui não apareceu também as bordas arredondas no IE, já no teste com sua CSS apareceu direitinho as bordas arredondas na id “menuWrapper” inclusive no IE.

      Meu palpite é que se nos outros navegadores funciona, e apenas no IE usando um template do blogger não está funcionando, é por que o IE esteja pegando a class “widget-content” que por padrão nos templates vem quadrada. Ou seja, o IE ao invés de pegar “menuWrapper” pega a do widget.

      Teste, faça também a alteração acrescentando border-radius: 20px; também na class “widget-content” do seu menu e veja no Internet Explorer se vai funcionar direitinho.

      Boa sorte e abraço!

  2. Olá, sou blogueira não profissional, e gostaria de saber como colocar uma imagem no titulo do Gadgets seguidores, já fiz várias buscas e não consegui nada,sei qual código é usado nos outros Gadgets,mas nos seguidores ele não funciona






    ()

    Sempre que tento mudar algo da erro, o que devo fazer?

    Agradeço pelo espaço cedido.
    Abraço

    1. Olá Micheline, gostaria de lhe ajudar quanto a isso, de qual gadget de seguidores você se refere, pois colocar uma imagem no titulo ou ao lado é bem simples, e pode ser colocadado em qualquer gadget.

      Encontrando as tags h2 ou h3 do respectivo titulo, dentro delas você pode adicionar uma imagem normalmente com “src=” a tag do titulo no blogger é “h2 class=’title'””data:title/””/h2” (troquei <> por aspas “”) se adicionar o código da imagem antes ou depois de “data:title/” irá aparecer no titulo do respectivo gadget que adicionou a imagem.

      Mais explicação pode entrar em contato comigo que ajudo!

    1. Bem, isso é uma questão de opinião sua com relação a essa diferença astronômica entre Blogger e WordPress.

      Já eu acho que usar Blogger e usar WP depende das necessidades e destinos que deseja dar a seu Blog ou página web. É possível sim ter um Blog totalmente profissional e bom em Blogger/Blogspot e o mesmo está surgindo com novidades cada vez mais interessantes que o deixa em um nível muito distante do que era antes.

      Recomendo usar as duas Plataformas de blogs, mas iniciar recomendo Blogger. No entanto, gosto é gosto.

      Abraço!