Efeito Extreme na data do blog

Boa noite! Eu decidi que não vou fechar o blog, LOL mas estou pensando em trocar o nome, esse nome é muito grande, mais não vai ser por agora por causa do domínio não tem como trocar só se comprar outro e eu não tenho como comprar um por agora, então vamos aguardar... Me pediram na ask pra ensinar a fazer esse efeito da data, quando passa o mouse ela se move para fora, mostrando a data que o post foi púbicado. Quer aprender clica em Read More...

Não é um tutorial difícil, mas requer um pouco de atenção. Esse tutorial é de minha autoria, então se usarem ou repassarem por favor creditem ok?!

Primeiro, vá na configuração do seu blog em idioma e formatação e configure a data da seguinte maneira. 

dia/mês/ano

 Agora vá em Modelo> Editar HTML e procure por

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

Apague todo o código, cole o seguinte código.

.main-inner h2.date-header {
width:96px;
height:18px;
margin-left:587px;
float: left;
text-align: center;
font-size: 11px;
padding: 10px;
background: url(LINK_DA_PRIMEIRA_FAIXINHA) no-repeat center;
color: #FFFFFF;
text-shadow:0 1px #ccc;
margin-top: 20px;
-webkit-transition-duration: .50s;
}
.main-inner h2.date-header:hover {
color: #ffffff;
background: url(LINK_DA_FAIXINHA_QUANDO_PASSA_O_MOUSE) no-repeat center;
-webkit-transition-duration: .50s;
margin-left:640px;
}

 Entendendo o código

margin-left: 96px; > Significa o tamanho da faixinha sem passar o mouse.
margin-left:96px; > Significa o tanto que a faixinha vai sair quando passa o mouse.
font-size: 11px; > É o tamanho da fonte/letra da data que fica dentro da faixinha.

Bom acho que deu pra entender qualquer dúvida comente.

_Guuh