Tutorial: Personalizar a data do post

Oi gente, eu de novo e respondendo mais um pedido no ask. 

Personalização de data. Eu achei esse tutorial no Diamantes de uma garota

Para quem quer personalizar a data clique em leia mais. 

Bom antes de tudo você vai abrir seu blog e vai em configurações → Idioma e formatação. 

E arruma a data assim. 

Depois de arrumar assim você vai salvar configurações e pronto. 

Agora vamos personalizar a data. 

Vai em Modelo  → Editar HTML → Ctrl+F e procura pela tag:

.main-inner h2.date-header {

Quando você achar, vai ter algo parecido com isso: 

.main-inner h2.date-header {

  font: $(date.font);

  color: $(date.text.color);

}

Apague todo esse código e substitua pelo código da data que você mais gostar, eu trouxe dois estilos hoje.


1 - Data simples (só muda a cor do fundo quando passa o mouse)

.main-inner h2.date-header {
/* Data personalizada by DDUG*/
font: arial; /* Fonte da Data */
color: #FFFAFA; /* Cor da Fonte */
margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */
background: #00BFFF; /* Fundo da data */
float: left; /* Se você mudou acima para right , mude aqui também */
font-size: 11px; /* Tamanho da Fonte */
padding: 4px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.main-inner h2.date-header:hover {
background: #C1CDCD; /* Fundo quando o passa o mouse */
/* Fim da data personalizada by DDUG, não retire créditos */
}

 


2 - Data "folhinha"



.main-inner h2.date-header {
/* Data personalizada by DDUG */
font: arial; /* Fonte da Data */
color: #000000; /* Cor da Fonte */
margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */
background: #FFFFFF; /* Fundo da data */
float: left; /* Se você mudou acima para right , mude aqui também */
font-size: 11px; /* Tamanho da Fonte */
padding: 4px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}
.main-inner h2.date-header:hover {
background: #FFC0CB; /* Fundo quando o passa o mouse */
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
/* Fim da data personalizada by DDUG, não retire créditos */
}

3 - Data redondinha



.main-inner h2.date-header {
/* Data personalizada by DDUG */
font: arial; /* Fonte da Data */
color: #00BFFF; /* Cor da Fonte */
margin-left: -90px; /* Alinhamento da Data , pode trocar para right se quiser na direita */
background: #FFFFFF; /* Fundo da data */
float: left; /* Se você mudou acima para right , mude aqui também */
font-size: 11px; /* Tamanho da Fonte */
padding: 4px;
-webkit-border-top-left-radius: 100px;
-webkit-border-bottom-left-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-bottomleft: 100px;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}
.main-inner h2.date-header:hover {
background: #000000; /* Fundo quando o passa o mouse */
-webkit-border-top-right-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-moz-border-radius-topright: 100px;
-moz-border-radius-bottomright: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
/* Fim da data personalizada by DDUG não retire créditos */
}



Espero que gostem e ajude vocês... Usem essa tabela (www) Para ajudar na personalização. Qualquer duvida só perguntar nos comentários.