18/09/2012

Tutorial: Data da postagem com efeito hover

||

Meus brigadeiros! Continuando a maratona de tutorias, desta vez e como personalizar a data das postagens  saindo da área das postagens, com efeito hover. E muitooo lindo e simples!!! Abaixo tem uma imagem de como é o efeito que ver?


O primeiro e como ficara o segundo e ao passar o mouse o efeito hover.

Bom para conseguir esse modelo em seu blog, procure por esse trechinho em seu HTML

.main-inner h2.date-header {

  font: $(date.font);

  color: $(date.text.color);
}
Agora apague toda essa parte e subsitiua pelo codigo abaixo:

Se a área dos posts do seu blog é na direita
.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 for a esquerda  
.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;
}

E ai gostaram?

5 comentários:

  1. muito fofa mesmo to usando ooks ? http://cupcakescoloridoscc.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Esta bem, obrigada por usar.

      Excluir
  2. amei, vou usar no meu lay novo!!!
    http://distractionsofaagirl-oficial.blogspot.com/

    ResponderExcluir
    Respostas
    1. Usa sim, ficara lindo! Obrigada por comentar. ^^

      Excluir
  3. olá então tentei fazer isso e não encontrei aquele trechinho do html

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram