Tutorial: Personalizando a barra lateral

Oi gente! Mal criei meu blog e já tem tanta gente me apoiando!  Queria agradecer a Miyukii é uma fofa, gente, vale super apena visitar o KE. A Caciana Maria, do blog Curiosidades Teen, me pediu esse tutorial, e aqui está! Espero que gostem. Gente é super confiável esse tutorial, eu mesmo usei para fazer o daqui do blog.

  Para personalizar que nem a minha, precisamos de dois tutoriais:

Primeiro: Separar os títulos dos gadgets.
Para fazer isso você deverá ir em
Modelo >> Personalizar >> Avançado >> Plano de fundo da barra lateral >> Cor do plano de fundo

E escolher a opção Transparente, agora salve e visualize.

Segundo: Colocando os títulos dos gadgets em caixinhas.
 Vá para o Modelo do blog, clique em Editar HTML, aperte a tecla F3, e procure por:

.sidebar .widget {

Então logo abaixo desse trecho, cole o seguinte código:

background: #ffffff; 

margin: 10px 0; 

Visualize, e se estive tudo ok, salve.

Agora procure por:

/* Headings

E abaixo dele haverá um "linha", mais ou menos assim:

/* Headings

----------------------------------------------- */

Então abaixo da linha estará o seguinte código:

h2 {

  font: $(widget.title.font);

  color: $(widget.title.text.color);

}

.main-inner h2.date-header {

  font: $(date.font);

  color: $(date.text.color);

}

Apague-o e no lugar dele cole o código abaixo:

.sidebar h2 {

font-family: arial;

font-size: 14px; 

color: #fff; 

background: #fff;

height: 12px;

width: 150px;

text-align: center;

-webkit-border-radius: 0px; 

}

E agora para finalizar procure por:

]]></b:skin>

E acima dele, cole esse código:

.sidebar .widget {

padding: 10px;

margin-bottom: 50px; /*Espaço entre um gadget e outro*/

}

.sidebar .widget h2 {

background: #ffb5c5; /*Cor do fundo do título, mude de acordo com a sua vontade*/

width: 135px; /*Largura do fundo, aumente se precisar*/

font-family: Arial; /*Fonte do titulo*/

color: #ffffff; /*Cor da fonte, mude de acordo com a sua vontade*/

font-size: 15px; /*Tamanho da fonte*/

text-transform: uppercase;  /*Apague essa linha caso não queira que fique em maiúsculo*/

font-weight: normal;

line-height: 17px; /*Altura da linha*/

margin-top: -30px; /*Quantos pixels o título "sobe"*/

margin-left: -0px;

padding-left: 5px;

No próprio código já tem tudo explicado. Altere de acordo com a sua vontade, visualize, e se estiver tudo certo, salve.

Beijos,

Créditos: Monalisa com S