Como personalizar o título da postagem no blog | Quero Dicas | Tutoriais para seu blogs


Como personalizar o título da postagem no blog


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

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

  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!
Gostou? Deixe seu comentário! Beijinhos

11 comentários

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