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 { | DEPOIS #blog-wrapper { |
| #linkbar { | #linkbar { |
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 ;)
