16 de out de 2011

Personalizando a data da postagem

Tumblr_lnkn0gj6gx1qhwy7ko1_500_large
Postagem atualizada dia 23/08/2013 às 20h57

Taí um tutorial bastante procurado e um dos mais vistos por aqui (segundo as Estatísticas do Blogger): ensinarei vocês a personalizar a data da postagem que, pelo design padrão do blog, é sem graça, e fica sempre num canto, tão escondidinha.
Prontos?


Pra começar, vá até Configurações >> Formatação >> Formato da data, e ajuste a data da seguinte maneira:


Salve, e em seguida vá até o seu HTML (Design >> Editar HTML) e procure pelo código abaixo:
.main-inner h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}
E substitua esse código por esse:
.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;
}
Primeiro vamos alinhar a data, se seu quadro de postagem está à direita não é necessário mudar o "float: right;" e o "margin-right: -100px;" caso contrário, substitua o right por left. Agora vamos entender os códigos!

font: georgia; É a fonte da data.
color: #333; É a cor da data.
margin-right: -100px; Este código é a margem externa da data, ou seja, ela ira dar o espaçamento necessário entre o quadro da postagem e o quadro da data. Quanto menor o número mais perto ficará, e quanto maior mais longe.
background: #FFB6C1; Cor do fundo do quadro.
float: right; Alinhamento do quadro da data.
font-size: 11px; Tamanho da fonte da data.
padding: 4px; Margem interna do quadro, ou seja, espaçamento de dentro da caixinha.

PROPRIEDADE HOVER
background: #DB7093; Cor do fundo do quadro quando passa o mouse em cima.

Caso queiram bordas diferentes, deem uma olhada nessa postagem. Espero que tenham entendido! Qualquer dúvida deixem um comentário ou entrem em contato, ok? Beijos, Emily.

36 comentários:

  1. Arrasou Emily! Esses tempos tava fuçando e consegui colocar a data pra fora do post usando a propriedade "margin-right" e coloquei uma borda diferente também. Mas como deixar com efeito hover eu não sabia. Fazendo algumas alterações da pra usar no balão dos comentários também né?
    Enfim, amei!
    goimagines.blogspot.com

    ResponderExcluir
  2. Oba , mais um tutorial mega legal aqui !
    Adoro seus tutoriais , são novos e bem úteis.
    Quem dera se eu , soubesse tanto de CSS e html assim hein ? rs.

    Continue assim Emily , sucesso.
    Beijos , Yara.
    www.garotaexigenteblog.blogspot.com

    ResponderExcluir
  3. Parabééns pelo blog, seus tutoriais são sempre ótimos, vou usá-lo no próximo layout, beiijos

    http://docekawaii.blogspot.com/

    ResponderExcluir
  4. amei o tutorial concertesa vou usar no próximo design do meu blog :D

    Besos,
    blog-menina.blogspot.com

    ResponderExcluir
  5. Que saudade dos seus post, Emy. Gostei do tutorial e não tinha visto em nenhum outro blog, como disse é exclusivo. Risos.
    E trate de se livrar da preguiça, pois a gente fica como sem seus posts? Beijos.

    ResponderExcluir
  6. Eu fiz no meu blog de testes e a data ficou pulando para a área de gadgets! Vc sabe pq? Ah, eu amo o seu blog! Ele me ajuda em muitas coisas meeesmo! Visite o meu! é www.happy-charllote.blogspot.com.

    ResponderExcluir
  7. tem selinho pra você
    http://wwwetcvariascoisas.blogspot.com/p/selos.html

    ResponderExcluir
  8. amei muito emily! já to usando. tem como você explicar como faz pros comentários ficarem embaixo da data, igual ao place fame? por favor :3

    beijos!
    http://justnatha.blogspot.com

    ResponderExcluir
  9. Ameeeei o post! Fácil, não?
    Posta como deixar as imagens do post, em 'slides' tipo os que tão agorA? Ah, e como colocar fundo no rosapé da postagem.

    Beeeijos.
    www.sermenina-blog.blogspot.com

    ResponderExcluir
  10. Eu nem preciso dizer como você é perfeita, né? Esse tutorial está aquela coisa que quando você vê dá vontade de pôr em odos os seus blogs. E agora que vc postou, aposto que vai virar moda! E eu vou estar nela viu?
    Controla a preguiça que vale a pena. Sei como é.
    Girls On-Line - Em Manutenção

    ResponderExcluir
  11. Bom Emily, acho que sai logo! Eu tava me matando pra tentar fazer um menu diferente e por uma imagem somente no topo das postagens, só agora consegui rsrs Assim que sair te aviso! beijos :*

    ResponderExcluir
  12. Adorei, talvez coloque lá no blog :)

    Beijos, Carol.
    http://conselhosdostardoll.blogspot.com/

    ResponderExcluir
  13. Muito bom o tutorial s2
    http://senhoritaliberdade.blogspot.com/

    ResponderExcluir
  14. Amei Emily, eu estava precisando.
    Tem post novo. Comenta?
    girlteen-s2.blogspot.com

    ResponderExcluir
  15. Tutorial incrível, já vou usar! Emily, você poderia ensinar como faz para colocar fontes de letras diferentes no titulo dos posts e na sidebar? Iria me ajudar muitíssimo!

    Beijos e abraços...
    http://wronggirl-ann.blogspot.com/

    ResponderExcluir
  16. ensina a colocar tipo creditos no final da coluna lateral? (tipo o layout free - love)

    Bejoos, Adorei aqui

    ResponderExcluir
  17. Olá

    Adorei encontrar vc aqui na blogolândia. Sou Kinha do blog AMIGA DA MODA e vim conhecer seu espaço. Gostei e já estou te seguindo. Vou aguardar a sua visita e ficarei feliz se me seguir também.

    Bjooooooooooooo......................
    www.amigadamoda1.com

    ResponderExcluir
  18. Cadê os posts do Maratona de tutoriais tudo pra mim ? To com saudade dos tutos lá

    ResponderExcluir
  19. Ótimo o tutorial, estou usando a data da postagem assim *-* o melhor é que é super-fácil.

    http://meublogblogdadanii.blogspot.com/

    ResponderExcluir
  20. Tá ótima a postagem simples e objetiva!

    http://young-nation11.blogspot.com/

    ResponderExcluir
  21. ameeeeei! só uma pergunta, como faz para deixa-la na horizontal? beijos!
    http://imacrazy-bitch.blogspot.com

    ResponderExcluir
  22. mico eterno, falei errado! é na vertical :S kkk
    beijos :*
    http://garotadestemidadivulga.blogspot.com/

    ResponderExcluir
  23. a barra de cor do titulo da postagem ficou encima , help me Emily

    ResponderExcluir
  24. Queria tirar uma outra dúvida Emily querida...Como eu faço para a área do comentário ficar arredondada como está no seu????Beijos Fran [http://123make.blogspot.com/]

    ResponderExcluir
  25. Adorei consegui fazer,coloquei no meu layout novo!
    Você sempre arrasando nos tutos! espero que sempre venha mais tutoriais excelentes,cada dia mais!

    http://casadophotoscape.blogspot.com/

    ResponderExcluir
  26. Amei, usei no blog que eu faço o layout:http://diariesally.blogspot.com/

    garota-unbroken.blogspot.com

    ResponderExcluir
  27. Emily como faço pra usar essa data personalizada, só que abaixo do título da post? Espero sua resposta pelo email: vmariaflor@gmail.com Obrigada, bjjs.

    ResponderExcluir
  28. entao, achei útil e fica lindo, mas eu nao estou conseguindo mudar a cor... me ajuda?

    ResponderExcluir
  29. por favor ajuda eu nao to conseguindo achar o primeiro codigo meu modelo é o template minima

    ResponderExcluir
  30. Você só faz tutorial para blogspot? Não tem para wordpress? :(

    ResponderExcluir
    Respostas
    1. Não tenho conhecimento sobre wordpress, querida :(

      Excluir

Comentários como "o blog tá lindo, bjo" "to seguindo, segue de volta??" "ai que lindo o blog, retribui a visita/comentário?" serão ignorados. Por favor, leia a FAQ e as outras páginas internas antes de perguntar qualquer coisa.