07 novembro 2016

COMO COLOCAR A DATA ACIMA DO TÍTULO DO POST

|
Data acima do título do post

Vem aprender adicionar a data acima do título do post de um modo simples, fácil e rápido!

Se você acompanha o Manual da Blogueira já deve saber que rolou uma série de personalização de layout (Layout dos sonhos), onde foi disponibilizado uma base para trabalharmos, e mais 21 aulas, com tutoriais desde o cabeçalho até o rodapé. O template base possui o código de personalização da data, mas decidi explicar melhor como funciona cada elemento para tirar qualquer dúvida que você possa ter sobre o assunto. 

+ Confira a última aula da série Layout dos sonhos

A maioria dos leitores vão querer saber se aquele determinado post é atual ou não, por esse e outros motivos esse elemento é muito importante no corpo da sua postagem. O modelo que trago hoje é retangular. 


A data ficará assim: 

 DATA ACIMA DO TÍTULO DO POST

Mas antes de começar, você precisa ajusta-la dessa forma:

 DATA ACIMA DO TÍTULO DO POST

Feito isso, é chegada a hora da personalização. No painel do blog, procure por: Modelo -Editar HTML, clique dentro do corpo do layout, aperte Ctrl+f e em seguida cole o trecho .main-inner h2.date-header { e dê Enter.  Vai aparecer o código abaixo:


.main-inner h2.date-header {
font: $(date.font);
color: $(date.text.color);
}


Depois substitua o trecho que você acabou de encontrar por:

.main-inner h2.date-header {
float: left;
overflow:hidden;
font-size: 20px;/** Tamanho da fonte **/
color: #FFFFFF; /** Cor da fonte **/
text-align:center; /** Centraliza o texto **/
margin-left: 280px; /** Arrasta a data para direita **/
font-family: 'cuprum'; /** Nome da fonte**/
margin-top: -30px;
text-transform: uppercase;
width: 150px; /** Largura da cor de fundo**/
background: #FF70B1; /** Cor de fundo da data **/}



Visualize, se estiver tudo ok, salve!

É aconselhável que se faça esse e qualquer outro tipo de tutorial em templates que não sofreram muitas alterações, pra que a personalização funcione. Caso o seu tenha recebido muitos códigos eles podem causar conflitos que impeçam o funcionamento desse tutorial.

Quer trocar a cor de fundo?

Basta acessar o site html color codes e escolher a cor desejada.

Deseja substituir a cor por imagem?

Basta adicionar url("LINK-DA-IMAGEM");  na frente de background: 

Lembre-se que a largura (width) deve ter o mesmo tamanho da imagem, e adicione a altura (height) que também deve ser a mesma da imagem.

Uma observação: Todas as mudanças que podem ser feitas foram sinalizadas no próprio código. 

E se você gostou já sabe o que fazer: Compartilhe esse artigo com os amigos, siga o Manual em "Faça parte" que fica na lateral do blog e curta nossa página no facebook para nunca mais perder nossas novidades. Um enorme beijo e até a próxima.

9 comentários:

  1. Amando as dicas!
    preciso de ajuda pra colocar comentário no blog com a opção de blogger e g+, como faço?
    Uma ótima semana pra todos nós!
    Beijos 😘

    Blog A primeira Casa 🎄 Minhas Inspirações

    ResponderExcluir
    Respostas
    1. Em breve vou publicar um tutorial sobre como colocar comentário no blog com a opção G+ e Blogger. Pedido anotado!

      Bjs :*

      Excluir
  2. Muito lindo! Já procurei esse tutorial em diversos sites e nunca encontrei, parece até que você lê minha mente, rsrs. Continue com o seu ótimo trabalho :)
    Beijos!

    ResponderExcluir
    Respostas
    1. Ai que bom que você gostou Carol! Essa semana (do dia 7 ao 13 de novembro) terá post todos os dias, e todos serão tutoriais de personalização de layout. Fique atenta pra não perder os próximos \0/ Bjão :*

      Excluir
  3. se como faço para descer mais a data?para ficar entre o post e a página?

    ResponderExcluir
    Respostas
    1. Olá Wandesson!

      Troque o float: left; por float: none; e o
      margin-top: -30px; por margin-top: 30px; e vai aumentando a numeração até a data ficar aonde você deseja. Espero ter ajudado! Bjs e Feliz Natal <3

      Excluir
  4. como eu falo pra deixar as letras da fonte minuscula ?

    ResponderExcluir
    Respostas
    1. Em text-transform troque o uppercase por lowercase =D

      Excluir