Data escondida
Autor: Marina Menezes | Publicado: 2013-12-02T19:58:00-02:00




Fiz uma prova de vestibular ontem e estou super ansiosa, nem dá para acreditar que estou realmente fazendo essas coisas! Também é muito estranho pensar que ano que vem não tem mais aulas, pelo menos do ensino médio, vou sentir falta de algumas coisas, mas no fim estou feliz de ter acabado rs'&nbsp;



Nem tive tempo de falar sobre os novos afiliados e sobre o que decidi, bom, na verdade eu já tinha dito que ia continuar com o blog até o Natal, mas acho que não fui muito clara quanto a isso. Vou continuar sim até o Natal, e se ainda tiver ideias pra postar, continuo um pouco mais. Sei que um dia vou ter que parar de blogar, manter 4 blogs me tomam tempo demais, e tenho que começar a me dedicar a outras coisas, como estudar por exemplo. Tenho muito dificuldade em matérias como física e preciso aprender essa merda, sempre tiro notas extremamente baixas em física nos vestibulares, mesmo tirando notas altas nessa matéria na escola.&nbsp;



Falei demais né? O tutorial de hoje é bem simples, foi a Kimberly quem me pediu e eu estou ensinando. A Kimberly queria o tutorial da data daqui do blog, que só aparece quando passa o mouse. Quem não viu, ela está acima do nome da postagem, só passar o mouse que vai aparecer. Essa data fica ótima em templates onde não tem espaço para elas, mas que seja necessário saber o dia em que foi postado. Vamos ao tuto:



1- Vá no HTML do seu blog e procure por&nbsp;.main-inner h2.date-header {&nbsp;Abaixo disso, cole:



@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}
.main-inner h2.date-header {
font-family: handy;
color: transparent;
font-size: 8px;
text-align:center;
-webkit-transition-duration: .70s;
text-transform:capitalize;
}
.main-inner h2.date-header:hover {
font-family: handy;
color: #b29dc6;
margin-bottom:10px;
font-size: 8px;
text-align:center;
-webkit-transition-duration: .70s;
text-transform:capitalize;
}


Entendendo


@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}

Esse é o @Font-face da fonte da data. Troque apenas se você for mudar a fonte. O @Font-face permite que você use fontes que não são do blogger.



&nbsp;font-family: handy;



Essa é a fonte da data.



color: transparent;



Cor da fonte. Ela deve ficar transparente, caso contrário vai aparecer em cima da postagem. Não mude.



font-size: 8px;
text-align:center;
-webkit-transition-duration: .70s;
text-transform:capitalize;



Primeira e segunda linha: Tamanho e alinhamento da fonte, respectivamente. Mude de acordo com seu gosto. Terceira e quarta linha: transição (o tempo que demora para a data aparecer. !Não mude isso!) e transformação do texto. Isso vai fazer com que todas as primeiras letras da data fiquem em maiúscula. Se não quiser, apague essa linha.



color: #b29dc6;



(No segundo parágrafo). Essa é a cor da fonte. Agora sim você pode colocar a fonte que você quiser que a data apareça.



margin-bottom:10px;



Essa é a margem entre a fonte e a postagem depois que passa o mouse. Isso é o que vai fazer a fonte "subir" quando você passar o mouse.



font-size: 8px;
text-align:center;
-webkit-transition-duration: .70s;
text-transform:capitalize;



Como no parágrafo de cima, esse é o tamanho, alinhamento, transação e transformação do texto.&nbsp;



Espero que o tutorial tenha sido útil para vocês. Quem quiser me pedir alguma coisa, é só me mandar um ask&nbsp; que assim que tiver tempo faço o tutorial. Lembrando que aqui nós temos outras duas maneiras de personalizar a data, uma que é mais "comum" e mais fácil de editar, e outra que é com faixinha.