1 de abr de 2012

Tutorizando - Arredondar os cantos do layout

| |
Hoje vou ensinar a arredondar os quatro cantos do layout, do mesmo jeito que o meu, a pedidos de leitores. (:
Clique em "Ler mais".


Coloquei o código para arredondar todos os cantos. Então, você precisa escolher apenas os códigos certos de acordo com o seu layout (a posição das barras laterais). Se o seu é como o meu (uma barra lateral do lado direito apenas), pegue os códigos da barra lateral direita, e os códigos do lado esquerdo da barra de postagens. Beleza?

Vá em Modelo - Editar HTML - Prosseguir.

1. Canto superior (de cima) - barra lateral DIREITA
Procure, com o CTRL+F, por:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
Logo abaixo cole:
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
2. Canto superior (de cima) - barra lateral ESQUERDA
Procure, com o CTRL+F, por:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
Logo abaixo cole:
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
3. Canto superior - barra de POSTAGENS
Procure, com o CTRL+F, por:
.main-inner .column-center-outer {
Cole logo abaixo:

Para arredondar o lado DIREITO:
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
Para arredondar o lado ESQUERDO:
-webkit-border-top-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
4. Canto inferior (de baixo) - barra lateral DIREITA
Procure, com o CTRL+F, por:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
Logo abaixo cole:
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
5. Canto inferior (de baixo) - barra lateral ESQUERDA
Procure, com o CTRL+F, por:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
Logo abaixo cole:
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;
6. Canto inferior (de baixo) - barra de POSTAGENS
Procure, com o CTRL+F, por:
.main-inner .column-center-outer {
Cole logo abaixo:

Para arredondar o lado DIREITO:
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
Para arredondar o lado ESQUERDO:
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;

Qualquer dúvida, é só me perguntar. (:

Participe da promoção "Seu blog no DDP" e  apareça em um post por aqui! É suuuper simples, nada de votações e tudo mais. Clique aqui.

22 comentários:

  1. Carol, nem preciso dizer que seu tempero nos tutoriais é mágico! Ai, ai, estou vendo gente bem sucedida na vida!
    Abração, minha amiga!
    http://mentesvelhas.blogspot.com.br/

    ResponderExcluir
  2. Ótimo tuto :)
    Beijos,
    http://menina-delicada.blogspot.com/

    ResponderExcluir
  3. ahh super legalmo tutorial e ficva [´´otimo aqui , amei seu blog e o design é lindo *-* Portal Disturbia | Lukas Martins

    ResponderExcluir
  4. Eu adorei esse tutorial, bem facil. Eu já sabia fazer isso rsrs.. Mais ainda assim gostei, pra quem nao sabe vai ser uma mega dica...

    Seguindo aqui flor.

    Ah! Tem um mega sorteio no meu blog, participa lá http://pepperlipstick.blogspot.com.br/2012/04/primeiro-sorteio-no-pepper.html

    ResponderExcluir
    Respostas
    1. Pois é, a maioria já sabe, só fiz porque pediram. Vai ajduar alguém eu espero hahahah

      bj

      Excluir
  5. hmmm, bem interessante :) vou ver se uso no meu
    tô seguindo o seu blog, conhece o meu?
    http://laialisafa.blogspot.com/
    espero uma visitinha sua lá, combinado? rs
    Beijosssss :D

    ResponderExcluir
  6. Achei ótimo esse tutu, o meu blog já tem os cantos arredondado. Ah, já terminou as votações do concurso daqui? vou tirar o pedido de votos do meu blog. c:

    Beijos; @Raah_Castroo
    www.vidaadegarotaa-vdg.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Terminaram sim, a segunda fase já vai começar (:

      Excluir
  7. Já me inscrevi na promoção Seu blog no DDP! Super legal o tutorial, :3
    Beijos!
    rascunho-errado.blogspot.com

    ResponderExcluir
  8. Na época que eu estava tentando fazer meu layout, eu procurei desesperadamente um tutorial assim HAUEHUAHEUAHEAU Mas só achei uns bem confusos e mal explicados. Favoritei esse pra usar no próximo lay ;)

    muggle-world.blogspot.com

    ResponderExcluir
  9. Adorei, eu amo arredondar as bordas, fica bem mais bonito e fofo.

    http://www.perfeitinhablog.com/

    ResponderExcluir
  10. Adoro tutoriais, eu ando muito sem tempo de mexer no layout do meu blog, tá uma baguncinha... rs mas vou usar esse tuto assim q sobrar um tempinho =)

    Tem sorteio lá no blog, passa lá :)
    Beijos
    http://dropsparadise.blogspot.com.br

    ResponderExcluir
  11. AAAmei o tuto! Tava procurando faz um tempão, até achava, mas nunca dava certo!
    E o seu, deu!

    Quer dar uma olhada?
    ummilkdhskr.blogspot.com

    ResponderExcluir
  12. Ótimo tutorial,eu adoro esse tipo de borda.
    http://i-teenbr.net.tc

    ResponderExcluir
  13. Eu não estou conseguindo fazer isso no blog!!!!!

    ResponderExcluir
    Respostas
    1. Ah não sei o que deu errado.
      Qual é o seu blog?

      Excluir
  14. oi, eu pesquiso os códigos q vc colocou, mais nenhum deles aparece no meu blog. me ajuda pf

    ResponderExcluir

Comente a vontade, mas lembre de deixar o link do seu blog para que eu possa retribuir. E nunca, nunca mesmo, faça "copia e cola" por aqui.
Comente aqui somente sobre o post, pra qualquer outro assunto use a página de contatos (:

Bjj
Carol