terça-feira, 15 de dezembro de 2015

Personalizar títulos da sidebar do Blogger

A sidebar (barra lateral) é uma parte importante para seu blog, pois nela colocamos os Widgets, Gadgets, ícones das redes sociais, imagens, slides, gifs entre outras ferramentas. Um fato que passa despercebido pela maioria dos blogueiros, é a personalização dos títulos da sidebar do Blogger, sendo totalmente editável ao seu gosto, possibilitando infinitas opções para formatação do layout, cor dos títulos, backgrounds diferentes e individuais. Neste artigo, mostrarei como definir um estilo exemplar para a sidebar do Blogger, e também escolher cores diferentes para cada título.

 Iremos começar estilizando a cor dos títulos da sidebar, na área de formatação geral (BloggerModeloPersonalizar):


Aplique as configurações sugeridas
 Seguindo o passo acima, os títulos de sua sidebar ficarão brancos. Agora chegou a hora de personalizar o plano de fundo de cada título. Para isso, vá em ModeloEditar HTML, e ACIMA de ]]></b:skin>, cole este seguinte trecho:

.sidebar h2 {
text-align: center;
background: #133783;
padding: 7px;
color: #ffffff;
border-radius: 1px  1px}
Ficando desta forma:

 Você irá obter esse resultado:


Perceba que os títulos ficaram com a cor branca, e o background ficou azul. Porém, é possível escolher cores individuais para o fundo de cada sidebar do Blogger. Você poderá fazer isso, colocando um pequeno trecho em CSS logo acima de ]]></b:skin>. Façamos isso com o título da caixa de busca, cujo identificador do Gadget é CustomSearch1:

 #CustomSearch1 h2 {
    background: #8BAF1C;
    color: #FFFFFF;
}
 Ficando desta forma:


Lembre-se de que, você terá que colocar o identificador do Gadget entre a parte em negrito, seguido pelo sufixo h2, que é a tag responsável pelos títulos da Sidebar. Para fins didáticos, escolhi uma cor verde bem clara, que obviamente, poderá ser editada.

 Resultado:


Perceba que o background está com a cor que citei, verde claro. E assim, finalizamos este tutorial. Espero que treine bastante essa incrível opção de formatação. Faça isso com todos os títulos de sua Sidebar! Boa sorte.

Bruno Bezerra

Bruno Bezerra é blogueiro e estudante. Mantém como foco principal a plataforma Blogger, no qual começou a realizar seus projetos. Gosta de mexer com HTML e CSS.
comments powered by Disqus

 

Copyright @ 2011-2015 Fique Sabendo!.