Bordas arredondadas nos templates para Blogger

Hoje vou tentar explicar como usar bordas arredondadas nos templates para Blogger/Blogspot. Já adianto que o HTML varia muito de um modelo para outro e que este tutorial não se aplica aos novos templates do Blogger (Designer do Modelo).

As bordas arredondadas funcionam perfeitamente no Mozilla Firefox (Figura 1) e no Google Chrome, mas infelizmente não funcionam no Internet Explorer (figura 2).

Mesmo os templates do Designer do Modelo, demoraram a se acertarem com o IE e ainda hoje ficam estranhos, como se tivessem sombras nas bordas (um horror!).

ATENÇÃO: Recomendo a criação de um blog de testes para realizar toda e qualquer modificação no template do seu blog. Se der errado, você não terá nenhum prejuízo.

Para inserir as bordas arredondadas, entre no painel do Blogger, clique em design e depois em editar HTML. Dê um Crtl+F com o teclado e procure por “border”.

O código que devemos usar para arredondar as bordas é este:

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

Os templates para Blogger são divididos em vários trechos, que começam com “#”. Temos como exemplos: #blog-wrapper (corpo do blog), #header-wrapper (cabeçalho),#linkbar (menu de links), #main-wrapper (área de postagem ) e etc.

São nestes locais que você vai ter que encontrar as bordas e colocar o código para arredondá-las. Vamos para dois exemplos, usando o html do Template DB 3.0:

ANTES #blog-wrapper { text-align:center; position:relative; width:970px; background:$blogframeColor; border:1px solid $blogBorderColor; margin:15px auto 10px; padding:6px 8px 6px 6px; }

DEPOIS #blog-wrapper { text-align:center; position:relative; width:970px; background:$blogframeColor; border:1px solid $blogBorderColor; -moz-border-radius:6px; -webkit-border-radius:6px; -goog-ms-border-radius:6px;

#linkbar { width:100%; position:relative; background:$linkbarbgColor; border:0 solid $contentBorderColor; border-bottom:1px solid $contentBorderColor; margin:0px 0 0; padding:0; }

#linkbar { width:100%; position:relative; background:$linkbarbgColor; border:0 solid $contentBorderColor; border-bottom:1px solid $contentBorderColor; -moz-border-radius:6px; -webkit-border-radius:6px; -goog-ms-border-radius:6px;

O código (em vermelho) deve ser inserido logo abaixo da linha da borda. Repita o mesmo procedimento em todas as áreas onde as bordas devem ficar arredondadas.

Para cada borda arredondada, clique no botão visualizar para ir conferindo o resultado e só salve o template quando estiver tudo do seu gosto.

Quando você tiver certeza que aprendeu a colocar as bordas arredondadas no blog de testes, aí sim você pode fazer o mesmo no template do seu blog.

Repito: o html varia muito de um template para outro e é preciso fazer vários testes até encontrar os locais corretos para inserção do código. Divirtam-se ;)