Personalizar o titulo da postagem no blog | Quero Dicas

Quero Dicas : Personalizar o titulo da postagem no blog

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


6 comentários:

  1. ficou em cima da data personalizada oque eu fasso?

    ResponderExcluir
    Respostas
    1. 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.

      Excluir
  2. 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?

    ResponderExcluir
    Respostas
    1. 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 ♥

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

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

      Excluir

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

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.

Beijinhos ♥


Divulgue o seu Blog

Agenda dos Blogs - Blog de divulgação de blogs

Agregadores e Amigos

Atoananet Linkirado Linkicha GeraLinks Universo das Dicas
subir