Tutorial: Personalizando a sidebar

Como prometido, aqui no blog teremos mais tutoriais ensinando a editar os templates do Blogger. Por enquanto os tutoriais serão apenas para essa plataforma, já que não sei lhufas sobre os templates Wordpress e outros tipos. Vou tentar ensinar aqui tudo que aprendi nos meus anos de "blogueira de HTML", e qualquer dúvida que vocês tiverem é só chamar!

Hoje vou ensinar a vocês como personalizar a sidebar do Blogger e deixá-la bonitinha e organizada. Como a barra lateral é uma parte bem importante do blog (onde ficam muitas informações sobre o blog), deixá-la desarrumada espanta qualquer leitor, eu mesma não gosto de desorganização.

Veja aqui o antes e depois da sua sidebar com este tutorial:

Gostou? Então vamos!

OBS: Antes de começar, faça um backup do seu template! Essa postagem aqui ensina direitinho como fazer. Fazer backup é essencial, pois se algo der errado você pode reinstalar o layout. Outra coisa essencial é que esse tutorial vale para o modelo Viagem (Travel) do Blogger. Talvez funcione com outros modelos, mas não é de certeza.

Dividindo os gadgets em caixas

Na dashboard do seu blog, vá em Modelo >> Editar HTML. Dê um clique dentro da caixa do código e depois aperte Ctrl + F. Pesquise pelo seguinte código:

.sidebar .widget {

Você vai encontrar um código mais ou menos assim:

.sidebar .widget {
border-bottom: 2px solid transparent;
padding-bottom: 10px;
margin: 10px 0;
}

Encontrou? Agora você vai substituí-lo por esse código:

.sidebar .widget {
background: #ffffff;  /* cor do plano de fundo */
padding: 10px;  /* espaçamento interno */
margin-bottom: 30px;  /* espaço entre cada caixa */
} 

Para deixar do jeito que você quiser é só mudar o que está destacado, já tem as explicações do lado.

Personalizando os títulos da sidebar

Dessa vez é mais fácil ainda, não precisa substituir nenhum código. Logo depois do trecho que você modificou antes, cole esse aqui:

.sidebar .widget h2 {
background: #000; /* cor do plano de fundo */
color: #fff; /* cor da fonte */
padding: 5px; /* espaçamento interno */
margin: -10px -10px 10px -10px; /* espaço externo (cima, direita, baixo, esquerda) */
text-align: center; /* alinhamento do texto */
font-family: Arial, sans-serif; /* fonte do título */
border-bottom: 3px solid #999; /* borda de baixo (está na cor cinza) */
}

Feito isso, basta modificar o que está destacado. É bem fácil, não é?
Me digam se testarem, e se deu certo. Qualquer dúvida pode perguntar aqui nos comentários ok?
Beijos, e até mais!