Estilo de data para blog com efeito hover [003]

Meus coelhos! Continuando a maratona de tutorias, desta vez e como personalizar a data das postagens  saindo da área das postagens, com efeito hover. E muitooo lindo e simples!!! Abaixo tem uma imagem de como é o efeito que ver?

O primeiro e como ficara o segundo e ao passar o mouse o efeito hover.

1. Bom para conseguir esse modelo em seu blog, procure por esse trechinho em seu HTML, de preferencia pelo trecho marcado em vermelho:

.main-inner h2.date-header {
font: $(date.font);
color: $(date.text.color);
}

2. Agora apague toda essa parte e substitua pelo código abaixo: 

Se a área dos posts do seu blog é na direita: 

Códigos

.main-inner h2.date-header {
font: georgia;
color: #333;
margin-right: -100px;
background: #FFB6C1;
float: right;
font-size: 11px;
padding: 4px;
}
.main-inner h2.date-header:hover {
background: #DB7093;
}

Se for a esquerda:

Códigos

.main-inner h2.date-header {
font: georgia;
color: #333;
margin-left: -100px;
background: #FFB6C1;
float: left;
font-size: 11px;
padding: 4px;
}
.main-inner h2.date-header:hover {
background: #DB7093;
}

E ai gostaram?