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

19 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. Muito legal...
    Parabéns por repassar todas estas informações

    http://www.metafour.com.br

    ResponderExcluir
  7. 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
  8. your site is so good I always visit it everyday, you update so quick !
    cheer !

    and don't forget visit my site I just create my site too
    if you could exchange link It would be great
    and I will be happy to link your site.
    Here is :
    freedowload



    thanks you

    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. esse < body > não tem no meu i agora?

    ResponderExcluir
  13. 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
  14. @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
  15. Eu posto varias vezes e a DATA nao MUDA.. SO FICA A DATA DA MINHA PRIMEIRA POSTAGEMM.. pliss ajuda

    ResponderExcluir
  16. 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
  17. 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.