Bordas arredondadas somente nos cantos externos

19 de set de 2011



Eu vi que muitas de vocês utilizam aquele código que deixa todos os cantos com as bordas arredondas e não sei se vocês já perceberam mas ele fica com uma "fendinha" entre a coluna e a área da postagem (olhe ali na imagem), pois bem, hoje vim ensinar a deixar somente os cantos "externos" arredondados, os de fora sabe? Esse tutorial foi feito por mim , não tirei de nenhum site, descobri "fuçando" mesmo. Então se usar, de os devidos créditos ok?
Obs: Eu fiz o tutorial baseada no template Travel então não sei se nos outros ele vai funcionar ):
Para continuar lendo clique em "leia mais".

Eu vou disponibilizar 3 códigos de borda (na verdade são 6, 2 para cada tipo hihi), um vai ser para deixar só o topo do blog com os cantos arredondados (onde começam a coluna e a área da postagem) outro para deixar só a parte de baixo (onde terminam a coluna e a área da postagem) e outro para deixar ambas as partes com cantos arredondados.
Então vou deixar os códigos e após isso como aplica-los no seu HTML.

Para deixar só o topo do blog com os cantos arredondados:                                                                 
Código para arredondar a área da postagem:
-webkit-border-top-left-radius: 20px;

-moz-border-radius-topleft: 20px;

border-top-left-radius: 20px;
 Código para arredondar as colunas:
-webkit-border-top-right-radius: 20px;

-moz-border-radius-topright: 20px;

border-top-right-radius: 20px;
 Para deixar só a parte de baixo do blog com os cantos arredondados:                                                                                   
Código para arredondar a área da postagem:
-webkit-border-bottom-left-radius: 20px;

-moz-border-radius-bottomleft: 20px;

border-bottom-left-radius: 20px;
 Código para arredondar a coluna:
-webkit-border-bottom-right-radius: 20px;

-moz-border-radius-bottomright: 20px;

border-bottom-right-radius: 20px;
 Para deixar todos os cantos externos arredondados:                                                                                                       
Código para arredondar a área da postagem:

-webkit-border-top-left-radius: 20px;

-webkit-border-bottom-left-radius: 20px;

-moz-border-radius-topleft: 20px;

-moz-border-radius-bottomleft: 20px;

border-top-left-radius: 20px;

border-bottom-left-radius: 20px;
 Código para arredondar a coluna:

-webkit-border-top-right-radius: 20px;

-webkit-border-bottom-right-radius: 20px;

-moz-border-radius-topright: 20px;

-moz-border-radius-bottomright: 20px;

border-top-right-radius: 20px;

border-bottom-right-radius: 20px;

Importante: Caso sua coluna seja do lado esquerdo inverta os códigos, use o código referente a área da postagem na coluna e o código referente a coluna use na área do post ok?


Como aplicar no seu HTML:     
                                                                                                                                                                                   Vá em Design > Editar HTML e pesquise por: 
.main-inner .column-center-outer {
logo abaixo terá o seguinte código:  _background-image: none;
então cole ABAIXO dele o código de borda que você escolheu, referente a área da postagem.

Após pesquise por:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {    (caso sua coluna seja no lado direito)
e se sua coluna for no lado esquerdo pesquise por:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
logo abaixo terá o seguinte código:
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left; então cole logo ABAIXO dele o código de borda que você escolheu, referente a coluna.                                   
Caso você não ache os códigos procure pela parte que se refere a área do post e da sidebar e faça os mesmos procedimentos. Quem desenrola um pouco mais pode criar outros modelos de borda usando esse site aqui.                                     

Bom gente era isso, espero que tenha dado para entender, qualquer duvida é só perguntar. 
                                                           

38 comentários:

  1. Muito bom o tuto, adoro bordas arredondadas!

    www.bombadecereja.tk

    ResponderExcluir
  2. Muito bom o tutorial!

    fofa, sabe que sempre que precisar, pode contar cmg *--*, se precisar, só pedir!

    estou participando de um concurso, vota em mim POR FAVOR :(, O SEU VOTO PRA MIM É MEEEGA IMPORTANTE! PFV, NAO IGNORA!ALÉM DISSO É RAPIDO DEMAIS.

    entra aqui blogdasmeninasblogueiras.blogspot.com/p/votacao.html

    e vota no Cute World. Eu pegarei seu link me e deixarei vc como se fosse "destaque" por 1 mes, entendeu?


    bjs, brigada e desculpa qualquer encomodo!
    http://bnascimentooo.blogspot.com

    ResponderExcluir
  3. Concurso Divulga meu blog: http://asesmaltados.blogspot.com/2011/09/concurso-divulga-meu-blog.html

    Não perca tempo!!! Inscreva - se já.

    ResponderExcluir
  4. Realmente fica uma graça né? rs
    Adorei o tutorial, super bem explicado!

    Beijos,
    http://placefame.blogspot.com/

    ResponderExcluir
  5. Tudo bem Guria! já tinha tentado esse código mais no meu template não funcionou =/

    Beeeeijos

    ResponderExcluir
  6. fofa eu estou te seguindo
    da uma passadinha no meu blog

    http://meumundopiink.blogspot.com/

    ResponderExcluir
  7. Flor vc realmente é uma anja rsrs, sempre quiz saber isso.

    ResponderExcluir
  8. Amei a postagem! Até agora só tinha visto como arredondar tudo!
    Aceita afiliação?
    http://simplesmente-teens.blogspot.com

    ResponderExcluir
  9. Oi Amor,amei seu blog e a postagem.
    Estou seguindo,gostaria de saber se aceita afiliação ?
    Beijos
    -----------------------------
    sweetstarblog.blogspot.com

    ResponderExcluir
  10. Adorei! É, aquela fendinha que ficava não era legal! kkk
    Beijinhos

    ResponderExcluir
  11. Eba, funcionou! ;D Adorei.
    http://sapatosdeveludo.blogspot.com

    ResponderExcluir
  12. Oi Anny,não conseguir,pois o meu blog tem duas colunas.

    ResponderExcluir
    Respostas
    1. O meu também é de 2 colunas, como faz;?

      Excluir
  13. Ai seu blog é lindo!
    Pode fazer um tutorial ensinando fazer como deixar as tags e os comentários abaixo do titulo do post?

    beijos

    ResponderExcluir
  14. Ahh, fica muito fofo! Adorei!!

    ResponderExcluir
  15. Adorei!
    http://pequenairritante.blogspot.com

    ResponderExcluir
  16. Este comentário foi removido pelo autor.

    ResponderExcluir
  17. flor eu nao consigo colocaar na coluna do lado esquerdo :S

    ResponderExcluir
  18. Amei! Já estou usando no meu blog.

    http://heleninhanunes.blogspot.com

    ResponderExcluir
  19. Este comentário foi removido pelo autor.

    ResponderExcluir
  20. Muito obrigada!! estava tentando me livrar daquela fendinha à muito tempo!! amoo d+ seu blog, ele é maravilhoso! e seus tutoriais são muuito úteis, valeu mesmo! pena q os códigos ñ funcionam no explorer :| esse é um problema, pq mt gent ainda usa esse navegador ond nd funciona! kkk'

    ResponderExcluir
  21. Era o tuto que eu estava procurando, obrigada, sua diva !

    farryteen.blogspot.com

    ResponderExcluir
  22. Obrigado ajudou muito mesmo!
    www.alanfelipej.tk

    ResponderExcluir
  23. AMEI o tuto muuito bom mesmo!
    eleganti-pink.blogspot.com

    ResponderExcluir
  24. Obrigado, me ajudou bastante :)

    ResponderExcluir
  25. Mas e quando o blog não tem os códigos que vc manda procurar???
    Please, me ajude..!

    ResponderExcluir
    Respostas
    1. aí você tem que procurar o mais parecido possível ;)

      Excluir
  26. legalll faz encomendas?

    ResponderExcluir
  27. no meu não quer funcionar de jeito nenhum :(
    funcionou na sidebar, mas nas postagens não... porque será?
    se puder ajudar agradeço. beijos!

    ResponderExcluir
    Respostas
    1. Que estranho... Você podia mandar o link do seu blog pra eu ver?
      Ou um print...

      Excluir
    2. anny vç e muito linda!e inteligente!

      muito bom seu tutorial ok!

      Excluir
  28. Hey amei o tutu!
    http://meu-mundinho-perfeito.blogspot.com.br/
    beijos!

    ResponderExcluir
  29. Nao consegui .. Faz um tutorial com um print..

    ResponderExcluir
  30. Eu queria o blog com todas as bordas arredondadas e como não conseguia achar eu simplesmente peguei os dois codigos de todos os cantos externo arredondados e coloquei os dois e deu certo arrdondou tudo!!!

    ResponderExcluir
  31. Nossa vlw! era exatamente o que eu tava procurando obrigado!

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.