1 Tutorial - Sidebar dividida em blocos

              
Hooy amores, hoje trouxe o primeiro tutorial do BLG que é um que eu acho que as pessoas querem bastante, por que eu sempre quiz ate aprender a fazer e é ate que rapidinho. Deixar sua sidebar igual a minha.
1- Vá em design, modelo vai aparecer uma imagem do seu blog escrito em baixo personalizar e do lado editar html, clique em personalizar depois clque em avançado e coloque a cor do plano de fundo da sua barra em transparente. Então salve e volte em modelo e clique em editar html aperte ctrl+f (que ira aparecer a caixinha de busca) e escreva nela:  /* Widgets 
Você ira encontrar um codigo parecido com esse:


/* Widgets
----------------------------------------------- */
.sidebar .widget {
  border-bottom: 1px  dashed $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0; }

Antes de fechar a chave em vermelho cole o seguinte codigo: background-color:#fff2cc;

Troque o codigo destacado em amarelo por uma cor em html nesse site: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm

E pronto é só salvar.

Agora se você quer deixar os blocos redondos clique em leia mais.

Para deixar os blocos redondos depois do codigo background-color: #fff2cc; E antes de fechar a chave em vermelho cole esse codigo: -moz-border-radius: 10px; /* Para Firefox */-webkit-border-radius: 10px; /*Para Safari e Chrome */border-radius: 10px; /* Para Opera 10.5+*/
}

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+*/
} 

(Esse tutorial foi feito pela Luanara do Fashion Scream)

http://fashionscream.blogspot.com.br/

Espero que tenham gostado do tutorial, bjs