Data Personalizada - Blog

Yooooo! Como estão vocês?? Hoje trago um Tutorial rápido e bem prático, para não deixar o blog sem postagem.
O Tutu de hoje é como personalizar a Data no estilo Hover, Como na imagem abaixo:

Se quiser saber como fazer, Continue Lendo...

Vá em Modelo depois Editar HTML , em seguida procure pela tag: 

   /* Headings   

Abaixo dessa tag você irá encontrar: 

.main-inner h2.date-header {

  font: $(date.font);

  color: $(date.text.color);

}

Após achar o código,apague e substitua-o por esse outro: 

/*************CUPKAWAII ♥ DATAPERSONALIZADA ******************/

.main-inner h2.date-header {

float: left; /** data no lado esquerdo, pode mudar para right **/

width:70px;/** largura **/

height:20px;/** altura **/

overflow:hidden;

font-size:15px;/** tamanho da fonte **/

color: #fff !important;/** cor da fonte **/

text-align:center;/** alinha o texto **/

margin-bottom: -64px; /** desce **/

margin-left: -75px; /** margem pra esquerda **/

padding: 5px 5px 5px 2px; /** espaço interno: topo, direito, embaixo, esquerdo **/

-webkit-border-radius: 0em; -moz-border-radius: 5em; /** borda redonda **/

background:#DB7093; /** cor do fundo **/

}

.main-inner h2.date-header:hover {

background: #CAE1FF; /** cor do fundo hover **/

}

Visualize e veja se está tudo certo! 

Para deixar a data igual ao da Imagem acima, faça as seguintes alterações: 

Vá em Confirações depois em Idioma e Formatação e seleciona Formato da data

Depois altere para esse formato --> 

Salve e veja se está tudo ao seu gosto! 

Espero que tenham gostado do post,não se esqueçam de comentar ♥ e participar do blog ♥, sua presença aqui me motiva ainda mais a continuar postando! Beijoooos!