Personalize a Data com Efeito Hover!

Oooi gente, hoje vou ensinar como deixar a data com efeito hove, igual está aqui no layout do blog, e vejam fica lindo, e é muito fácil, vamos começar!

Primeiro vá em Configurações> Formatação, veja:

Em seguida vá em 'Formato da data' e deixe assim, veja:

Salve e pronto. Agora vá em, Design> Editar HTML. De um 'CTRL F' e procure por:

.main-inner h2.date-header {

  font: $(date.font);

  color: $(date.text.color);

}

'Substitua' por esse código:

.main-inner h2.date-header {
float: left; /** data no lado esquerdo, pode mudar para right **/
width:55px;/** largura **/
height:55px;/** altura **/
overflow:hidden;
font-size:15px;/** tamanho da fonte **/
color: #fff !important;/** cor da fonte **/
text-align:center;/** alinha o texto **/
margin-bottom: -65px; /** desce **/
margin-left: -80px; /** margem pra esquerda **/
padding: 8px 2px 0px 2px; /** espaço interno: topo, direito, embaixo, esquerdo **/
-webkit-border-radius: 5em; -moz-border-radius: 5em; /** borda redonda **/
background: #FF6C91; /** cor do fundo **/
}
.main-inner h2.date-header:hover {
background: #E9B4BB; /** cor do fundo hover **/
}

Observações: Mude as cores [ Tabela AQUI ]

 Se a data estiver saindo pra fora do circulo diminua o tamanho da fonte.

Booom Gente, foi isso espero que tenham gostado, qualquer duvida só deixar no 2º gadget do blog vou responder todos, Até a próxima, beijos!

OBS: Não Reblogem!