Separando os gadgets em caixas

Hoje vou ensinar a personalizar o sidebar do seu blog, que é a área onde estão suas informações pessoais / seguidores / redes sociais e etc. Antes de qualquer modificação faça o backup do seu layout atual ( modelo > fazer backup/restaurar ).

Para personalizar esta parte do seu layout, você precisa conhecer alguns elementos do seu template, e aqui estão os principais: 

#outer-wrapper - todo o seu layout é estruturado dentro desta caixa (ou div);
#header-wrapper - é a parte onde fica o banner do seu layout;
#main-wrapper  - conteúdo / postagens do blog;
#sidebar-wrapper - suas informações pessoais e gadgets;
.post-footer / #footer - final do seu template.

Para separar os gadgets em caixas, é preciso que os elementos #outer-wrapper#sidebar-wrapper estejam sem background, ou seja, sem cor no fundo. Depois vamos editar as caixinhas do side, procure pelo código .sidebar .widget  e personalize, aqui vai um exemplo:


ps: o código esta em ' modelo > edit html '. 

.sidebar .widget {width: 252px; 
background: #fff; 
margin-top:55px; 
padding:4px; 
line-height:18px; 
box-shadow: 1px 1px 2px rgba(0,0,0,0.05); 
padding-bottom: 10px; 
color: #bbbbbb; 
font-family: Georgia; font-style: italic;}

Personalizando:
width - tamanho da caixa (não esqueça do 'px' no final);
background - cor do fundo (aqui tem uma tabela de cores);
margin (top; bottom; left; right) - margens;
padding - espaçamento;
box-shadow - sombra;
color - cor da fonte;
font-family - tipo da fonte;
font-style -  estilo da font, suas variações são oblique, initial, inherit.


Faça suas alterações, salve e confira. 
Qualquer dúvida ou sugestão deixe nos cometários ;)
beijão!


Comente pelo Facebook

25 comentários:

  1. amei o post! adoro as dicas de html que tu posta, alias, muita coisa aprendi contigo! beijoo

    Coisa da Lud

    ResponderExcluir
    Respostas
    1. Que booom que gostou Lud, muito obrigada :DD

      Beijos!

      Excluir
  2. Eu acho muito legal a iniciativa de ajudar o resto dos blogueiros, quando eu não sabia nada de html e também não tinha meu layout, vinha aqui a aprendia vários truquezinhos! <3 Continue assim. Beijos. www.danielices.com

    ResponderExcluir
    Respostas
    1. Oii Danii!
      Muiiito obrigada pelo carinho, e que bom que um dia eu ja te ajudei!
      hihih

      Beiijos

      Excluir
  3. Ameei o tutorial. ♥

    http://katyperrymonitoracao.blogspot.com.br/

    ResponderExcluir
  4. Olá! Bom eu uso um dos seus templates no meu blog,amo amo! Mas eu queria separar um lugarzinho para colocar as meninas da minha equipe (ADMS) queria que tivesse a descrição e uma fto delas,como faço?

    ResponderExcluir
    Respostas
    1. oi voce e muito linda vo ce mia guda para ficar bonita

      Excluir
  5. Oi, eu tenho uma pergunta o que eu faço quando a ferramenta de procurar não acha nada?

    ResponderExcluir
  6. Olá, eu não encontrei ".sidebar .widget" no html do meu blogger! o que eu faço?

    ResponderExcluir
  7. Bruna, o código não funcionou no meu blog... Já tentei tantos que nem sei mais o que fazer...

    ResponderExcluir
  8. Bruna, o título não vai junto, o espaçamento fica entre o gadget e o título dele :(

    ResponderExcluir
  9. bruna eu queria saber como faço para deixar igual ao seu com os titulos coloridos e tudo

    ResponderExcluir
  10. Oi Bruna sou eu Ester tua prima continue com o blog ajuda muito ;)

    ResponderExcluir
  11. Olá Bruna, tentei aplicar a adição ao meu blog porém não encontrei o comando necessário (#outer-wrapper e #sidebar-wrapper). Você sabe me dizer se depende no template ou há algo errado? Agradeço muito se puder responder. bjs

    ResponderExcluir
  12. Amei! Estou começando agora e fazendo meu template todo sozinha, tá bem difícil!

    ResponderExcluir
  13. Ei Bruna, tudo bem? Gostaria de pedir se você faria um tutorial ensinando como fazer um gadget de + acessados legal como o seu : ) É muito bonito e simples, e dá um ar mais bonito às postagens populares. Teria como? Desde já agradeço! (de-lune.blogspot)

    ResponderExcluir
  14. Oii, to usando um de seus templates, que está no meu blog, esse aqui: http://www.jessicaferreira.com.br.

    E já tentei muuuito pra fazer esse procedimento, deixar os gadgets em caixas separadas e com fundo branco só neles, mas não to conseguindo.

    Pode me ajudar?

    Obrigada :*

    ResponderExcluir
  15. Salvou meu dia, pois estava sofrendo pra encontrar e esse deu certo *-*

    ResponderExcluir
  16. Ótimo tutorial, só o seu funcionou, os outros eram tão explicativos que eu me perdia inteira!

    ResponderExcluir
  17. Eii Bruna, acabei de conhecer seu blog e já amei! <3 Muito lindo e cheio de coisas lindas! *-* Parabéns! E obrigada por compartilhar essas dicas conosco. Eu comecei com blog agora e estou mais perdida do que tudo hahahahaha Vou tentar configurar essas caixinhas no meu blog! Obrigada mais uma vez. Beijos! Fica com Deus!

    tamaravilhosamente.blogspot.com.br

    ResponderExcluir