11 de outubro de 2009

Como deixar a data do post no formato de calendário


Navegando pela internet, sempre encontramos em alguns sites/blogs, as datas dos posts semelhantes a um calendário. Ao contrário do que se imagina, a instalação desse recurso não é difícil e o resultado é muito interessante. Hoje, de uma forma simples e rápida, iremos aprender a instalar esse hack, deixando o blog com um aspecto mais profissional.

Sempre bom lembrar que a primeira coisa a ser feita é salvar as configurações atuais do seu template. Feito isso, podemos trabalhar tranquilamente. Veja abaixo um exemplo de como ficará as datas nos posts do seu blog:
Agora chegou a hora de colocar a mão na massa. Vamos lá:

1º Passo: Vamos alterar o formato da data para que ela possa aparecer dentro da imagem que iremos usar de fundo no calendário.

Entre no seu blog, vá em Configurações -> Formatação -> Formato da data. Selecione a penúltima opção dada: dia mês ano (exemplo: 10 outubro 2009). Salve esta alteração.

2º Passo: Agora vá em Layout -> Editar Htlm e marque a opção "Expandir modelos de widgets". Com a ajuda do Crtl+F encontre o seguinte código:

<data:post.dateHeader/>

Substitua o código acima por este aqui:
<div id='date'>
<script> replace_date(&#39;<data:post.dateHeader/>&#39;);
</script>
</div>

3º Passo: Novamente com a ajuda do Crtl+F, encontre </head> e cole acima dele o código abaixo:
<style>
#date {
display: block;
float:left;
margin: 0 5px 0px 0;
padding: 1px 15px 15px 10px;
color: #333;
background: transparent url(http://img407.imageshack.us/img407/1294/calendarc.png) no-repeat;
border: 0;
text-transform: uppercase;
}

.month {
margin: 0px 5px 0px 9px;
color: #fff;
display: block;
font-size: 10px;
font-weight:bold;
}

.year {
margin: 0px 5px 0px 6px;
display: block;
font-size: 10px;
}

.day {
margin: 5px 5px 0px 7px;
display: block;
font-size: 20px;
font-weight:bold;
}
</style>

Obs.: Se preferir, você pode mudar a imagem usada como fundo e pode também hospedá-la em qualquer site de sua preferência, não esquecendo de modificar o trecho em vermelho, pelo novo link da imagem.

4º Passo: Mais uma vez, com a ajuda do Crtl+F, encontre <body> e cole abaixo dele o seguinte código:
<script>
function replace_date(d)
{
var da = d.split(&#39; &#39;);
month = &quot;<div class='month'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;;
day = &quot;<div class='day'>&quot;+da[0]+&quot;</div>&quot;;
year = &quot;<div class='year'>&quot;+da[2]+&quot;</div>&quot;;
document.write(month+day+year);
}
</script>

5º Passo: Clique em visualizar e se tudo estiver certo, Salve as alterações.

Pronto. As datas dos posts do seu blog vão estar semelhantes a um calendário.

É isso ai. Até a próxima.

Via: Blog Godown

18 comentários:

  1. Ótima a dica e realmente é muito fácil! =)

    Mas.. Você sabe onde posso conseguir imagens para colocar ao invés dessa? Quero achar uma que combine melhor com meu Blog.

    Abraço! =)

    ResponderExcluir
  2. Ola, Sara. Neste post do blog El Escaparate da Rosa, você poderá baixar vários modelos de imagens para usar como fundo para o seu calendário. Os links para você baixar as imagens estão no final do post.

    Abraço.

    ResponderExcluir
  3. Olá, Idenaldo!

    Bem interessante a sua dica! Em um de meus blogs, o template já veio com o calendário e o efeito é muito interessante. Bom saber que tenho seu tutorial caso deseje colocar o recurso em outro template.

    Um abraço!

    Adelson Smania
    Gerenciando Blog

    ResponderExcluir
  4. Grande Adelson. Pode usar e abusar deste recurso. Ele é muito bom mesmo. Eu coloquei no meu outro blog e ficou muito legal.

    Volte sempre, parceiro!

    Grande abraço.

    ResponderExcluir
  5. Amigo muito legal a sua informação, gostei da dica.
    Abraços forte

    ResponderExcluir
  6. Vou linkar nos Normais da Semana! =)

    ResponderExcluir
  7. Muito legal...
    Parabéns por repassar todas estas informações

    http://www.metafour.com.br

    ResponderExcluir
  8. Interessante ;),Parabens hein kra =) seu blog foi o que + me ajudou ate hoje ;D mais dia 11 de outubro voce parou de postar T.T

    ResponderExcluir
  9. Fantástico.
    Inventei um pouco e coloquei do lado direito do post. Só não consegui foi colocar a data centrada; aparece ligeiramente à direita do botão mas não faz mal.
    Obrigado pela dica.

    ResponderExcluir
  10. Vendo seu blog gostei muito,ele ajuda muito ,sabe-se que muitos precisam dessas experiências de profissionais que sabem e querem ajudar.

    ResponderExcluir
  11. Olá amigo muito bom esse seu tutorial, já está nos meus favoritos para me tentar com mais calma.

    ResponderExcluir
  12. olá,eu queria saber uma coisa, como colocar na barra lateral o "divulgue o nosso blog", eu sei que não está relacionado com este poste, mas eu não sei como pesquisar aqui no blog.

    muito obrigado.

    ResponderExcluir
  13. @joel É isso ai. Não desista diante da primeira dificuldade. Vai tentando que uma hora dá certo.

    @fatima obrigado pela visita e pelo comentário. Precisando de ajuda, pode contar com a gente.

    @alexandre Vá tentando que dá certo.

    @ton Faça uma verifiação novamente, pois se for template do blogger, tem o body.

    @hit o Adelson do Gerenciando blog ensina como fazer o banner de divulgação e também a configuração da "caixinha" de divulgação do seu banner, clique aqui.

    ResponderExcluir
  14. Eu posto varias vezes e a DATA nao MUDA.. SO FICA A DATA DA MINHA PRIMEIRA POSTAGEMM.. pliss ajuda

    ResponderExcluir
  15. A primeira postagem do dia, vem com o calendário certinho, porém na segunda postagem do mesmo dia, a data da postagem já vem em outro estilo. Será que fiz algo errado?

    ResponderExcluir
  16. Nossa... passei o dia procurando um que desse certo e até que enfim!!!!! Obrigada. Merece Parabéns!!

    ResponderExcluir

LEIA AS REGRAS COM MUITA ATENÇÃO:

- Seu comentário precisa ter relação com o assunto do post;
- Não inclua links desnecessários no conteúdo do seu comentário;
- Se quiser deixar sua URL, comente usando a opção OpenID;
- Comentários com CAIXA ALTA, miguxês ou erros de ortografia não serão aceitos;
- Ofensas pessoais, ameaças e xingamentos não são permitidos.