Tutorial : Data personalizada com efeito Hover.

Yo Minna-sama !!!

Primeiramente quero agradecer a todos que acompanham o Blog , estou notando que agora estou ganhando um pouco mais de visitas do que antes , tudo graças a vocês que acabam me motivando a manter o Blog . Agora sim , vocês sabiam que hoje temos uma aniversariante ? Pista : Ela é afiliada do Blog ... descobriram ? É a Miyuki-chan , então vamos todos invadir o Blog (www) dela e mandar feliz aniversário , ok ? Ontem o Lipeh-kun me pediu o Tutorial da Data personalizada com efeito Hover . Por tanto hoje irei posta-lo , créditos no fim dos post ...

Sua data ficará assim :

Primeiro, vá até Configurações >> Formatação >> Formato da data , e a deixa igual a da imagem :

Dia / Mês / Ano .

Salve , vá no seu HTML , e procure por : 

.main-inner h2.date-header {

  font: $(date.font);

  color: $(date.text.color);

}

 Após encontra-lo , substitua-o por este 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:

- Se colocar right em float, mude margin-left por margin-right.
- Para mudar a cor do fundo é só trocar o código da cor (tabela aqui).
- Se a data estiver saindo pra fora do circulo diminua o tamanho da fonte.
- A data ficará com a mesma fonte do titulo do post. Se quiser outra fonte adicione:
font-family: nomedafonte; antes de color: #fff !important;/
- Dependendo da sua fonte e tamanho pode ficar meio desconfigurado, aí é só você fazer os ajustes necessários (mudar valores de padding, margin, font-size, widht, height etc) e deixar do jeito que você quiser.

Créditos : (www) .