Se pretender que os seus posts apareçam com a data de publicação no formato "Ícone de Calendário", como no presente blog, siga os passos:
Passo 1:
No Painel de Controlo do seu blog, escolha:
Definições >> Formatação
e depois, no campo Formato do Cabeçalho da Data, escolha o formato mm.dd.aaaa. Por exemplo, hoje será 8.3.2008
Passo 2:
No Painel de Controlo do seu blog, escolha:
Esquema >> Editar HTML e depois marque a caixa Expandir modelos do widget
Passo 3:
Encontre:
<title><data:blog.pageTitle/></title>
Passo 4:
Imediatamente abaixo da linha encontrada no passo anterior insira o seguinte código:
Passo 5:
<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://trick-blog.blogspot.com */
/*********************************/
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>
Encontre:
date-header
Um pouco abaixo deste código deve encontrar:
.dateblock{
... }
Substitua todo este conjunto por:
.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 6:
Encontre:
<data:post.dateHeader/>
Substitua-o por:
<DIV class='dateblock'> <SCRIPT> date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>
Passo 7:
Grave e... já deve funcionar.
Nota: Se o Ícone de Calendário não ficar posicionado exactamente no sítio que deseja, jogue um pouco com os paddings da parte .month e/ou .day do Passo 5 até o acertar rigorosamente, como eu, aliás, fiz (ver código do Passo 5 acima).
Complementos:
1. 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
Pode ainda usar outras cores, tiradas de
http://trick-blog.blogspot.com/2008/01/change-post-date-become-calender-icon.html que foi, aliás, o site em que eu me baseei para este post e implementar esta funcionalidade no meu blog.
2. No entanto, se quiser usar outras cores que não aquelas que disponibilizo para si (verde, azul, laranja e vermelho) terá de fazer a cópia de outro ícone do site que indiquei e depois fazer o seu upload para o seu servidor.
Já que se fala nisso, e porque algumas pessoas podem não ter um servidor de espaço disponível para colocar/fazer upload dos seus ficheiros, neste caso imagens/ícones, aproveito para indicar três forncedores de espaço em servidores, que podem usar para este efeito, ou para outro qualquer. Quem é ou pretende ser webmaster/bloguista deve ter sempre à mão espaço para estas pequenas coisas, de modo a conseguir o que pretende e não ficar dependente de terceiros.
Assim, temos:
- Skydrive, da WindowsLive, que fornece 5GB grátis. Basta registar-se no Windows Live, se é que já não o fez (foi este o servidor que usei neste post);
- Plum, que também fornece 5GB livres e que ainda não usei;
- Stixy, que segundo dizem, oferece espaço ilimitado, e que também não experimentei.
3. É natural que agora pretenda que a data "normal" que aparece no final de cada post, e eventualmente também a hora e o autor, deixem de aparecer.
Para isso deverá encontrar e apagar
(ou melhor ainda, colocar entre de modo a que sejam interpretados pelo browser como comentários e assim não sejam interpretados como código. esta opção permite-lhe voltar a inseri-los rapidamente quando e se mudar de ideias).
Caber-lhe-à, naturalmente, optar pelo "escondimento" temporário" ou pela solução radical de apagar:
Data de Publicação do Post:
Encontre
<data:post.dateHeader/>
e apague (ou coloque como comentário)
Hora de Publicação do Post:
Encontre
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark'
title='permanent link'><abbr class='published'
expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
e apague (ou coloque como comentário)
Autor do Post:
Encontre:
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
e apague (ou coloque como comentário).
Coloquem as dúvidas e correcções nos comentários, por favor.
Have a nice day.
Tags:
