23 de outubro de 2011

1

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.

- 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.

- 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(&#39;<data:post.dateHeader/>&#39;);
</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.

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

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

1 Comentário:

Gabriel Rausch disse... [Responder Comentário]

Muito Bom

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.

Licença Creative Commons
Free Page Rank Tool