Personalizar o titulo da postagem no blog | Quero Dicas | Tutoriais para seu blogs


Personalizar o titulo da postagem no blog


Este tutorial vai ensinar como personalizar o título da sua postagem. 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 houver e as bordas tanto com as cores e formato que desejar. 

Clique para ver como irá ficar...
Gostou? Vamos começar? É muito fácil e rápido.
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 também 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: Flextool

Gostou? Então deixe seu comentário! Beijinhos
Me Contrate!

6 comentários

Clique e deixe seu comentários
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
avatar
admin


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

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 xingamentos entre outros, não serão publicados ou respondidos.

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

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

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