43. Tutorial - Modelo de data que se Move

Oi gente!

Ontem eu fiz um morango com leite condensado que ficou um verdadeiro poço da diabete.Nunca entendi porque eu como tanto doce, tenho tendência a ser diabética, e nada vezes nada de diabete aparece. Bem, melhor pra mim.

 Lembram que o último tutorial foi antes da troca de template? Agora vamos ter o primeiro tuto desse template.

O tuto de hoje vai ensinar a fazer um modelo de data que se move, igual o daqui. A ideia original de ter data que se move foi da Vicky, do Garotas Cupcakes, mas o tutorial é meu, então créditos á ela e a mim se usarem. Pra ão ficar tão igual a minha ou tão igual a da Vicky, eu mudei algumas coisas, tipo as cores e o border-radius. Vamos ver????

1. Vá até o painel HTML do seu blog e procure por .main-inner h2.date-header {. Quando achar, apague toda a personalização até o fechamento da chave e coloque isso no lugar:

.main-inner h2.date-header {
padding: 3px 8px;  /* Não é necessário alterar */
margin: 2px; /* Não altere */
background: #b18f61; /* Cor do fundo antes do hover */
display: inline-block; /* Não altere */
font-size: 8px; /* Tamanho da fonte */
border-radius: 3px; /* Arredondamento da borda */
box-shadow: inset 0 0 13px #a7885f; /* Sombreamento */
text-transform: uppercase; /* Deixa em maiúscula as letras */
font-family: PF Arma Five; /* Fonte */
color: #5a274e; /* Cor da fonte antes do hover */
margin-left: -20px; /* Posiciona á esquerda ou á direita, altere de acordo com sua área de postagem */
margin-top: 7px; /* Coloca mais pra cima ou mais pra baixo */
-webkit-transition-duration: .50s; /* Transição, não altere */
}
.main-inner h2.date-header:hover {
background: #5a274e; /* Cor do fundo no hover */
color: #a7885f; /* Cor da fonte no hover */
box-shadow: inset 0 0 13px #3f2748; /* Sombreamento */
text-transform: uppercase; /* Deixa em maiúscula as letras */
margin-left: 500px; /* Isso é o que faz a data se mexer. Use nos pixels mais ou menos a largura da sua área de postagem */
-webkit-transition-duration: .50s; /* Transição, não altere */
} 

2. Salve e veja se está tudo certo. Está tudo explicadinho no próprio código, caso queira mudar algo.

Bjos!