Data da postagem com efeito Hover?

08:00

293384_464413320265762_1387700891_n_large

Minha querida leitora Ester Santana do blog Primeiros Erros, me pediu para postar um tutorial explicando como deixar a data do blog do mesmo jeito da data no Acesso Permitido. Então, vou ensina-los como deixar a data da postagem com efeito Hover (Troca de cores).




A primeira modificação que faremos será mudar o modelo da sua data.. Vá em Configurações>Idioma e Formatação>Formato da Data> E escolha o penúltimo modelo (03 setembro 2012).

Feito isto, vamos em Modelo>Editar HTML> Aperte Ctrl+F e procure por.: 
.main-inner h2.date-header {

  font: $(date.font);

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


Então substitua todo este código por um destes códigos abaixo.:
*Se a área da postagem 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 a área da postagem do seu blog é na 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;
}

Personalizando o código de acordo com seu blog.:

margin-right: -100px; ou 
margin-left: -100px; 
  Este código é a margem externa da data, ou seja, ela irá 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.
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.)

Quadro de personalização, fonte.: Bubblegum Burst.

AndyReis...

compartilhe:

Tags:

Você também pode gostar:

Comentários
18 Comentários

18 mil comentários

  1. Maria Emília F.3 de setembro de 2012 08:06

    Adorei o tutu !!
    Já conhecia o resultado é lindo né??
    Beijos Emilia.

    coffemilia.blogspot.com

    ResponderExcluir
  2. The baby3 de setembro de 2012 10:13

    esse tutorial é um show adorei!!
    kisses~~

    #>>> http://www.the--baby.blogspot.com.br/

    ResponderExcluir
  3. Alice Aguiar3 de setembro de 2012 11:19

    olha q legal, nao conhecia o tutorial ^^

    ResponderExcluir
  4. Ester Santana3 de setembro de 2012 11:27

    Muito obrigada por colocar o tutorial! vou usar com certeza! Beijos

    http://blogprimeiroserros.blogspot.com.br/

    ResponderExcluir
  5. Cah!3 de setembro de 2012 12:35

    Legal o tutorial =)

    Magia Teen

    ResponderExcluir
  6. Leh (:3 de setembro de 2012 14:19

    Anww vou ver se eu faço!
    Adorei *-*
    Tem post novo no Garota Amargurada! (:
    Confere?
    Beijinhos :*
    Garota Amargurada u.ú

    ResponderExcluir
  7. Daiane3 de setembro de 2012 16:20

    eu acho esse efeito maravilhoso em fotos
    http://floresdemarshmallow.tk

    ResponderExcluir
  8. Anônimo3 de setembro de 2012 16:31

    QUE FOTO MAIS FOFAAAAAAA!*-*
    Vou postar no meu tumblr ok?
    Adoro esse efeito na data do post!
    Luz,Câmera,Read...
    Beijos

    ResponderExcluir
  9. Ágata Bresil3 de setembro de 2012 16:48

    Muito legal essa dica. :) O dia que eu for refazer o layout, vou dar uma passada aqui para esse tipo de tuto.

    Abraço. Tudo Tem Refrão

    ResponderExcluir
  10. Gabi Oliveira3 de setembro de 2012 17:00

    adorei o tutorial :)
    teenagebass.blogspot.com
    talvez eu faça no meu próximo lay

    ResponderExcluir
  11. Suzanna Rani3 de setembro de 2012 19:59

    Poxa, legal! Bem simples e deixa o blog lindo!
    Beijos!

    ResponderExcluir
  12. Esther Aguiar3 de setembro de 2012 21:17

    ótimo tutorial, passa lá no blog, o acesso permitido está em destaque!
    Cantinho da Menina Cristã (clique no perfil e visite)

    ResponderExcluir
  13. Anônimo3 de setembro de 2012 22:16

    Belo tutorial, amei eu cheguei a um mes a blogfera vc pode me ajudar? gostaria de saber como se bota um video do youtube no blog, eu ja tentei só que quando agente v a imagm so aparec um quadrado preto, nao aparece a imagem e nem a setinha do player!
    rockdeverdadeeatitude.blogspot.com/ bjs

    ResponderExcluir
  14. Vida de Garota3 de setembro de 2012 23:27

    Ótimo tutorial, já salvei o link aqui para usar no meu proximo layout. :)

    Beijos @Raah_Castroo
    www.vidaadegarotaa-vdg . blogspot.com

    **Junte o ponto final, forma o link e entre no blog, ou se preferir, clique no nome "Vida de Garota" e visite o blog. :)

    ResponderExcluir
  15. Ozzi Thawanny4 de setembro de 2012 00:48

    Adorei o tutorial xD
    Fica bem bonitinho com esse efeito!!
    Beijinhos :*

    ResponderExcluir
  16. Amanda Carvalho4 de setembro de 2012 16:42

    ÔH, que lindo, eu vi hoje que tinha esse efeito na data do blog kkkkk'... Vou fazer pro meu próximo lay ^^

    ResponderExcluir
  17. Andresa Castro4 de setembro de 2012 22:58

    Eu tenho no Li e amo esse efeito!
    Acho muito legal!! *-*

    Beijos!!
    Loucos Informados

    ResponderExcluir
  18. Anônimo5 de setembro de 2012 12:28

    Adorei o tutorial, ótimo. Eu adorei esse efeito!
    Bia
    morangoredondo.com.br

    ResponderExcluir