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.
0 comentários:
Postar um comentário