08/02/2012

Personalize a data da postagem com efeito hover!

Tumblr_lytlypcnsg1qim3cro1_500_large

Oi bolinhos de chocolate ^^! Hoje eu trouxe um tutorial sobre como personalizar a data da postagem, saindo da área da postagem! O efeito fica muito divo... Pra quem não entendeu fica assim:



Muito lindo, né? É muito rápido e fácil... 

Primeiro, você tem que mudar o formato de data, então vá em Configurações>>Formatação>>Formato de data, e clique na opção 08/02/12 (a data estará no dia em que você está). Salve

[...]


Agora vá em Design>>Editar HTML>> aperte CTRL+F, e procure por:

.main-inner h2.date-header {

  font: $(date.font);

  color: $(date.text.color);
}


Vai estar assim:
Clique para vizualizar
Então substitua todo o código acima por um destes:

-Se a área dos posts do seu blog é na direita (igual ao B&B) troque por este:

.main-inner h2.date-header {

font: georgia; 

color: #333; 
margin-right: -100px; 
background: #FFB6C1;
float: right; 
font-size: 11px; 
padding: 4px; 
}
.main-inner h2.date-header:hover {
background: #DB7093;
}



-Se a área dos posts do seu blog é na esquerda troque por este:



.main-inner h2.date-header {

font: georgia; 

color: #333; 
margin-left: -100px; 

background: #FFB6C1;

float: left

font-size: 11px; 

padding: 4px; 

}
.main-inner h2.date-header:hover {
background: #DB7093;
}

Ficará assim:
Clique para visualizar


Personalizando o código:

font: georgia; É a fonte da data. (aqui no B&B, eu deixei assim)

color: #333; 
 É a cor da data.

margin-right: -100px; ou 
margin-left: -100px; 
  Este código é a margem externa da data, ou seja, ela iria dar o espaçamento necessário entre o quadro da postagem e o quadro da data. Quanto menor o número mais perto fica, quanto maior mais longe.
background: #FFB6C1; Cor do fundo do quadro.

float: right;  ou float: left; Alinhamento do quadro da data.
font-size: 11px;  Tamanho da fonte da data.
padding: 4px; Espaçamento de dentro da caixinha.
background: #DB7093; Cor do fundo do quadro em hover (quando passa o mouse em cima.)

Visualize, se tiver tudo certinho, salve!

*Dou todos os créditos do tuto para o UPS

E  aí, gostaram do tuto? Vou postar mais tutoriais de agora em diante! Se quiser um em especial, me fale por comentário!xoxo

12 comentários :

  1. Você me salvou!
    Eu estava louca para saber como personalizava a data desse jeito.

    Beijos, Mallü.
    http://thelovekingdom

    ResponderExcluir
  2. Resultado do concurso já foi postado, Beijos :*
    http://strikeapose-d.blogspot.com/2012/02/resultado-do-mini-concurso.html

    ResponderExcluir
  3. Amo esse efeito ;D
    Beijos ;*
    just-a-girl21.blogspot.com

    ResponderExcluir
  4. Amei o tutorial,o resultado é muito lindo!!*-*
    http://www.facebook.com/blogmudancas http://meumundomudando.blogspot.com/

    ResponderExcluir
  5. Fica muito moderno e dá aquele tcham. Mas a preguiça alcança e ultrapassa a vontade de por esse tutorial no meu html. Rsrs.
    Se um dia eu precisar, Já sei onde procurar *-*
    http://pinkpimenta.blogspot.com

    ResponderExcluir
  6. Oi mwamor , to começando com o Blog agoora , to seguindo aqui e se desse queria muito que você seguisse láa plix , plix , pliix *ç* e se puder comentar , eu agradeço mt mt mt ‘-‘ Perfeito teeu blog ;* Um Beeijo . http://secretsgirll.blogspot.com/

    ResponderExcluir
  7. Adorei flor o tutorial!

    http://anavidadeestilista.blogspot.com/

    Visite meu cantinho e se gostar me siga, sigo todos que me segue!

    Tô te esperando lá!

    ResponderExcluir
  8. Que bom que gostaram do efeito! Logo logo posto mais tutos... Beijos

    ResponderExcluir
  9. Não curte College 11 não? E já ouviu as músicas, cada uma perfeita! Se não ouviu, deve ouvir!
    Como eu disse antes, amei o tutorial. Sempre quiz saber... Quase nenhum blog faz esse tutorial! xD
    http://pinkpimenta.blogspot.com/

    ResponderExcluir
  10. Adorei o tutorial e acabei de fazer no meu blog,deu certo.
    Adorei o seu blog e já estou seguindo. Voltarei aqui mais vezes.
    http://perfeitamenteteen.blogspot.com

    ResponderExcluir