Tutorial: Data Hover

Oi amores!

Bom, fiquei muito feliz com os comentários do post anterior, todos adoraram o novo layout. AMEI ISSO HEARTS! Muito obrigada gente, sério. Bom, agora vou ensinar a vocês a fazerem esse tipo de cabeçalho de data com estilo hover.

Clique em continue lendo . 

Vamos lá. Vá Design > Editar HTML .

Clique em F3 e procure por:

.main-inner h2.date-header {

Deve estar mais ou menos assim, se você ainda não tiver personalizado.

Apague essa parte e cole esse código personalizando o necessário.

.main-inner h2.date-header {
font: verdana; /* nome da fonte */
color: #000; /* cor da fonte */
border-bottom: 1px dashed #000; /* borda */
text-shadow: 0px 0px 2px #000; /* sombra do texto */
background-color: #CFCFCF; /* background normal */
-webkit-transition:0.4s;
display:inline;
float:right;
}
.main-inner h2.date-header:hover {
border-bottom: 1px dashed #000; /* cor da borda hover */
text-shadow: 0px 0px 2px #000; /* cor da sombra hover */
background-color: #9C9C9C; /* cor do background hover */
-webkit-transition:0.4s;
display:inline;
float:right;
}

Pronto! Espero que tenham gostado e por favor, se puderem, vão no meu tumblr de HTML e falem o que acharam do theme? Obrigada amores. Beijos!

Música do dia: Make It Shine