A carregar...



Posts com data em formato de Ícone de Calendário


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:

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









                         


Mensagens relacionadas (por Tags)







8 Comentárioa


Burity disse...

Olá Luis, tudo bem? Estou tentando colocar ìcone de calendário seguindo suas dicas. Só q no passo nº5, eu encontro no meu blog: h2.date-header {
color: $dateHeaderColor;
} ,e não o q vc indica: date-header e o
.dateblock{
... }. Vc pode me dar + uma dica?
Obrigado!

burity01@gmail.com
http://buritydigital.blogspot.com/
http://buritypinturas.blogspot.com/

luisj disse...

Olá burity.
É esse mesmo.
Eu não pus h2.date-header mas apenas date-header, mas é esse bloco.
Abaixo dele deve encontrar o tal bloco
.dateblock {
...}
que deve substituir.
Não se esqueça de gravar primeiro o seu Esquema, para o caso de haver problemas.
Depois diga se funcionou.
Obrigado.

Anónimo disse...

Olá Luís!
Há quanto tempo! :)
Ando a ver se encontro coisas bonitas para o meu blog. Para já não vou aplicar esta forma de data, mas já está agendada!
Abraços.
Luísa

Unknown disse...

Ah.. gostei muito do novo visual do WEB2.0!
Mais solto e alegre. Parabéns!
Abraços

luisj disse...

Obrigado LL.
Dê sempre a sua opinião.
Ela incentiva e ajuda a melhorar.
Abraços!

PsoríasePortugal disse...

Eu bem que gostaria de conseguir encontrar os códigos como falas aqui. Infelizmente não encontro. Obrigado na mesma pela dica. Tentei mas não consegui.

luisj disse...

PsoríasePortugal:
Funcionam. Mesmo agora testei!
Os das outras cores é que já não me lembro onde pus :)

Verde:
http://zgulmq.bay.livefilestore.com/y1p-a_Ls6QLRk_kPb6e_RyWXx7IS1B2M2LtIJaEohWqkvHAfAZ4ozzvy3i_xZzZUlLK2VWHqIWH5JE/greencalend.gif

Azul:
http://zgulmq.bay.livefilestore.com/y1pqdR-_Z8kjZ29b4MnoJ5EzZYnwQnheCZWOK3qkn8yMfHWj5I84qp_IVvmoPYera54Fj3Cd6V90yU/bluecalend.gif

Laranja:
http://zgulmq.bay.livefilestore.com/y1pu7mLoHH68diYVSjBw-FrfYjTpJcp9Ivl9MpTRwOMfmteSPKtupxWysVNfoZ9snOiRBNba245xDU/orangecalend.gif

Vermelho
http://zgulmq.bay.livefilestore.com/y1p14rzUvUbusFPqJmcoPHQ-hIcysAW1sYo_oskUntfu099K1t75GrOtlRWIw2Gfbqu0f4iFHNRPPA/redcalend.gif

Abraço!

João Pedro disse...

Eu não encontrei o .dateblock {, ? e agora o que faço ?

Enviar um comentário