01 maio 2012

Como dividir a sidebar em blocos quadrados ou redondos

||
Tumblr_lx55cuissp1r292xjo1_500_large
Muita gente me pediu esse tutorial, e como eu amo ajudar vocês resolvi atender os pedidos *-*' O efeito que dá é bem legal, a sidebar fica 'dividida' mostrando o background e dando um ar moderno, e cute no blog.
Exemplo abaixo:

1) Vá em design do modelo no seu blogger > avançado > cor de fundo da barra lateral > ajuste em transparente ( caso você deixe alguma cor nesse passo, abaixo da cor dos blocos ficará a cor que você escolheu aqui)

2) Vá em editar html no seu blog, dê ctrl + F e pesquise pela tag:  /* Widgets 
Você irá encontrar um código parecido com esse:
/* Widgets
----------------------------------------------- */
.sidebar .widget {
  border-bottom: 1px  dashed $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0; }
3) Antes de fechar a chave em vermelho cole o seguinte código: background-color: #fff2cc;
4) Troque o código em amarelo por uma cor em HTML usando essa tabela de cores

Deixando os blocos redondos

Para deixar os blocos da sidebar redondos depois do background-color: #fff2cc; Você deve colocar o seguinte código:

-moz-border-radius: 10px; /* Para Firefox */-webkit-border-radius: 10px; /*Para Safari e Chrome */border-radius: 10px; /* Para Opera 10.5+*/
}
Meu resultado final:

/* Widgets
----------------------------------------------- */
.sidebar .widget {
  border-bottom: 1px  dashed $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
background-color: #fff2cc;
-moz-border-radius: 10px; /* Para Firefox */-webkit-border-radius: 10px; /*Para Safari e Chrome */border-radius: 10px; /* Para Opera 10.5+*/
Espero que tenham gostado do tutorial, logo vou trazer o de como personalizar os títulos dos gadgets igual o do fashion scream :) beijos, adoro vocês <3'

34 comentários:

  1. Adorei o tutorial! E ainda bem que tu volto, adoro teu blog Luh.


    Adivinha? Lá no Querido Mundo das Garotas tem uma surpresa para ti flor.

    http://querido-mundo-das-garotas.blogspot.com.br/2012/05/blog-do-mes-de-maio.html

    ResponderExcluir
  2. Ótimo tuto.Fica lindo!
    http://pepper-of-rock.blogspot.com.br/

    ResponderExcluir
  3. Meu deus, com esses tutoriais meu novo layout do meu blog vai ficar lindo *-*
    beeijos,
    >>> Love Teen

    ResponderExcluir
  4. Adorei o tutorial, parece ser fácil.
    http://i-teenbr.net.tc

    ResponderExcluir
  5. Nossa que otimo tutorial este aqui!!
    Flor, adorei conhecer seu bloguito mais que perfeito aqui e agora já estou seguindo.. Se não for encomodar adoraria se seguir o meu também, há se também gostar é claro!
    Big bj ;*
    http://angelpoubel.blogspot.com.br/

    ResponderExcluir
  6. oooi! adorei o tuto, gostaria de saber o modelo usado. bjbj *o*

    ResponderExcluir
  7. Ótimo tutorial e fica lindo (:

    Seguindo aqui, viu? Adoraria te ver lá no meu blog. E se gostar não esqueça de seguir ><

    Beijos ;*
    refugio-teen.blogspot.com.br

    ResponderExcluir
  8. Como é que você fez esses títulos de gadget lindos?
    Amei o novo layout e o tutorial.Nunca pensei que seria tão fácil deixar a sidebar assim >.<
    Beijos
    http://underland-girl.blogspot.com.br/

    ResponderExcluir
  9. Eu acabei de fazer o meu mas na próxima vez eu uso ela!Queria tanto!
    Eu amei o design,muito curte!Já to seguindo!
    http://jeitointelect.blogspot.com

    ResponderExcluir
  10. hahaha,parabéns pelo tuto <3
    beijos
    garotamuitotimida.blogspot.com.br

    ResponderExcluir
  11. Super válida a dica :)

    Beijos, ederoerasunhas.blogspot.com

    ResponderExcluir
  12. Amei o tuto, vou usar no próximo Layout do blog. Ah, eu queria ser afiliada do Fashion Scream!

    http://sweetbomb-anaa.blogspot.com.br/

    ResponderExcluir
  13. Que lindo que ficaaaa *ooooooooooooooooooo*


    http://trethy.blogspot.com.br/

    ResponderExcluir
  14. Flor será que vc pode me ajudar ? meu blog ta dando uma especie de virus Malware se você souber como tirar ele me avisa?


    www.loove-teen.blogspot.com

    ResponderExcluir
  15. Oi luh,tudo bem?como faz este menu no cabeçalho ele é bem legal pq quando passa o mouse a letra muda de cor.

    PS:PQ O CABEÇALHO NAO É COM ILUSTRAÇÕES SUAS?

    BY:LIZA

    ResponderExcluir
  16. oi luh to afastada dos comentários mais sempre que posso to por aqui ! queria te pedir ajuda ja vi em alguns blogs a barra lateral tipo embutida no cabeçalho do blog gostaria de sabe como faz me ajuda ?

    http://omundoangels.blogspot.com.br/

    ResponderExcluir
  17. Heey flor. Tudo bom?
    Ai, eu amei o teu blog! *-*
    Os tutoriais me serviram muito. u.u
    Eu estava justamente procurando como personalizar a footer, porque os outros tutoriais que eu achei não derão certo. Mas o seu deu! *--*
    Ah, me ensina como tu colocou aquelas barrinhas diwas lá em cima? Beijo no coração ;*
    senhorita-insana.blogspot.com

    ResponderExcluir
  18. Luuuuuuuuuuuh, você lembra da Thamíris que postava aqui? Agora eu to aqui. :D

    ResponderExcluir
  19. Luuuuuuuuuuuh, você lembra da Thamíris que postava aqui? Agora eu to aqui. :D

    ResponderExcluir
  20. http://tamienick.blogspot.com/ aqui.

    ResponderExcluir
  21. não consegui em qual modelo deve ser feito bjs espro pot tua resposta bjs

    ResponderExcluir
  22. Otimo tutorial
    vou usar no meu blog
    http://rairaisabelle.blogspot.com.br/

    ResponderExcluir
  23. Oi! Sou a mais nova seguidora do seu blog!! Adorei! Te convido a visitar e seguir o meu também!!
    www.marcelacarraro.blogspot.com.br

    Espero que goste!!!
    Beijinhos!!

    ResponderExcluir
  24. Nova seguidora! Ei, tem como você ensinar a fazer essa "imagem" pro titulo do Gadgets?

    ResponderExcluir
  25. Olá, tudo bem? Visitando seu blog e ja gostei =)
    ja estou seguindo, se puder me seguir tambem ficarei muito feliz. Venha me visitar =)

    beijos e ate logo

    www.suellencastrodesign.blogspot.com.br

    ResponderExcluir
  26. Amei seu blog ele é muito fofo com posts bem criativos, bjs Gabii

    www.girlsteensgn.blogspot.com.br

    entre, conheça e curta.

    ResponderExcluir
  27. ameeeei seu blog mt lindo mt perfeitinho , sou iniciante no mundo das blogueiras entao gostaria quue vc desse uma olhadinha no meu blog e me desse a sua opniao http://daorajovens.blogspot.com e http://daoradesign.blogspot.com , bjooos linda e obrigada desde ja!!! obs: estou seguindo seu blog linda!!

    ResponderExcluir
  28. Ficou legal e bem transado! Foi bem útil!

    ResponderExcluir
  29. Oi flor,Estou seguindo teu blog....
    esse tuto me ajudou muito....Queria perguntar se posso postr esse post em meu blog...é claro com os devidos creditos.
    Queria pedir também para seguir meu cantinho...Espero sua visita por lá e um comentário Bjs! Parabéns pelo Blog
    http://fearless-of-myla.blogspot.com.br/

    ResponderExcluir
  30. ooi querida =D
    dá uma passadinha lá no meu blog
    http://kissyou-mi.blogspot.com.br/

    ResponderExcluir
  31. Oie, queria muito dividir a sidebar mais no avançado não tem "plano de fundo da barra lateral" se puder me ajuda agradeço desde já
    http://anabeeah.blogspot.com.br/

    ResponderExcluir
  32. que blog maravilhoso *-* adorei o post , ficou lindo no meu blog > http://foreveragirls.blogspot.com.br

    ResponderExcluir
  33. ola como vc colocou o plano de fundo do facebook?

    ResponderExcluir

- Eu respondo todos os comentários do blog, por mais que demore um pouquinho sempre respondo.
- Se você me fez alguma pergunta por comentário eu respondo no próprio post, então é só voltar no post onde perguntou que sua resposta estará lá.
- Adoro receber e-mail de leitoras, com dúvidas, elogios, sugestões e até algum desabafo como muitas fazem, acreditem não é nenhum incômodo <3
- Se quer criticar, critique de modo construtivo.
- Eu adoro quando vocês participam, afinal o blog é feito para vocês <3

Related Posts Plugin for WordPress, Blogger...