Como personalizar o título das postagens no blog | Quero Dicas Quero Dicas : Como personalizar o título das postagens no blog

Quero Dicas : Como personalizar o título das postagens no blog

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

* Você reservou um tempinho para comentar? *

Desde já agradeço!

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


11 comentários:

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

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

    ResponderExcluir
  3. 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

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

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

      Excluir

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Linkicha Atoananet Linkirado
subir