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?

8 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
    Respostas
    1. Oie, qual código não conseguiu encontrar? Tem certeza que não ficou algum espaço atras ou antes da tag pesquisada?

      Excluir
  4. Estou usando esse tuto e vários outros, na maior parte das vezes só os seus códigos funcionam, moça <3
    Vc é mara, amo seu blog!

    ResponderExcluir
    Respostas
    1. Olá Sofia, eu fico realmente grata por sua visita e comentario. Fico contente que meu blog tenha lhe sido útil e espero que seja mais vezes =3

      Excluir

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