1.2.13

Data com Hover Deslizante

Olá divos~ tudo bom ? espero que sim.
Hoje trouxe a vocês como fazer essa data igual a do DW passe o mouse em cima para verem como ela fica em hover. Gostaram então
Ela é assim.

30/01/2013


Vá em → Design → Editar HTML → Ctrl F / F3 → procure por :
.main-inner h2.date-header { 

Achou ?
Abaixo da tag cole :

font:Arial;color: #COR DA FONTE;margin-left: -75px; /*distância entre a data e a área do post, troque os valores até dar*/background: #COR DE FUNDO;float: left;font-size: 11px; /* Tamanho da fonte */padding: 4px;-webkit-border-top-left-radius: 50px;-webkit-border-bottom-left-radius: 50px;-moz-border-radius-topleft: 50px;-moz-border-radius-bottomleft: 50px;border-top-left-radius: 50px;border-bottom-left-radius: 50px;-webkit-transition-duration: .80s;}.main-inner h2.date-header:hover {background: #COR DO FUNDO HOVER;color: #COR DA FONTE HOVER;padding-center: 10px;margin-left: -90px; /*distância da data hover, quando ela 'desliza'*/text-align: center;-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;}

Faça as alterações como quiser. !
Espero que tenham gostado.
Fiquem com Deus



Créditos : Pequena Garota

3 comentários:

  1. Ameeeei esse tuto :3
    Fica lindo !

    Kisses :*

    >> Visita : http://pensamento-jhenny.blogspot.com.br/

    ResponderExcluir
  2. HAHA' já conhecia ,fica muito lindo *-*
    Parabéns lindo blog (: estou seguindo,poderia retribuir?
    Beijos,morango mordido-Te espero lá :3

    ResponderExcluir

Que bom que vai comentar !!
Mais para fazer isso leia as regrinhas:
- Aceito criticas ,sugestões e opiniões.
- Seguindo segue de volta,se comentar sobre o post.
- Não retribuirei a visita se não comentar sobre a postagem.
- Deixe o link do blog para eu retribuir a visita.
Eu e o DW agradecemos ! Fique com Deus .