Data Personalizada com Efeito Hover

A data do seu blog tá feiinha? Vamos personalizar ela?  É fácil e rápido.

 Faça sempre backup do seu template antes de modificá-lo , ou tenha um                               blog de testes, caso algo dê algo errado.

Vá em Configurações => Idioma e Formatação => Formato da Data

Clic  em salvar Configurações

Agora vá em Modelo/Editar HTML

Na página que abriu aperte Ctrl+F, 

Procure por:

.main-inner h2.date-header {

  font: $(date.font);

  color: $(date.text.color);

}

Apague todo código acima e substitua por :

.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 **/}

*** Se voce optar por colocar o "float" à direita, right, mude  também : "margin-left" por  "margin-right"

Para mudar a cor da fonte  e background ver tabela de cores AQUI

Para modificar a fonte  adicione: font-family: nomedafonte; antes de color: #fff 

Mude valores de padding, margin, font-size, widht, height etc, e deixe do jeito que você quiser.

Testado em Modelo Travel

Créditos: Go Imagines