Personalizar o título das postagens

Esse post era pra ter saído ontem, mas quando estava acabando ele foi embora a luz aqui de casa e só deu pra acabar e postar agora. De todo modo, vou lhes mostrar um tutorial que uma leitora muito especial me pediu, ele vai lhes ensinar a personalizar o título de suas postagens.

     Primeiramente vocês terão que entender que o título das postagens têm três "momentos" que são personalizáveis: o momento em que o título está normal na página principal do seu blog sem ninguém tocar nele, o momento em que o leitor coloca o cursor do mouse em cima dele e o momento em que o leitor já clicou no título e está na página que mostra somente o post.

     Cada um desses momentos que apresentei para vocês são representados por um código específico e todos podem ser personalizados. Para isso, vou lhes mostrar os códigos relacionados a cada momento e depois lhes ensinarei como personalizá-los.

Momentos dos Títulos

h3.post-title a {

     Esse código se refere a como aparece o título do post na página principal do seu blog, ou seja, quando ninguém clicou nele e nem está com o cursor sobre ele.

h3.post-title a:hover {

     Refere-se a quando o leitor está na página principal do blog, mas com o cursor do mouse sobre o título da postagem.

h3.post-title {

     Refere-se a quando o leitor já clicou no link da postagem e está na página onde aparece somente o post que ele está lendo.

Personalização

     Para personalizar cada momento do título, vá em Modelo (chamado de Design na antiga interface do Blogger) em seu painel do Blogger, aperte Ctrl + F ou F3, procure por um dos códigos apresentados anteriormente, quando encontrar apague tudo que está na linha seguinte ao código encontrado até a linha que está antes da próxima } Entenda melhor o que fazer observando a imagem a seguir:

     Na imagem tudo que está marcado em amarelo deve ser apagado porque está entre o código que representa o título e a } indicada com uma seta azul, é isso que você vai fazer no seu html. No lugar do que você acabou de apagar, coloque o seguinte código:

text-align:center;
font: $(post.title.font);
color: #90EE90;
border-bottom: 1px solid #000;
background: url('URL DA IMAGEM AQUI');

     A primeira linha do código (text-align:center;) deixa o título dos posts centralizado. Se você não quiser centralizá-los, apague essa linha.

     A fonte você vai mudar no Design do Modelo do seu blog, onde você tem várias opções. Para mudar a cor você troca o código #90EE90 pelo código da cor que quiser, para isso, acesse essa tabela de cores, escolha a cor que gostar e veja seu código.

     A quarta linha do código refere-se a borda que ficará em torno de todo o título da postagem. Você pode personalizá-la mudando a espessura da borda trocando o 1px por qualquer outro número (sempre deixando o px lá), mudando o tipo de borda que no caso está solid e você poderá escolher mais opções vendo aqui, e ainda pode mudar a cor da borda, mudando o código #000 assim como fez na cor da fonte. Se você não quiser borda é só apagar a linha border-bottom: 1px solid #000; do código

     A última linha serve para colocar um fundo no título. Você pode escolher um background e colocar a url dele onde está escrito URL DA IMAGEM AQUI ou pode apagar trocar essa última linha por background: #fff; e colocar somente uma cor no fundo, fazendo o mesmo procedimento que fizemos com a cor da fonte. Se você não quiser o fundo no título das suas postagens, apague a linha background: url('URL DA IMAGEM AQUI'); do código.

 Veja também: como colocar sombra no título das postagens.