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. 

Comentários

  1. Cara,
    tem alguma coisa errada no Passo 4. Pode rever o processo?

    ResponderExcluir
  2. Valeu Marcos, faltava a conversão de <data:post.dateheader> para "&l t ;data:post.dateheader& gt;"

    ResponderExcluir
  3. @Kah, eu acho que não, mas eu vou pesquisar!

    ResponderExcluir
  4. @Kah, bem como eu esperava, não dá certo (desse jeito, mas pode haver outro)!

    ResponderExcluir
  5. Oláá Guia Blogger.
    Sou novo aki e nesse mundo do blog, e estou aki te pedindo umas dicas, é sempre bom aprender com quem jah teem muita esperiencia.
    Bom eu coloquei uhn calendário desse em meu blog, mas da onde eu tirei era em português, entaum fica dificil pra miim saber fazer oq eu necessito, teen como mi ajudar? O assunto é o seguinte, meu calendário é preto e branco, e a data eo mês do calend. são cinzas. O mês naum aparece cendo ele cinza com a barra preta, entaum queria lhe pedir para me enssinar como trocar a cor da fonte do mês. Teem como vc mii dar um help ?
    Meu blog é esse: http://centerdownloadsweb.blogspot.com/
    ValeO' Brigadão

    ResponderExcluir
  6. Ola pessoal.... Tentei colocar esse calendário no meu blog mas cheguei a esse problema.... No passo 4 o meu codigo é assim....

    <data:adStart/>
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:include data='post' name='comments'/>
    </b:if>
    </b:loop>
    <data:adEnd/>

    Como faço para inserir o codigo correto?

    ResponderExcluir
  7. @Fernando, substitua a parte em negrito:
    <h2 class='date-header'><data:post.dateHeader/></h2>
    por esta parte:
    <DIV class='dateblock'> <SCRIPT> date_replace(&#39;<data:post.dateHeader/>&#39;);</SCRIPT></DIV>

    ResponderExcluir
  8. E, kd o passo 5? O código deste pra por a cor não vi no post e .... Não tá dando certo no meu! ;(

    ResponderExcluir
  9. @Portal80, não existe passo cinco. Para mudar a cor, volte ao passo 3 e:
    Procure por .month { (referente ao mes). Um pouco mais em baixo, você vai encontrar color: #fff;.
    Substitua #FFF pelo código de outra cor (não sabe os códigos? Clique aqui!).
    Depois, procure por .day{ (referente ao dia). Um pouco mais embaixo você vai encontrar color:#3366CC;. Faça o mesmo que você fez com .Mounth {.

    ResponderExcluir
  10. eu quiria q aparecece o dia da semana tbm tem jeito? tem otro tipo de calendario q mostra o dia da semana?

    ResponderExcluir
  11. Procurei, procurei e encontrei aqui a solução, muito bom post!

    ResponderExcluir
  12. -@Jean, eu acho que não tem não, mas eu vou procurar!
    -Brigado nada @ToP LeGenD!

    ResponderExcluir
  13. Vc disse: "Se quiser usar outras cores, use, no código do passo 5..."
    Mas não há passo 5. Pelo menos ele não está indicado.

    ResponderExcluir
  14. Ops! Re-do:
    "Se quiser usar outras cores, use, no código do passo 3..."
    Desculpa!

    ResponderExcluir
  15. Já usei este tipode post em 3 blogs, ficaram legais, mas qdo fui colocar no meu blog, url(("http://zgulmq.bay.livefilestore.com/y1p-a_Ls6QLRk_kPb6e_RyWXx7IS1B2M2LtIJaEohWqkvHAfAZ4ozzvy3i_xZzZUlLK2VWHqIWH5JE/greencalend.gif")
    decei um parentese a mais e aí o verde saiu e fcou data com o mês e o dia, ficou mara... rsrs.

    ResponderExcluir
  16. E como eu faço pra esse calendario aparecer não junto ao titulo do post mas ao lado como se fosse uma tab? igual esse site aqui http://btemplates.com/2009/11/26/astra-2/demo/

    ResponderExcluir
  17. Tipo Data, titulo, nome do autor e marcadores?

    ResponderExcluir
  18. Muito bom. Parabéns!

    http://zedalontra.blogspot.com

    ResponderExcluir
  19. fiz tudo certinho ai cara mais a imagen do calendario não ta aparecendo de jeito nenhumse você poder ajudar desde já agradeso =)

    ResponderExcluir
  20. Nao encontrei onde fica no blogger , ? pf me ajudem !!!

    ResponderExcluir
  21. meu blog é este!!... http://naofoirevelado.blogspot.com.br/

    ResponderExcluir
  22. este é meu blog... http://naofoirevelado.blogspot.com.br/

    ResponderExcluir
  23. fiz tudo direitinho e nao funcionou...

    ResponderExcluir

Postar um comentário

Sinta-se livre para comentar. Mas lembre-se: os comentários devem estar relacionados ao assunto do post e tudo o que você escrever fica por sua conta e responsabilidade.

Postagens mais visitadas deste blog

Resumir Postagens