CENTRALIZANDO O TÍTULO DA POSTAGEM

20 abril 2016



Este tutorial é mais uma aula da nossa série Layout dos sonhos e hoje trago uma personalização simples, mas indispensável em qualquer blog: O título da postagem! Não é uma regra deixar o título do post centralizado, isso depende muito do estilo do layout do seu blog. Os códigos aqui citados são encontrados no layout base que disponibilizei para que possamos trabalhar nele. Clique aqui para baixa-lo. Agora chega de enrolação, e vamos aprender a centralizar o título do post.


No painel de códigos você vai procurar por:
h3.post

Agora apague todo esse código


h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}
h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}
h3.post-title a:hover {
  color: $(link.hover.color);
  text-decoration: underline;
}

e cole esse no lugar:


h3.post-title, h4 {
font-family: Verdana; /*FONTE DO TEXTO*/
font-size: 28px; /*TAMANHO DA FONTE*/
color: #151515; /*COR DA FONTE*/
font-weight: bold; /*DEIXA A FONTE EM NEGRITO, APAGUE SE QUISER*/
text-align: center; /*CENTRALIZA O TEXTO*/
}
h3.post-title a {
font-family: Verdana; /*FONTE DO TEXTO*/
font-size: 28px; /*TAMANHO DA FONTE*/
color: #151515; /*COR DA FONTE*/
font-weight: bold; /*DEIXA A FONTE EM NEGRITO, APAGUE SE QUISER*/
text-align: center; /*CENTRALIZA O TEXTO*/
}

h3.post-title a:hover {
color: #FE2E64;
text-decoration: none;
}

Visualize e estiver tudo ok, salve! 



Entendendo os comandos do código:

h3.post-title, h4 { Quando já se clicou no título da postagem.

h3.post-title a { Título quando está na página INICIAL do blog.

h3.post-title a:hover { Título ao passar o mouse.

Os outros comandos eu deixei bem explicadinho no próprio código, como mudar a cor, o tamanho e o estilo da fonte, que inclusive ensinei aqui no Manual, uma forma de colocar fontes diferentes no blog, confira aqui.

Caso não queira deixar o título da postagem centralizado, você pode trocar o center por:

Left: esquerdo
Right: direito

Espero que tenha gostado. Qualquer dúvida, deixe nos comentários. 
Um super bjo e até a próxima. 

Xoxo \0/


14 comentários:

  1. Adoreeei o post , conheci seu blog hoje e ja estou super seguindo e agurdando você me responder no face!! bjo bjo
    www.phanypinheiro.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Phany sua lindaaa <3 Será um prazer ter você aqui no meu cantinho! E com certeza vou te responder lá no face =)

      Bjs :*

      Excluir
  2. Amei o seu blog,eu acabo de conhecer ele.Vou seguir as suas dicas haha
    http://acabanadaleitura.blogspot.com.br/

    ResponderExcluir
  3. Minha linda que blog maravilhosooooo, conteúdo incrível. Você escreve muito bem...parabéns.
    www.midivieira.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada Midi =) Fico muito feliz com tantos elogios <3 Faço tudo com muito amor pra vcs \0/ Bjão linda :*

      Excluir
  4. Amoo poste de tutoriais, foi assim que aprendi fazer layout!
    Lindo blogg!

    ResponderExcluir
  5. Ótimas dicas! É sempre bom ter conteúdo sobre configurações de blog. Ajuda muito!

    Beijos ♥

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado Débora <3 Bjão linda :*

      Excluir
  6. Alem de ter amado seu post, adorei seu layout. <3

    ResponderExcluir
  7. Obrigada pelas super dicas!
    Ameiii seu blog! Parabéns!
    um beijo!
    Lú Ferraz
    www.euficolinda.com.br

    ResponderExcluir
    Respostas
    1. Obrigada Lu <3 Visitei seu blog e amei seu trabalho! Um supre bjo linda :*

      Excluir