[Tutorial] Títulos da Sidebar + Widgets em caixinhas

Encontrado em: http://weheartit.com/entry/23100381

O primeiro tutorial do blog é: os títulos da sidebar em caixinhas com bordas arredondadas + widgets separados como os da barra lateral aqui do MF! (não estão bem separados, mas dá pra ver uma cor diferente neles)

O tutorial é do blog da Débora Morais, o Spazio DM, mas com umas pequenas edições minhas, haha.

Então vamos lá!

Vá em Design > Editar HTML > Dê Ctrl+F e procure por ]]></b:skin>

Acima de ]]></b:skin> cole:

.sidebar h2 {
text-align:center;
background-color: #XXXXXX;
padding:1px;
border: 1px solid transparent;
-webkit-transition:0.4s;
display:inline;
float:right;
margin-top:-15px;
text-shadow: 0px 1px 1px transparent;
height: 14px;
padding-left: 5px;
padding-right: 5px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.sidebar .widget {
padding-bottom: 10px;
margin: 40px 0;
background: url(#);
border-top: 1px solid #XXXXXX;

Observações:

Em background-color: #XXXXXX; você pode alterar a cor do fundo.

Em float:right; você escolhe em que lado quer que a caixinha fique.

background: url(#); você pode optar por colocar uma imagem no fundo do widget, ou trocar por background-color: #XXXXXX; e escolher a cor que você quer, ou simplesmente deixar em transparent se não quiser cor.

E border-top: 1px solid #XXXXXX; é a linha do título e que também é possível escolher a cor.

Visualize pra ver se não teve nenhum erro e depois salve.
Fácil né?
É isso, espero que tenham gostado (: