Data personalizada com efeito hover

27 de mai. de 2012

aah que cute *-* encontrei em "A series of serendipity"
Hoy amores, até que enfim tuto novo né? Ultimamente tenho visto muitos blogs com a data "dentro de um circulo" e não sei vocês, mas eu acho lindo demais *-* Então esses dias me deu a loka e fui tentar fazer, não é que deu certo e ficou muito amor? E tem mais, é com efeito hover -awwn- <3

Sua data ficará assim:


Curtiu? Então leia mais (:

Primeiro, vá até Configurações > Formatação > Formato da data, e ajuste a data como na imagem:
"Dia Mês Ano"
Salve, em seguida vá até seu HTML (Design > Editar HTML e na nova interface: Modelo > Editar HTML > Prossseguir) e procure por:
.main-inner h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}
Então substitua esse código por:

.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 **/
}

Observações:
- Se colocar right em float, mude margin-left por margin-right.
- Para mudar a cor do fundo é só trocar o código da cor (tabela aqui).
- Se a data estiver saindo pra fora do circulo diminua o tamanho da fonte.
- A data ficará com a mesma fonte do titulo do post. Se quiser outra fonte adicione:
font-family: nomedafonte; antes de color: #fff !important;/
- Dependendo da sua fonte e tamanho pode ficar meio desconfigurado, aí é só você fazer os ajustes necessários (mudar valores de padding, margin, font-size, widht, height etc) e deixar do jeito que você quiser.

Testado somente no modelo Travel! Espero que gostem, beijos :*

95 comentários:

  1. Que legal Anny, amei o tutu :DD
    www.viverserfeliz-renata.blogspot.com

    ResponderExcluir
    Respostas
    1. Desculpe Plum invadir seu espaço, mas queria falar que ajudou muito mas o meu ficou meio quadrado, quando eu terminar de fazer meu blog eu coloco o endereço dele ok?

      Excluir
    2. Gente porque não deu certo no meu ??

      Beijoos

      http://babiibronzatti.blogspot.com

      blog que usei para teste :

      gabibromzatti.blogspot.com

      Excluir
  2. Mto bom o tuto, já estou usando no meu blog!Valeu
    lovelyblogcarol.blogspot

    ResponderExcluir
  3. Noooooooooooooossa! É tão simples assim, mesmo? Valeu pela dica! O meu já coloquei riri tá todo bonito *-* eu acho lindo, achava que era um bixo de sete cabeças fazer, mas oh.. pff...
    ps.: ensina como coloca esses ‘desenhos’ que fica ao lado do nome do blog, na aba? Ou já tem?

    ResponderExcluir
  4. eu amei .

    http://www.estilodegarota-b.blogspot.com.br/

    ResponderExcluir
  5. Amei!! A gente pode editar pra uso próprio né?
    xx, Diulie
    http://compliicated-girl.blogspot.com.br/

    ResponderExcluir
  6. Adorei o tutorial, fica lindo *-*

    Beijos,
    http://placestyle.blogspot.com.br/

    ResponderExcluir
  7. Amei o tutorial, ficar super fofo *-*
    http://themudancas.tk/

    ResponderExcluir
  8. Fica lindo, lindo vou usar no próximo kk e tô surpresa por ver um post aqui 2 dias seguidos anny que bom kk! beijos Let's go

    ResponderExcluir
  9. Que legal!ótimo post!flor,gostaria de ser postadora no meu blog??small-cupcake.blogspot.com ou isah-nerd.blogspot.com(prefiro esse,mas foi criado a pouco tempo).beijos

    ResponderExcluir
  10. Fica lindo! Vou fazer no meu proximo lay!
    happy-charllote.tk

    ResponderExcluir
  11. Adorei o tuto, bem explicado!

    Segue o meu blog?
    http://chassy-bomb.blogspot.com.br/
    Obrigada!

    ResponderExcluir
  12. Oi Anny,lindo o tuto,acho que vou usar no meu próximo lay! *-*
    Posso te fazer uma pergunta?
    Vc poderia me passar o link do brushe que vc usou no cabeçalho do blog "Refugio Teen"? estou procurando ele a muuuito tempo,poderia me ajudar?
    Beijos e espero a sua resposta :)
    http://blog-as-poderosas.blogspot.com

    ResponderExcluir
  13. Que fofo isso *-* Cara seu blog é perfeito demais, de boa, seus tutos já me salvaram quando eu fui subir a sidebar e fazer taaantas outras coisas rs http://fofuranaotempreco.blogspot.com.br/

    ResponderExcluir
  14. Menina eu fiz agorinha e deu super certo ficou lindinhuuuuuuu,faz tempo que tava procurando um tuto desse pq tmb acho lindooo e estou mudando o meu lay e qnd hoje,vim aqui procurar inspirações pro meu layout novo encontrei esse tutorial maravilhoso e sabe eu estou usando o modelo WATERMARK do blog e em vez de procurar o código td eu procurei só do 'h2' adiante e fiz o restante do jeito que vc explicou e deu super certinhuuu!
    Agora faz no próximo tutorial de como deixar a imagem 100% nas postagens estão usando muito e já procurei a bessa mais não encontrei ainda...Xerooo's flor!

    ResponderExcluir
  15. Olá,ótimo post!Anny gostaria de saber se poderia e gostaria de ser postadora em meu blog:nerd-feminina.blogspot.com.br aguardo seu comentário muito obrigada!kissus...

    ResponderExcluir
  16. Na boa, amei esse post. Ajudou muito!

    ResponderExcluir
  17. Adoorei amor, editei o formato da data e estou usando lá no blog ok? Amei seu blog :]

    http://blog-letsbehappy.blogspot.com.br/

    ResponderExcluir
  18. Usei no meu blog ficou lindoo! Combinou totalmente! Amo o blog! Amo o lay! Queria um igual! ):
    Beijoss da Juju! Seguindo!
    trashmonsterss2.blogspot.com.br/

    ResponderExcluir
  19. Obrigada pela dica!!!
    mydreams-catarina.blogspot.pt

    ResponderExcluir
  20. Muito lindo. Vou usar no meu próximo lay.
    http://garota-fina.blogspot.com/

    ResponderExcluir
  21. Goostei muitoo do tutorial, mas so q eu nao consegui fazer ! vou tentar com mais calma dps : *
    www.paradateen1.blogspot.com
    beijos !

    ResponderExcluir
  22. já estou usando

    ResponderExcluir
  23. eu nao achei .main-inner h2.date-header no html do meu blog :(
    tem 3 main-inner, nenhum seguido de h2.date-header
    e tem um date-header spam

    ResponderExcluir
  24. Own flor, o meu não deu certo.. tipo, no meu tem 3 main-inner, esses três, e eu não sei pelo que substituir.. você podia me ajudar? lá tem assim:

    .date-header span {
    background-color: $(date.header.background.color);
    color: $(date.header.color);
    padding: $(date.header.padding);
    letter-spacing: $(date.header.letterspacing);
    margin: $(date.header.margin);
    }

    .main-inner {
    padding-top: $(main.padding.top);
    padding-bottom: $(main.padding.bottom);
    }

    .main-inner .column-center-inner {
    padding: 0 $(main.padding);
    }

    .main-inner .column-center-inner .section {
    margin: 0 $(main.section.margin);
    }

    ResponderExcluir
    Respostas
    1. eu tbm não achei o código oque faço?

      Excluir
    2. o meu tá igual ao seu .. e por isso eu não consegui !

      Excluir
  25. Eu não consegui aquii no meu :'(

    ResponderExcluir
  26. Consegui fazer! adorei o tutorial!
    Só tem uma coisinha! a minha ñ ficou uma bolinha!
    como faço??

    ResponderExcluir
  27. Adorei o tutorial foi muito útil, estava mesmo precisando mudar a data mais estava literalmente sem tempo .-.
    O seu ajudou bastante .. Obrigada!!

    ResponderExcluir
  28. Muuito útil! Vou usar! Faço encomendas e estava louca atrás de uma linda! Obrigada!

    www.luisa-bottoni.blogspot.com

    ResponderExcluir
  29. Adorei demaaaais o tuto, mas não consegui usar no meu blog :/
    Teu blog é muuuuuuuuuuito lindo!
    Kisses,
    http://semprecomvoce2012.blogspot.com.br/

    ResponderExcluir
  30. Respostas
    1. No modelo Viagem dá certo (Pelo menos para mim)

      Excluir
  31. Nossa que legal , adorei muito obrigada *-*

    ResponderExcluir
  32. Como sempre, ótimo tutorial. Amo esse blog!!

    ResponderExcluir
  33. Amei o tutorial! Parabéns, estarei usando no próximo layout do blog :D goods-sweets.blogspot.com Beijos

    ResponderExcluir
  34. ah que pena no meu lay não foi o tuto

    Mas mesmo assim obrigada

    Bjs

    Jade Marlla

    ResponderExcluir
  35. ebaaa consegui!
    Mas vc pode me responder como eu faço pra colocar a data fora do post da margem?


    Beijos

    Jade Marlla

    ResponderExcluir
    Respostas
    1. Isso você define neste código:

      margin-left: -80px; /** margem pra esquerda **/

      Números negativos vão para a esquerda e positivos para a direita, é só alterar os números (e ir testando) até ele sair pra fora da postagem (:

      Excluir
  36. ah, o meu não deu redondinho :(

    ResponderExcluir
    Respostas
    1. Aqui no meu computador quando eu entro no teu blog tá certinho flor, bem redondinho :) Que navegador você usa? O Internet Explorer deforma bordas arredondas (e várias outras coisas), use o Chrome, é o melhor :3

      Excluir
  37. Do not copy! Como faço pra copiar aquele código IMENSO? :(

    ResponderExcluir
    Respostas
    1. Conhece o atalho ctrl+c? Então, é só selecionar o código e usar esse atalho :3 Simples...

      Excluir
  38. Muitooooooo obrigada,procurei em vários lugares e não tinha achado um tutorial simples que nem o seu,amei seu blog sempre estarei voltando aqui.Bjs

    ResponderExcluir
  39. Oi alana, n achei o main-inner, onde ele se localiza mais ou menos?
    me ajude pelo o amor de deus!!!
    beijooos

    ResponderExcluir
    Respostas
    1. No teu blog o código é esse: .main-inner .widget h2.date-header {
      Procura e faz com esse :)

      Excluir
  40. Amei o tutorial! Testei e deu certinho! Obrigada! ^^

    http://lovelyartesanatosbymay.blogspot.com.br/

    ResponderExcluir
  41. Awwwwn amei! Lindo demais, mas meu blog não está aceitando códigos para personalizar data. Pode me ajudar? Pfvr :c desde já agradeço *-*

    http://www.isjhepasquali.blogspot.com.br

    ResponderExcluir
  42. Amei, coloquei no meu blog. Obrigada Beijos *-*

    http://patricinhaspossessivas.blogspot.com.br/

    ResponderExcluir
  43. Adorei,ficou muito lindo obrigada :)
    alemdglitter.blogspot.com.br

    ResponderExcluir
  44. Muito obrigada!!!!!!!! Ficou muito bom

    ResponderExcluir
  45. Amei o seu tutorial, funcionou!! Tentei vários já e só o seu dá certo. Tem alguns tutos que agnt nao entende mas o seu sim :3
    Estou seguindo, se puder retribuir se gostar do meu blog...
    Beijos!!!
    http://mundomaniateen.blogspot.com.br/

    ResponderExcluir
  46. Amei amei amei amei, o unico que deu certo, parabéns

    ResponderExcluir
  47. Tutorial ótimo,já estou usando :3

    MEUDOCEPANDEMONIO.BLOGSPOT.COM.BR

    ResponderExcluir
  48. Amei, mas gostaria de saber se tem como fazer quadrado (assim como neste blog, por ex. http://panquecasdebaunilha.blogspot.com.br/) ?

    Seus tutoriais tem me ajudado na personalização do meu futuro blog, obg! haha'
    bjos

    ResponderExcluir
    Respostas
    1. Sim, é só apagar essa parte: -webkit-border-radius: 5em; -moz-border-radius: 5em; /** borda redonda **/

      Fico feliz flor! :)

      Excluir
  49. Eu adorei esse tutorial e claro adaptei ele como eu queria mas o problema é, ele demora um pouquinho para aparecer sabe, ele aparece cortado e só depois que carrega totalmente o blog ele aparece e isso faz com que meu blog carregue um pouco também, como resolver isso? o que pode ser?

    ResponderExcluir
  50. Ameei >.< '

    http://chuvas-de-pesamentos.blogspot.com.br/


    ResponderExcluir
  51. http://chococandy-oficial.blogspot.com.br/

    ResponderExcluir
  52. Me ajudou muitissimo mesmo *----*
    Indicarei a todas amigas blogueiras

    ResponderExcluir
  53. puxa, vc caprichou mesmo! Funcionou certinho no meu blog. Adorei. Visite o meus blogs. Retribui? obg! Seguindo, segue-os.

    www.thehomedream.blogspot.com
    www.cursocinemas.blogspot.com

    ResponderExcluir
  54. Nossa! Amei seu blog, dá ele pra mim? Brincadeira! Me ajuda nos meus blogs? Quero TUDO como o seu! Você é muito esperta e caprichosa! Tá aqui os meus blogs: cantinho-da-poesia-da-anna.blogspot.com.br
    anna-terra-coisinhas-de-menina.blogspot.com.br
    Espero que me ajude :)

    ResponderExcluir
  55. Este tutorial foi o único que funcionou no meu blog,estou começando agora e estou adorando seu blog,obrigada.

    http://espaciofeminino.blogspot.com

    ResponderExcluir
  56. Muito maravilhoso usei no layout que eu vou doar ok ? no meu blog espero que seja sempre lino seu blog bjs

    http://layout-cupcakescoloridos.blogspot.com.br/

    http://cupcakescoloridoscc.blogspot.com.br/

    ResponderExcluir
  57. obrigada,procurei em vários lugares e não tinha achado um tutorial perfeito que nem o seu,amo seu blog perfeito ele arrasa!!seguindo retribui?
    http://meu-mundo-alternativo.blogspot.com/

    ResponderExcluir
  58. A data só aparece no primeiro post =(

    ResponderExcluir
  59. Muuuuuuuuito obrigada, Anny! Sempre uso esse tutorial.
    AAAAAAAAAAAAH, O go imagines tá perfeito! Sério :'(

    ResponderExcluir
  60. go imagine * xD me acostumei com a url hehe

    ResponderExcluir
  61. Acho lindo este modelo de data redondinho >3<
    Mas vou modifica-lo e deixa-lo totalmente quadrado *3*
    Pra combinar melhor com o novo lay do meu blog que estou fazendo.

    Beijos.
    Cantinho da Kamile (no perfil}

    ResponderExcluir
  62. Oi Anny,estou usando esse tuto...e deixei os créditos na minha página de créditos...valeu mais uma vez...

    ResponderExcluir
  63. Muito bom, outros tutoriais não funcionaram no meu blog mas esse ficou ótimo :)

    ResponderExcluir
  64. eu nao consigo achar esse cod ".main-inner h2.date-header {"

    ResponderExcluir
  65. Amei, estou usando no meu blog. Obrigada ^-^
    www.amoraoprimeirorimel.com

    ResponderExcluir
  66. Consegui mas o título da postagem não quer mudar o tamanho, você sabe o que fazer?

    bylaise.blogspot.com

    ResponderExcluir
  67. Usei no tw <3

    http://euamotutoriais.blogspot.com.br/

    ResponderExcluir
  68. O meu ficou com um fundo redondo branco atrás do fundo rosa e a data está colada uma embaixo da outra. O que faço agora?

    ResponderExcluir
  69. Muuuuuuuuuuuuuuuito Obrigado s2 s2 s2 s2 s2 s2 s2 s2

    ResponderExcluir
  70. Amei *--*
    Obrigada e Parabéns!

    ResponderExcluir
  71. Eu consegui \o/ Obrigada!!
    Vou continuar acompanhando com certeza!!

    Pense.Repense


    ResponderExcluir
  72. Adorei o tutorial, super prático! O meu ficou quadradinho... Vou tentar novamente! :)

    http://vivianicolares.blogspot.com.br/

    ResponderExcluir
  73. Mds ficou muito fofo! Eu estou fazendo um layout novo, e vou usar! Beijoos :3

    Apenas Sorrisos / apenas-sorrisos.blogspot.com

    ResponderExcluir
  74. Acho q só no meu q não deu certo. Não achei o código main-inner, mas ótimo tutorial

    ResponderExcluir

- Comentários do tipo "seguindo, segue de volta" "lindo o blog, seguindo, retribui?" Serão ignorados se não tiverem uma opinião sobre o post em si.
- Não aceitamos mais selinhos e tags, sorry!
- Leia a página "FAQ" e outras páginas internas antes de perguntar qualquer coisa.
- Sua opinião é sempre bem vinda. Mas seja educado!

© Go Imagine - 2014. Todos os direitos reservados.