Data personalizada com efeito hover

04/07/2012

7128717053_c8d2fbe250_z_large

Um estilo de data que muitos blogs tem aderido é essa em um círculo com efeito hover, que eu acho lindo. Hoje vou ensinar como fazê-la, antes de começar quero dar os devidos créditos ao blog Go Imagine, foi lá que eu aprendi a fazer. Ficará assim:

Imagem do blog Go Imagine

1) Vá no Painel do Blogger > Configurações > Idioma e Formatação > Formato da data e deixe assim:


2) Vá em Modelo > Editar HTML > Ctrl + F e procure por:

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

3) Substitua o código acima por esse:

.main-inner h2.date-header {
float: left; /** data no lado esquerdo, pode mudar para right **/
width:55px;/** largura **/
height:55px;/** altura **/
overflow:hidden;
font-size:15px;/** tamanho da fonte **/
color: #fff !important;/** cor da fonte **/
text-align:center;/** alinha o texto **/
margin-bottom: -65px; /** desce **/
margin-left: -80px; /** margem pra esquerda **/
padding: 8px 2px 0px 2px; /** espaço interno: topo, direito, embaixo, esquerdo **/
-webkit-border-radius: 5em; -moz-border-radius: 5em; /** borda redonda **/
background: #FF6C91; /** cor do fundo **/
}
.main-inner h2.date-header:hover {
background: #E9B4BB; /** cor do fundo hover **/
}

4) Faça as alterações necessárias e visualize, se estiver tudo certo, salve!

19 comentários:

  1. Ótimo o tutorial, vou usar no próximo design do PDM!

    Beijos,
    http://paraisodemenina.blogspot.com/

    ResponderExcluir
  2. Muito bom o seu tuto, útil mesmo

    http://portrasdorimel.blogspot.com.br

    ResponderExcluir
  3. Oi. Esse post é muito bom mesmo!
    Html sempre foi minha paixão, pena que não tive paciência para aprender tudo.
    Um super beijo.

    http://juliana-editions.blogspot.com

    ResponderExcluir
  4. Que legal flor... adorei a dica !

    Bjim =*
    http://meucontatoimediato.blogspot.com.br/

    ResponderExcluir
  5. a ultima vez que tentei mexer na data quase morri de tao coplicado hahahaha

    Beijos

    Nathália - Fashion Jacket
    http://fashionjacket.blogspot.com.br

    FacebookTwitterTumblr

    ResponderExcluir
  6. Oi linda...

    Gostei do seu blog, adorei seu post, vou estar aqui sempre, você é muito talentosa.
    Eu estava no site de uma amiga e vi o seu link lá, resolvi então fazer uma visita.
    Já estou te seguindo, por favor me segue também.

    Visite o meu Blog :

    http://aliadosdabeleza.blogspot.com.br/

    Bjs...

    ResponderExcluir
  7. Nossa a dica é bem útil , pra quem não sabe mexer em html .

    Post novo !

    http://oqueeusinto-m.blogspot.com.br/

    ResponderExcluir
  8. Muito legal ;)

    Beijos

    nandapezzi.blogspot.com

    ResponderExcluir
  9. fica lindo, adorei o tuto ^^

    ResponderExcluir
  10. Adorei o tutorial. Eu desconhecia esse tipo de data, mas adorei,vou tentar fazer no meu blog.
    http://i-teenbr.net.tc

    ResponderExcluir
  11. Olá!

    Ótimo tutorial, parabéns!
    Eu estava querendo muito fazer e aí achei seu tutorial, obrigada por compartilhar. Já adicionei no meu blog com os devidos créditos, e deu tudo certo. Bjs

    ResponderExcluir
  12. ADOREI o tuto d[a uma olhada

    http://robstenandbewardforever.blogspot.com.br/

    ResponderExcluir
  13. No meu não deu certo , você pode me ajudar ?

    ResponderExcluir
  14. no meu eu não achei o código que era pra substituir :ccc

    ResponderExcluir
  15. Achei bem bonitinho! Já estou usando! Valeu!!

    ResponderExcluir
  16. Babi, esse código não tem em todos os modelos =/

    ResponderExcluir