Bordas arredondadas nos templates para Blogger

Bordas arredondadas nos templates para Blogger

6 10 99
Bordas arredondadas nos templates para Blogger 10 6 99

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).

Firefox Internet Explorer

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 ;)

20 Comments
Comments
  1. Um pouco complicado para os iniciantes, mas são dicas muito boas.
    http://www.azevedofinancas.blogspot.com

    ResponderExcluir
  2. Ótimo post Juliana! Tava procurando exatamente isso!
    Obrigado!
    Fique com Deus!

    ResponderExcluir
  3. Wow, estava feito louca atrás desse código! Muito obrigada por compartilhar *_*()

    ResponderExcluir
  4. Tá aí outro truque que eu descobri fuçando! Mas nem sei se eu sei usar direito haha E é muito chato que só funcione no Firefox, Chrome e Opera, né?

    Até o Twitter usa bordas arredondadas que não funcionam no IE! Pessoal, se liguem e banem o IE de suas vidas haha

    Beijo!

    ResponderExcluir
  5. Lembrando que é recomendado adicionar também a "border-radius" que já está aceito no Internet Explorer 9 e em outros navegadores.

    Ficaria assim:

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

    ResponderExcluir
  6. Juliana, como sempre mandando ver!
    Muuuito obrigado pela dica, me ajudou muito...
    Eu consegui no Template Magazine.

    ResponderExcluir
  7. Ola!!
    Vostede me podería dicir cal fonte de texto usada para crear o título do seu blog? Isto é usado Photoshop, pero necesita do texto orixinal. Moitas grazas.

    ResponderExcluir
  8. ►APM Las Palmas

    Respondendo pela Juliana rsrs...

    Existem postagens anteriores a essa que ensina a criar um titulo igual a esse.

    http://www.dicasblogger.com.br/2010/07/imagem-para-o-cabecalho-do-blogger.html

    Espero ter ajudado =D

    ResponderExcluir
  9. Juliana Sardinha. Houve Um desentendimento entre Meu Blog com o Seu Gostaria de Resolve-lo add no msn : admin@bcreate.net

    ResponderExcluir
  10. João Felipe, não houve nenhum desentendimento entre nossos blogs e eu não vou fazer nada contra você ou contra o seu blog.

    Só gostaria de aproveitar a oportunidade para te dar um conselho de quem tem muito mais idade do que você: pare com estes blogs de downloads enquanto há tempo. Pode até ser divertido, mas o Blogger, quando descobre, apaga sem piedade.

    Como que eu sei disto? Sou top colaboradora do Fórum Oficialr e quase todos os dias aparecem dezenas de garotos como você pedindo reconsideração de seus blogs, mas nunca conseguem-nos de volta.

    Você ainda é muito jovem, mas já tem condições de entender que disponibilizar material (seja ele qual for) protegido por direitos autorais é crime.

    No Brasil, existe uma lei que regulamenta os Direitos Autorias – é a Lei Lei 9.610 – e a violação desses direitos está prevista no artigo 184 do Código Penal, prevendo penas de 1 mês a 4 anos de reclusão ao infrator.

    Nesta semana, um casal foi preso por causa de um site de downloads. Veja:
    Donos de site de downloads são presos em SP por violação de direitos autorais

    Não há necessidade de conversarmos pelo msn, pois, como eu disse, nada farei contra você. Você não foi o primeiro e nem será o último a copiar algo que fiz.

    ResponderExcluir
  11. Além disso, BCreate foi o site no qual plagiou um dos templates exclusivos do DicasBlogger.
    Vulgo, Cadê Meu Dorflex?!.
    Apenas procure nos foruns do Blogger e você verá o proprietário do blog reclamando, tanto, que a pagina onde o mesmo estava à disposição(template), foi apagada.

    ResponderExcluir
  12. Sim Juliana Entendo, Você e o Marcel (Nunca Pensei Que Diria Isso) Me Fizerão "Abrir os Olhos" Vi o Tamanho do Estrago Qe Causei Em Pouco Tempo, Agora Não Plagiarei Mais Templates, Agora Só Mecho em WebDesign, Fechei a Bcreate Deixei Um Comunicado Formalmente Ao Todos Meus Usuarios E Gostaria Que Você Leia > www.bcreate.net
    Sei Que Não Muito Legal Eu Pedir Desculpas depois de Tudo Feito...Mais Ta Ae! Obrigado Pela Dica

    ResponderExcluir
  13. João, é claro que eu te desculpo.
    E fico contente de saber que nós contribuímos para a sua mudança. Abraços

    ResponderExcluir
  14. Fico feliz por te avisado você Juliana e por te ajudado meu pareiro João sair dessa de Plágio.

    @brasilhightech

    ResponderExcluir
  15. Muito boa Dica... Porém na minha template ficou um pouco diferente. Alterei assim:



    Pois onde está isso:
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -goog-ms-border-radius:6px;

    No meu está assim:
    -moz-border-radius: $(widget.border.radius);
    -webkit-border-radius: $(widget.border.radius);
    -goog-ms-border-radius: $(widget.border.radius);

    Ficou Perfeito. Funcionou muito bem.
    Obrigado pela Dica. E para quem tem o template montado como o meu fica a dica acima.

    Renato Neto.

    ResponderExcluir
  16. DICAS VALIOSAS, VOU SEGUIR, ALGUMAS SUGESTÕES FIQUEI EM DUVIDAS OUTRAS ENTENDI PERFEITAMENTE, MAIS NO CONTESTO GERAL MUITO BOM O BLOG E ESSAS DICAS NA GRANDE MAIORIA VOU SEGUIR!!

    ABRAÇOS A TODOS!!

    ResponderExcluir
  17. Juliana,

    Muito obrigado por disponibilizar este tutorial! Uso um template disponibilizado por você e ficou perfeito com as bordas arrendodadas! Parabéns pelo blog!

    @ViniciusChargel

    ResponderExcluir
  18. olá! usei essa dica no meu blog, para arredondar as bordas, e adorei, muito obrigada! mas tinha outra pergunta sobre bordas. gostaria muito de saber como fazer o efeito esfumaçado nas bordas, como a borda do template espetacular inc., do blogger...

    ResponderExcluir
  19. Poxa, não consigo arredondar... meu template é um dos seus, Fire, mas insiro o código e nada acontece. A única coisa que acontece é o blog ficar à direita quando insiro no #blog-wraper. haha, um desastre, mas vamo que vamo, uma hora eu aprendo direito, ainda sou iniciante!
    A propósito, se quiser dar uma olhadinha em como está ficando o meu template! ;)
    foi tudo feito com as suas dicas até agora!

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top