Deixe a data do post no formato de calendário

Quando navegamos pela internet, e encontramos vários sites diferenciados, e às vezes têm um blog com a data do post semelhante ao um calendário, aí você se pergunta: "Mas como ele colocou isso? Achei muito legal." Muitas das pessoas pensam que é difícil ou complicado de colocar este recurso, mas pelo contrário é simples e o resultado fica muito interessante. Hoje, você irá aprender como colocar este hack em seu blog.

É bom sempre lembrar a fazer backup do seu template, feito isso, podemos trabalhar tranquilamente. Veja abaixo um exemplo de como ficará em seu blog, depois de instalar este recurso:

Siga as instruções abaixo para ocorrer tudo certo.

1º - Iremos alterar o formato da data para que ela apareça dentro da imagem que iremos usar como fundo do calendário.

Entre em seu blog (Painel de Controle) >> Configurações >> Formatação >> Formato da data. Agora selecione o penúltima opção de data: dia mês ano (ex: 23 outubro 2011). Feito isso, salve as alterações.

2º - Vá em Design >> Editar HMTL e marque a opção "Expandir modelos Widgets". Para facilitar a busca do código abaixo, pressione as teclas Ctrl+F e encontre o código seguinte;

<data:post.dateHeader/>

Subsitua o código acima por este aqui:

<div id='date'>
<script> replace_date('<data:post.dateHeader/>');
</script>
</div>

3º - Novamente precione Crtl+F e 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 você quiser, você pode mudar a parte em vermelho por outra imagem, hospede ela, mas não se esqueça de trocar o link da parte destacada.

4º - 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º - Visualize antes de salvar, se deu tudo certo clicque em "Salvar Modelo".

Tudo prontinho, qualquer dúvida deixe nos comentários.

Via: Blog Godown

1 Comentário:

Anônimo disse... [Responder Comentário]: Muito Bom; 15 novembro, 2012

Postar um comentário

Parcerias são feitos em suas respectivas páginas.
- Se deseja falar com nossos autores, criticar ou sugerir, solicite nosso
Formulário de Contato
- Evite divulgar o seu blog nos comentários para que ele não seja excluído por nosso autor.
- Não utilize linguagem vulgar e tente falar sobre algo que esteja ligado ao artigo.