Tutorial - Mudando a sidebar do blog

Olá pessoal!

Hoje vou mostrar como colocar imagem na sidebar do blog, a coluna que fica na lateral.

Para quem não leu os anteriores, clique AQUI.

Como em meu blog, tem a imagem fofinha, aquela faixazinha na barra lateral com borboleta.

Para fazer isso, terá que ter a imagem hospedada em algum local, olhe o tutorial no blog de como hospedar imagem no próprio blogger.

 Atenção! Não criar tão grande, tudo bem? Olhe o exemplo que será usado no template free abaixo:

Agora vamos aprender a colocar na barra. Primeiro procure pelo código abaixo destacado:

/* Headings
----------------------------------------------- */
h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
}
.main-inner h2.date-header {
font: $(date.font);
color: $(date.text.color);
}
.footer-inner .widget h2,
.sidebar .widget h2 {
padding-bottom: .5em;
}

Após fazer isso, substitua todo código acima por este:

/* Headings
----------------------------------------------- */
.sidebar h2 {
background:url(LINK DE SUA IMAGEM AQUI)no-repeat;
width:310px;/*Largura da imagem*/
height:41px; /*Altura da imagem*/
margin-right:-30px;
margin-top:2px;
margin-bottom:0px;
padding-left:2px;
color:#fff; /*Cor da fonte*/
text-align: center; /*Texto centralizado*/
font-family:'Dancing Script'; /*Fonte da sidebar*/
font-size:24px; /*Tamanho da fonte*/
line-height:40px;
text-transform:normal;
}
h2 {
font: normal bold 6px 'Dancing Script';
color: #000000;
}
.main-inner h2.date-header {
font: normal bold 14px 'Dancing Script';
color: #666666;
}
.footer-inner .widget h2,
.sidebar .widget h2 .region-inner .fauxcolumn-inner .region-inner{
padding-bottom: .5em;
background: #ffffff;
}

Nas partes que estão destacadas de azul pode modificar de outra forma.
Para colocar a cor de acordo com a TABELA, no local de imagem é só apagar tudo que está em azul, mas atenção com ponto e vírgula ok?
Para modificar é só colocar # com a cor que quer, exemplo:
background: #000;/*Cor do fundo*/
Para modificar a outra parte em azul, o CENTER, ou seja, texto centralizado, troque por estes:
Direita: right
Esquerda: left
Centralizado: Center
Atenção para o ponto e vírgula também.

VEJA O POST COM TEMPLATE FREE PARA VOCÊS.

Por hoje é só, beijos e até a próxima.

OBS: Favor não reblogar, dê sempre os créditos, este blog está sobre licença e você pode ser acusado de plágio.