Como personalizar o título das postagens no blog


Que tal personalizar o titulo das suas postagens e deixá-los mais bonito, destacado e muito mais atrativo para seus visitantes?
Legal não é?

hoje vou ensinar a você como fazer. É fácil!
Vem!


  TUTORIAL



1. Acesse o Painel do seu blog

2. Vá em "Modelo" e "Editar HTML"

3. Procure por: /* Posts
 
/* Posts


Logo abaixo você encontrará ao similar a isso:

h3.post-title {
  margin-top: 20px;
}
h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}
h3.post-title a:hover {
  text-decoration: underline;
}

4. Substitua todo esses códigos (completo) por um dos códigos disponíveis abaixo:
Escolha um só modelo para substituir

Modelo simples
Fundo transparente, centralizado e 1 linha abaixo do titulo

h3.post-title {
  margin-top: 20px; /* Topo do título */
  text-align: center;  /* posição de alinhamento do título */
}
h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
  text-transform: uppercase; /* Deixa o titulo grande */
  border-bottom: 3px dotted #A7CCCA; /*cor da borda */
}
h3.post-title a:hover {
  text-decoration: none;
   color: #cbb642; /* cor em estado hover */



Modelo com fundo
Cor de Fundo, centralizado e 2 linhas no titulo

>h3.post-title {
margin-top: 20px;
text-align: center;  /* posição de alinhamento do título */
background: #a7e4f8; /* cor de fundo */
border-bottom: 3px dotted #A7CCCA; /* borda de baixo */
border-top: 3px dotted #A7CCCA; /* borda de cima */

}

h3.post-title a {
  font: $(post.title.font);
  color: #fff; /* cor do título no estado normal */
  text-transform: uppercase;
}

h3.post-title a:hover {
  color: #f489ee;  /* cor do título no estado hover  */
  text-transform: uppercase;
  text-decoration: none;   /*sem sublinhado */
}


Entendendo o Código
Em ambos os códigos eu deixei o que deve ser alterado. tais como as cores.

► Tabela de cores aqui.

• Caso queira não queira o titulo centralizado, altere "center" por "right" ou "Left"

• Se deseja as linhas diferentes, troque "dotted" (pontilhado) por:
Double - LINHA DUPLA
Groove - LINHA SOMBREADA
Solid - LINHA SOLIDA

• Caso não queira que as letras fiquem em "Caps Lock" (grande), apague:
text-transform: uppercase;


5. Agora personalize ao seu gosto, salve e pronto!

Beijinhos
COMPARTILHE :  

Comentários
11 Comentários

11 comentários

avatar
admin
quarta-feira, 28 outubro, 2015 ×

Adorei!Funcionou no meu.Obrigado.

Resposta
avatar
admin
quinta-feira, 29 outubro, 2015 ×

Fico feliz que tenha adorado =D

Resposta
avatar
admin
sexta-feira, 06 novembro, 2015 ×

Oi, Bia... Eu não acho esses códigos no html

Resposta
avatar
admin
sexta-feira, 27 novembro, 2015 ×

bia eu n consigo copiar os codigo?!
o que eu tenho q fazer?

Resposta
avatar
admin
domingo, 29 novembro, 2015 ×

Oiii querida passei a conhecer seu blog hoje e gostei das dicas... posso te dar uma sugestão?
coloca a imagem para ser exemplo nas dicas que você dá. Para saber como vai ficar a pessoa tem que fazer todas as alterações e se não for o que era procurado?
Não sei se vc conseguiu entender.
Beijosss

Resposta
avatar
admin
domingo, 29 novembro, 2015 ×

Olá Adriana.
Obrigada pela sugestão e por seu comentário.
Acho que entendi o que quis dizer...
Em relação aos exemplos, normalmente, coloco imagens de exemplos acima dos códigos, para que as pessoas possam ver o que ela estará pegando.
Infelizmente, pensei que neste post não havia a necessidade de colocar, somente descrever sobre cada um.
Mais estarei acertando isso o mais rapidamente.
Mais uma vez, obrigada pela sugestão, por seu comentário e por sua visita. =D
Beijinhos ♥

Resposta
avatar
admin
quarta-feira, 18 maio, 2016 ×

Mais uma super dica obrigada :)

Resposta
avatar
admin
quarta-feira, 18 maio, 2016 ×

Oi Bia. Já estava ficando com saudades do seus comentários. hahaha
E respondendo a sua pegunta: Por nada!
Beijinhos ♥

Resposta
avatar
admin
terça-feira, 07 junho, 2016 ×

Adorei deu super certo .

Resposta


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por seu comentário e por sua presença!

Apenas peço que leia:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comente a vontade, deixe sua opinião, crítique, esclareça suas dúvidas e dê suas sugestões ou dicas sobre o assunto referente à postagem.


Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.

É proibida a reprodução total ou parcial dos artigos deste blog sem autorização|Somente terá o direito de republicar os códigos publicados dando os devidos créditos.