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:
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('<data:post.dateHeader/>');
</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(' ');
month = "<div class='month'>"+da[1].slice(0,3)+"</div>";
day = "<div class='day'>"+da[0]+"</div>";
year = "<div class='year'>"+da[2]+"</div>";
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.
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
Ótima a dica e realmente é muito fácil! =)
ResponderExcluirMas.. Você sabe onde posso conseguir imagens para colocar ao invés dessa? Quero achar uma que combine melhor com meu Blog.
Abraço! =)
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.
ResponderExcluirAbraço.
Olá, Idenaldo!
ResponderExcluirBem 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
Grande Adelson. Pode usar e abusar deste recurso. Ele é muito bom mesmo. Eu coloquei no meu outro blog e ficou muito legal.
ResponderExcluirVolte sempre, parceiro!
Grande abraço.
Obrigada pela dica!! =)
ResponderExcluirAmigo muito legal a sua informação, gostei da dica.
ResponderExcluirAbraços forte
Vou linkar nos Normais da Semana! =)
ResponderExcluirMuito legal...
ResponderExcluirParabéns por repassar todas estas informações
http://www.metafour.com.br
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
ResponderExcluirFantástico.
ResponderExcluirInventei 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.
Vendo seu blog gostei muito,ele ajuda muito ,sabe-se que muitos precisam dessas experiências de profissionais que sabem e querem ajudar.
ResponderExcluirOlá amigo muito bom esse seu tutorial, já está nos meus favoritos para me tentar com mais calma.
ResponderExcluiresse < body > não tem no meu i agora?
ResponderExcluirolá,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.
ResponderExcluirmuito obrigado.
@joel É isso ai. Não desista diante da primeira dificuldade. Vai tentando que uma hora dá certo.
ResponderExcluir@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.
Eu posto varias vezes e a DATA nao MUDA.. SO FICA A DATA DA MINHA PRIMEIRA POSTAGEMM.. pliss ajuda
ResponderExcluirA 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?
ResponderExcluirNossa... passei o dia procurando um que desse certo e até que enfim!!!!! Obrigada. Merece Parabéns!!
ResponderExcluir