Data do post em forma de calendário
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.
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.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;
}
Para outras cores, continue a ler o post.
Passo 4:
Encontre:
<data:post.dateheader>
Substitua-o por:
<DIV class='dateblock'> <SCRIPT> date_replace('<data:post.dateHeader/>');</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.
Cara,
ResponderExcluirtem alguma coisa errada no Passo 4. Pode rever o processo?
Valeu Marcos, faltava a conversão de <data:post.dateheader> para "&l t ;data:post.dateheader& gt;"
ResponderExcluirtem como fazer isso no uol?
ResponderExcluirtem como fazer isso no uol?
ResponderExcluir@Kah, eu acho que não, mas eu vou pesquisar!
ResponderExcluir@Kah, bem como eu esperava, não dá certo (desse jeito, mas pode haver outro)!
ResponderExcluirOláá Guia Blogger.
ResponderExcluirSou 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
Ola pessoal.... Tentei colocar esse calendário no meu blog mas cheguei a esse problema.... No passo 4 o meu codigo é assim....
ResponderExcluir<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 == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
<data:adEnd/>
Como faço para inserir o codigo correto?
@Fernando, substitua a parte em negrito:
ResponderExcluir<h2 class='date-header'><data:post.dateHeader/></h2>
por esta parte:
<DIV class='dateblock'> <SCRIPT> date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>
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@Portal80, não existe passo cinco. Para mudar a cor, volte ao passo 3 e:
ResponderExcluirProcure 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 {.
eu quiria q aparecece o dia da semana tbm tem jeito? tem otro tipo de calendario q mostra o dia da semana?
ResponderExcluirProcurei, procurei e encontrei aqui a solução, muito bom post!
ResponderExcluir-@Jean, eu acho que não tem não, mas eu vou procurar!
ResponderExcluir-Brigado nada @ToP LeGenD!
Vc disse: "Se quiser usar outras cores, use, no código do passo 5..."
ResponderExcluirMas não há passo 5. Pelo menos ele não está indicado.
Ops! Re-do:
ResponderExcluir"Se quiser usar outras cores, use, no código do passo 3..."
Desculpa!
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")
ResponderExcluirdecei um parentese a mais e aí o verde saiu e fcou data com o mês e o dia, ficou mara... rsrs.
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/
ResponderExcluirTipo Data, titulo, nome do autor e marcadores?
ResponderExcluirMuito bom. Parabéns!
ResponderExcluirhttp://zedalontra.blogspot.com
fiz tudo certinho ai cara mais a imagen do calendario não ta aparecendo de jeito nenhumse você poder ajudar desde já agradeso =)
ResponderExcluirNao encontrei onde fica no blogger , ? pf me ajudem !!!
ResponderExcluirmeu blog é este!!... http://naofoirevelado.blogspot.com.br/
ResponderExcluireste é meu blog... http://naofoirevelado.blogspot.com.br/
ResponderExcluirfiz tudo direitinho e nao funcionou...
ResponderExcluir