Data do Post na Forma de Folha de Calendário

Neste post vou ensinar como exibir as datas dos seus posts na forma de calendário assim como está aqui no Templates para VOCÊ.
Fonte:Tradução do Tutorial deste link Blogger Buster

1º Passo: Vá em Configurações ► Formatação ► Altere o formato da data para Ano-Mês-Dia como na figura abaixo:


2º Passo: Vá em Modelo ► Editar HTML ► Clique em Expandir modelos de widgets ► Encontre o código <data:post.dateHeader/> (Utilize o atalho Ctrl+F)
A linha que você encontrou vai estar desta forma: (Pode talvez, no lugar do h2 estar h3, mas não tem problema)
<h2 class='date-header'><data:post.dateHeader/></h2>

► Substitua o h2 ou h3 por div, ficando assim:
<div class='date-header'><data:post.dateHeader/></div>

Salve seu template clicando em SALVAR MODELO

3º Passo: Pode desmarcar a caixinha Expandir modelos de widgets ►
Cole entre as tags ]]></b:skin> e tag </head> este código a seguir:

<!-- calendar widget -->
<script src='http://bloggerbuster.com/scripts/fastinit.js'/>
<script src='http://bloggerbuster.com/scripts/prototype-1.5.0.js'/>
<script src='http://bloggerbuster.com/calendar.js'/>
<link href='http://bloggerbuster.com/calendar.css' rel='stylesheet' type='text/css'/>
<!-- end calendar widget -->

Salve seu template clicando em SALVAR MODELO

4º Passo: Se você quiser configurar a imagem do calendário copie este código abaixo e cole acima da tag: ]]></b:skin> ► Sugiro que Apague a linha:
<link href='http://bloggerbuster.com/calendar.css' rel='stylesheet' type='text/css'/> do código anterior

/*-------Calendário do Post------*/
span.cal {
background:transparent url('imagem do seu calendário') no-repeat scroll 0%;
float:left;
margin-right: 10px;
height:36px;
width:35px;
font-family:"Helvetica",Tahoma,Arial;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
}
span.cal_month {
color:#FFFFFF;
display:block;
font-size:10px;
line-height:11px;
margin-left:1px;
padding-top:1px;
text-align:center;
text-transform:uppercase;
}
span.cal_day {
color:#999999;
display:block;
font-size:18px;
line-height:18px;
margin-left:1px;
padding-top:4px;
text-align:center;
text-transform:uppercase;
}
.sidebar {
margin-bottom: 20px;
}


No próximo post explico como mudar a imagem do calendário!

Links com folhas de calendário:
Link 1
Link 2
Data do Post na Forma de Folha de Calendário Data do Post na Forma de Folha de Calendário Reviewed by Áurea on 2/11/2008 Rating: 5

15 comentários:

  1. Esse é um hack muito procurado. Fez bem em ensinar amiga. Como sempre, seu blog arrasa. Bjs.

    ResponderExcluir
  2. Aurea, vim te dar meu abraço e dizer que já postei os selos que você me mandou .. Um deles eu já tinha, mas valeu pela lembrança !! ;-)
    Beijão e té loguinho !!

    ResponderExcluir
  3. Tava procurando essa dica, moça!! Assim que possível vou aplica-la no blog! Brigada!
    Bjos

    ResponderExcluir
  4. Obrigada Claudya, é uma honra para mim seu comentário.

    Sempre vou lembrar de você e de sua simpatia Nando.

    Que bom que estou ajudando Rô.

    ResponderExcluir
  5. Olá, gostaria de saber como personalizar esse calendário em todos os posts, mesmo os do mesmo dia?
    Abraços!

    Qualquer coisa, se puder me responder, pode serno henrique.marcel@hotmail.com

    ResponderExcluir
  6. Oi, moça...tudo bem!?
    Passando para avisar que deixei esse post e o que ensina a personalizar como link lah no CriaRecria, ok?
    Eu gosto muito dessa dica, nem sei pq ainda não implantei no meu...rs!

    Bjos

    ResponderExcluir
  7. Olá minha amiga,
    eu vinha fazendo o codio comfome o ensinado, mas quando chegou na




    3º Passo: Pode desmarcar a caixinha Expandir modelos de widgets ►
    Cole entre as tags ]] -b:skin- e tag -head- este código a seguir:

    eu nao achei essa parte dava erro sempre o que eu faço agora, ate por que eu nao prosegui sem esse codigo eu parei. agora é com você ???

    meu nome é Hugo

    ResponderExcluir
  8. [adm]Baixepro

    eu fui tentar colocar ....

    mas nao tow conseguindo... eu faço tudo direito mas nao aparece o calendario!

    me de uma luz ae

    ResponderExcluir
  9. Olá,Áurea,td bem?Olha,eu teria que avisar você por e-mail,mas não encontrei aqui como mandar e-mail,então vou avisar aqui mesmo.Estou indicando você para o Blog Day.
    Adoro seu blog,por isso a indicação.Bjus

    ResponderExcluir
  10. Ola adm....
    só uma dica, vc poderia colocar imagens de como vai ficar os efeitos prontos, ou colocar um link de um blog q ja tenha, entende.....mas ai gostei muito...

    ResponderExcluir
  11. Áurea

    Você não informou aonde se consegue a imagem do Calendário para ficar no mesmo formato do seu..
    Mais ficou bom msmo o post

    Edson Vargas

    ResponderExcluir
  12. Aurea,,,
    Não funciona de geito algum e tentei os dois tutorias que voc~e passou, pode ajudar de alguma forma? por que sera que não funciona?
    Fiz tudo direitinho....

    ResponderExcluir
  13. A é...sei que não costuma responder mas to procurandoe não encontro nada, todo codigo que acho pra mudar o foramto da data do post em calendario não funciona então, me da uma ajudazinha, não sei por que não funciona, não consigo entender.
    Espero que possa me ajudar, não entendo muito de tema, vi um tema que tem esse formato mas a cor é laranja ate...tipo aparece 25.01.2009 em formato de calendario né e onde é o 25 fica em laranja e maior que os outros mas não consigo nem por as suas dicas né, não funciona dai faço o que?
    Bom, abraço e espero sua resposta assim que puder.

    ResponderExcluir
  14. João Vou criar um template em breve com este recurso para exemplificar este tutorial. Enquanto isso uso este recurso no Aukimia. Mas uso o outro Tutorial daqui mesmo adaptado para a imagem do calendário.

    Teste da Tribo Coloquei dois links de onde você pode achar imagens de calendários para a data dos posts.

    Fernanda Maria Não é que eu não costumo responder, me falta tempo. Queria muito responder a todas as suas dúvidas. Quando fiz este post também não gostei muito do resultado, estou querendo apagá-lo. Tem outro tutorial sobre este assunto que está mais fácil. Sugiro que você tente este aqui: Personalizando a data do seu post. este é mais fácil de aplicar. Mexendo no CSS dele você consegue deixá-lo como quiser. Veja como fiz no Aukimia, para você entender como fiz veja o código fonte do Aukimia e procure pelo bloco de códigos /*-----------Data post---------------*/.
    Você irá entender como fiz. Qualquer dúvida escreva de novo!

    ResponderExcluir
  15. Vlw mesmo. rss Soubesse o quanto procurei por um tutoral q funcionasse.

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.