Personalizar a data

Hoje vim ensinar como personalizar a data igual a do blog. Antes eu usava ela sem hover , isto é, quando alguém passava o mouse em cima da data não acontecia nenhuma animação, e hoje personalizei ela e coloquei hover e gostei muito do resultado, então deixei ela com o hover; A data normal fica na cor rosa e agora quando o mouse passa em cima ela fica lilás (isso é o efeito hover);

Vamos aprender...

Tutorial

1♥ vá nas configurações → idioma e formatação → e deixe sua data da seguinte maneira:

2♥ depois vá no modelo do blogger → editar html → dê F5 ou ctrl+f e pesquise por: .main-inner h2.date-header { e abaixo cole:

 font: Verdana; /* fonte da data */
    color: #fff; /* cor da fonte da data */
    margin-left: -100px;
    background: #f1b1c4; /* cor de fundo da data */
    float: left; /* onde a data ficará - left esquerda - right direita */
    font-size: 13px; /* tamanho da fonte da data */
text-shadow: #b7a8ca 1px -1px 1px;
    padding-bottom: 10px;
padding-top: 10px;
padding-left: 3px;
padding-right: 3px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
box-shadow: inset 1px 1px 1px #ffffff, 0 0 5px #ffffff;
    }
    .main-inner h2.date-header:hover {
font: Verdana; /* fonte da data com hover */
    color: #fff; /* cor da fonte da data com hover */
    margin-left: -100px;
    background: #D4B1F1; /* cor de fundo da data com hover */
    float: left;
    font-size: 13px; /* tamanho da fonte da data com hover */
text-shadow: #b7a8ca 1px -1px 1px;
    padding-bottom: 10px;
padding-top: 10px;
padding-left: 3px;
padding-right: 3px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
box-shadow: inset 1px 1px 1px #ffffff, 0 0 5px #ffffff;
    background: #aebadf;
    }

Ps: Personalize como você quer, lembrando que o código esta personalizado com as cores do minha data que é essa aqui;

Depois só salvar ♥ Espero ter ajudado, bjs *-*

Deixe o seu comentário aqui em baixo, vou adorar respondê-lo ♥