Pular para o conteúdo principal

Data do post em forma de calendário

Guia Blogger - Dicas, Tutoriais e Templates

Eu encontrei muitos tutoriais que ensinavam a mudar a data para um calendário, mas nenhum funcionava. Até que um dia, eu achei um blog (o Trick-Blog, em inglês) que ensinava isso, e funcionava.
Bom, para começar: 
Passo 1:
Vá no painel Configurações > Formatação, e no campo Formato da Data escolha mm.dd.aaaa e salve.
Guia Blogger - Dicas, Tutoriais e Templates
Passo 2:
Vá em Layout > Editar HTML , marque a opção Expandir Modelos de Widgets (faça um becape do seu template).
Procure por </head> , e cole o código abaixo antes dela:
<SCRIPT type='text/javascript'>
//<![CDATA[

function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>

Passo 3:
Procure por ]]></b:skin> , e cole o código abaixo antes dela:
.dateblock {
background: url("http://zgulmq.bay.livefilestore.com/y1p-a_Ls6QLRk_kPb6e_RyWXx7IS1B2M2LtIJaEohWqkvHAfAZ4ozzvy3i_xZzZUlLK2VWHqIWH5JE/greencalend.gif")
no-repeat;
width: 50px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
padding-left: -1cm;
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
padding-left: -1cm;
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;
}
Nota: o ícone de calendário que lhe aparecerá é igual ao meu, isto é, em verde.
Para outras cores, continue a ler o post.

Passo 4:
Encontre:
<data:post.dateheader>
Substitua-o por:

<DIV class='dateblock'> <SCRIPT> date_replace(&#39;<data:post.dateHeader/>&#39;);</SCRIPT></DIV>
Visualiza para ver se existem erros, e depois salve.
Se quiser usar outras cores, use, no código do passo 5, em vez de
http://zgulmq.bay.livefilestore.com/y1p-a_Ls6QLRk_kPb6e_RyWXx7IS1B2M2LtIJaEohWqkvHAfAZ4ozzvy3i_xZzZUlLK2VWHqIWH5JE/greencalend.gif
a) http://zgulmq.bay.livefilestore.com/y1pqdR-_Z8kjZ29b4MnoJ5EzZYnwQnheCZWOK3qkn8yMfHWj5I84qp_IVvmoPYera54Fj3Cd6V90yU/bluecalend.gif para Azul
b) http://zgulmq.bay.livefilestore.com/y1pu7mLoHH68diYVSjBw-FrfYjTpJcp9Ivl9MpTRwOMfmteSPKtupxWysVNfoZ9snOiRBNba245xDU/orangecalend.gif para Laranja
c) http://zgulmq.bay.livefilestore.com/y1p14rzUvUbusFPqJmcoPHQ-hIcysAW1sYo_oskUntfu099K1t75GrOtlRWIw2Gfbqu0f4iFHNRPPA/redcalend.gif para Vermelho


Se a cor que você quer não estiver listada aí na lista, clique AQUI para ir ao post original, e escolher outra cor. 

Postagens mais visitadas deste blog

Mudar Imagem ao Passar o Mouse

A interatividade é o que muitas vezes (quando combinada com bom conteúdo) faz com que os leitores gostem e voltem a visitar o seu site. Nesse tutorial você aprende um código em JavaScript que altera a imagem quando o cursor do mouse passa sobre ela.

Cadastre-se no Technorati.

Eu começo agora uma série de tutoriais para você poder aproveitar mais algumas das mais conhecidas redes sociais, a começar pelo Technorati. Você poderá adicionar widgets em seus blogs, aprender mais sobre redes sociais e etc.