5 de dez de 2011

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.

6 comentários:

kah santos :) disse...

Ooii amiga!!
viim fazer a visitinha dos afiliadoos...
ameei esse post!!
bjookas
kah santos :)
http://fluorescentadolecent.blogspot.com/

Ana Clara disse...

Ótimo tutorial! Amei seu blog, muito lindinho! Beijos...
http://wronggirl-ann.blogspot.com/

Gabriella disse...

Super-bem explicado! Parabéns! Mas resolvi não colocar :S beijos,
http://mustacheemferias.blogspot.com/

O Cantinho Da Sofz disse...

Olá :) Queria agradecer os teus tutoriais pois graças a eles consegui mudar o meu blog !!! passei para te dizer que te dei créditos no meu blog :D caso queiras ver podes ir aqui -> http://ocantinhodasofz.blogspot.com/2012/01/tutorial-como-fazer-um-template-como-o.html Obrigado beijinhos da sofz :D

Ps. tenho pena que tenhas acabado com o blog :(

Anônimo disse...

Olá,

Eu gostaria de saber como faco para mudar a fonte dos titulos de minhas postagem. Estou me sentindo meio leiga nesse assunto,e em todos os sites de ajuda que eu ja fui,todos so falam no texto html,porem eu nao sei nem por onde comecar. Nao entendo nada! Por favor me ajude!

Debee disse...

Muito obrigada!

Postar um comentário

- Para evitar que seu comentário venha a ser excluído, leia a política de comentários do blog.
- Antes de fazer uma pergunta dê uma olhada na página de FAQ para ver se sua pergunta já não foi respondida lá.

Obrigada por comentar. Saber que minhas postagens são valorizadas por outras pessoas é o que me faz continuar com o blog