Personalizando o Título do Post

03:15

personalizando o titlulo das postagens, posts, titlulo, postagem, blog, tutorial

Olá meus amores,  hoje vim ensinar para vocês uma forma simples de personalizar o título dos posts.
Os creditos desse post vao para Nah e Cherry <3

Para quem nao sabe existem 3 codigos que personalizam (tres formas do post), sao eles:

O título do post normal, quando está na página inicial do blog que é determinado pelo codigo:
h3.post-title a { 

O título do post em estado houver, quando o mouse está sobre ele que é determinado pelo codigo:
h3.post-title a:hover { 

E o título do post depois que você clicou e já está na página do post, determinado pelo codigo:
h3.post-title { 

Todos esses tres codigos estao abaixo desse codigo geral de Post:
/* Posts


Basta colocar a personalizacao a seguir abaixo das tres opcoes na personalização do título:

font-family: Arial; /* fonte do título */
font-size: 32px ; /* tamanho da fonte */
color: #000000; /* cor do título*/
border-bottom: 1px dashed#0000; /* cor, tamanho e tipo de borda */


Uma dica especial, vc coloca abaixo da opcao em HOVER de uma forma diferenciada, ou seja, altera a cor (para quando passar o mause a cor seja diferenciada) e se quiser um EFEITO HOVER com SOMBRA, basta adicionar esse codigo abaixo:

text-shadow: 1px 2px 3px #6a6a6a; /* tamanho e cor do efeito */

O codigo ficará assim:

font-family: Arial; /* fonte do título */
font-size: 32px ; /* tamanho da fonte */
color: #000000; /* cor do título*/
border-bottom: 1px dashed#0000; /* cor, tamanho e tipo de borda */
text-shadow: 1px 2px 3px #6a6a6a; /* tamanho e cor do efeito */


Para quem nao entende muito bem onde colocar os codigos, basta procurar por /* Posts e adicionar o codigo completo (substituindo apenas as tres opcoes que citei ai acima por:

/* Posts
h3.post-title a {
font-family: MamaeQueNosFaz; /* fonte do título */
font-size: 32px ; /* tamanho da fonte */
color: #FF82AB; /* cor do título*/
border-bottom: 1px dashed#8B5742; /* cor, tamanho e tipo de borda */
h3.post-title {
font-family: MamaeQueNosFaz; /* fonte do título */
font-size: 32px ; /* tamanho da fonte */
color: #FF82AB; /* cor do título*/
border-bottom: 1px dashed#8B5742; /* cor, tamanho e tipo de borda */

h3.post-title a:hover {
font-family: MamaeQueNosFaz; /* fonte do título */
font-size: 32px ; /* tamanho da fonte */
color: #FF82AB; /* cor do título*/
border-bottom: 1px dashed#8B5742; /* cor, tamanho e tipo de borda */
text-shadow: 1px 2px 3px #6a6a6a;   /* tamanho e cor do efeito */


Espero que vocês tenham gostado!
Nao esquecam de deixar seus comentarios para eu saber se foi util para vocês.
Um forte abraco e até o proximo post se Deus quiser!

Você pode gostar também

6 comentários

  1. Oi, Reh! T emandei e-mail sobre a área de posts, quando puder me responder, agradeço! <3

    ResponderExcluir
    Respostas
    1. .Van, vc enviou p que email?
      Respondo todos recebidos no email do blog que eh o contato@renatamassa.com
      Depois me confirma... Bjus

      Excluir
  2. Gostei do tutorial, bem útil. também amei o blog e estou seguindo para não perder mais suas postagens haha
    http://velhosoutonos1.blogspot.com.br/

    ResponderExcluir
  3. Nossa, adorei muito as dicas, não sei se tu trabalha nessa área, mas uma das matérias do meu curso de informática, é construção de páginas para web, criar conteúdo e tudo mais, e me ajudou muito no que eu precisava. Obrigada linda, e se quiser, também tenho um blog: https://brendaslara.wordpress.com/
    Beijosss!
    Att. Brenda Lara

    ResponderExcluir

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possivel.
Um forte abraço a todos vocês!

Contrate o Blog

Meu blog faz parte do Modatrade


Renata Massa
Renata Massa
Modatrade | A vitrine dos blogs de moda
Modatrade | A vitrine dos blogs de moda