Personalizar o titulo da postagem no blog | Quero Dicas


Personalizar o titulo da postagem no blog


Neste tutorial você ira aprender Personalizar o titulo da postagem no blog.
Não falo de personalizar a forma das letras ou somente a primeira letra do título e sim colocar um fundo colorido e bordas. 

Veja na imagem abaixo como ira ficar. 

Claro, você personalizará a cor do fundo, o titulo normal e se deseja houver e as bordas com as cores e formato que desejar. 

Ele fica assim Gostou? Vamos começar.

Antes de começarmos, eu sempre recomendo fazer um backup do seu template, ao instalar qualquer tipo de implementação de códigos dentro do HTML do seu blog e claro, dê preferências a blogs de teste!
Não sabe fazer Backup? Não tem problema, clique em: Como fazer um Backup ou restauração do seu blog. 
  1º PASSO


1 - Acesse o painel do seu blog. Vá em Modelo e Editar HTML

2 - Tecle Ctrl + F no seu teclado e procure dentro do template por:

 /* Posts
-------------------------------- */    

3 - Ao encontrar, coloque abaixo dele o seguinte código:

/* www.querodicasde.com.br */
h3.post-title {
margin-top: 30px;
text-align: center;  /* posição de alinhamento do título */
background: #FFC0CB; /* cor de fundo */
border-bottom: 4px double #FFF0F5; /* borda de cima */
border-top: 4px double #FFF0F5; /* borda debaixo */
width:580px; /* comprimento lateral */
height:30px; /* largura da faixa */

}

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

h3.post-title a:hover {
  color: #FF0000;  /* cor do título no estado hover  */

}
   

4 - Salve e visualize


  PERSONALIZANDO


Agora que você visualizou e já viu a diferença, é hora de personalizá-lo.
Eu deixei ao lado de cada código onde e o que você pode personalizar, mais explicarei melhor:

► text-align: center;  - Você pode colocar Hight ou Left, se desejar

► double - Você poderá colocar:

dashed - PONTILHADO
groove - LINHA SOMBREADA
solid - LINHA SOLIDA

► width:580px; - É o comprimento da sua postagem

► height:30px; - É a largura da faixa.

►Caso queira mais larga, terá que mudar margin-top: 30px; pelo mesmo tamanho para que fique com o texto centralizado dentro da faixa.

► color: #FF0000; - Essa você já sabe, não é? então mude e coloque a cor que desejar
Aqui tabela de cores

Gostou? 
Beijinhos
COMPARTILHE :  

Comentários
6 Comentários

6 comentários

avatar
admin
segunda-feira, 13 julho, 2015 ×

ficou em cima da data personalizada oque eu fasso?

Resposta
avatar
admin
segunda-feira, 13 julho, 2015 ×

Olá Layza. Bom eu nunca testei esse código ao lado da data, mas vá alterando a margin-top e a width:580px; até que fiquem um ao lado da outra.

Resposta
avatar
admin
domingo, 28 fevereiro, 2016 ×

Funcionou perfeitamente obrigada por compartilhar conosco muito sucesso para você.
Só queria mudar o tamanho das letras do título e não consigo pode me ajudar?

Resposta
avatar
admin
domingo, 28 fevereiro, 2016 ×

Olá Luciene.
Para mudar tanto o tamanho quanto o estilo da fonte, você poderá trocar em Modelo, Personalizar e em Avançado.

Espero ter ajudado.
Beijinhos ♥

Resposta
avatar
admin
sábado, 18 junho, 2016 ×

Poxa Vida bia Barros aprendi muinto com seu blog Parabéns Sucesso!!!

Resposta
avatar
admin
sábado, 18 junho, 2016 ×

Que bom Cyrasky. Fico super feliz em saber =D
Sucesso pra você também!
Beijinhos ♥

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.