18/09/2012

Estilo de data para blog com efeito hover [003]


Meus coelhos! 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.

1. Bom para conseguir esse modelo em seu blog, procure por esse trechinho em seu HTML, de preferencia pelo trecho marcado em vermelho:

.main-inner h2.date-header {
font: $(date.font);
color: $(date.text.color);
}


2. Agora apague toda essa parte e substitua pelo código abaixo: 

Se a área dos posts do seu blog é na direita: 
Códigos
.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:
Códigos
.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
  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

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345