23/05/2014

Data dos Posts em Forma de Calendário


 Olá doçuras como estão? Weee finalmente mudei a frase, bom... Lembrei-me de uma postagem que não havia feito ainda qui no blog . Já ensinei como configurar a hora e data do blog, mas nunca de como colocar a data das postagens em forma de calendário. Não entendeu? Eu explico! Geralmente quando postamos fica apenas a data do dia atual na ultima postagem feita, com esse tutorial não importa se postou várias postagens no mesmo dia todas as post vão aparecer com data e hora dependendo do modelo que usar é claro.

1. Antes de começar aconselho fazer um backup do seu template, sério melhor prevenir do que remediar. Agora vá em Configurações >> Idioma e Formatação >> Formato da Data e deixe exatamente assim:



2. Salve e agora vá em Modelo >> Editar HTML. Devo avisar que testei apenas no modelo Travel é Simples não sei se funciona em outros modelos do blogger, ok? Vamos lá, usando o atalho Ctrl+F procure por ]]></b:skin>, acima dele cole:

Códigos
 #fecha {
  background: #fee;
  box-shadow: 2px 3px 5px #fcc;
  border-radius: 50px;
  border: 3px solid #fcc;
  width:50px;
  height:60px;
  float:left;
  text-align: center;
  list-style:none;
  display: block;
  font-family: 'Arial;
  font-weight: bold;
  color:#FF9FA5;
  margin: 5px 2px 0 -70px; /* Altere -70px por 0px se quiser que a data apareça dentro da postagem ou para posicionar */
  padding: 0 0 8px 0px;
}
.fecha_dia {
  display:block;
  font-size:20px;
  line-height:30px;
  padding:12px 0 0 0;
}
.fecha_mes {
text-transform: uppercase;
  font-size:18px;
  color: #f0b6d6;
  line-height:8px;
  display:block;

3. Agora procure por </head> e abaixo cole:

Códigos
<script>
function remplaza_fecha(d){
var da = d.split(&#39; &#39;);
dia = &quot;<div class='fecha_dia'>&quot;+da[0]+&quot;</div>&quot;;
mes = &quot;<div class='fecha_mes'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;;
document.write(dia+mes);
}
</script>

5. Procure por esse trecho <h2 class='date-header'><span><data:post.dateHeader/></span></h2> Nessa parte tem que prestar muita atenção, dependendo do seu modelo pode ser que apareça mais de 1 vez esse código; então nas 2 primeiras vezes troque por:

Códigos
<div id='fecha'>
<script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='fecha'>
<script>remplaza_fecha(&#39;<data:post.dateHeader/>&#39;);</script>
<script>remplaza_fecha(ultimaFecha);</script>
</div>

◤Entendendo o código◥
 background: #fee; = cor de fundo 
 box-shadow: 2px 3px 5px #fcc; = sombreamento do fundo. 
 border-radius: 50px; = arredondar as bordas. 
• border: 3px solid #fcc; = cor e tipo de borda. 
• width:50px; e height:60px; = largura e altura. .
 float:left; = aparecer a esquerda do post; se desejar altere para direita (float:right). 
 text-align: center; = alinhamento do texto.
• font-family: = tamanho do texto do dia. 
 font-weight: bold; = fonte em negrito. 
 color:#FF9FA5; = cor da fonte. 
 padding: 0 0 8px 0px; = posicionamento. 
 font-size:20px; = tamanho da fonte. 
 padding:12px 0 0 0; = posicionamento da data. 
• text-transform: uppercase; = deixa tudo maiúsculo no texto do mês. 
 font-size:18px; = tamanho do texto do mês. 
 color: #f0b6d6; = cor do texto do mês.
.

É isso, o tutorial eu achei lá no Cor Seletiva, porém no Reino Kawaii achei os códigos mais completinhos assim estarei creditando ambos. Espero que tenham gostado, vou ficando por aqui ate aproxima. Kiss~

 Créditos: Cor Seletiva - Reino Kawaii (Por edição de códigos)

14 comentários:

  1. Ótimo tutoriaaaaaal, eu estava procurando feito uma louca por ele kkkkkk Irei usá-lo brevemente, porque ele é muito útil e fica super organizado também. Parabéns pelo andamento do seu blog, ele é muito divo <3

    | Mands, do Mundo Kawaii |

    ResponderExcluir
  2. Adorei o tutorial! Ah, peguei uma base sua para fazer layout, pode deixar que darei os creditos, viu!
    Queria tutos p deixar aquelas bordinhas na foto como no seu blog, bjks!
    http://dreams-of-sugar.blogspot.com.br/

    ResponderExcluir
  3. Ameii o Tuto! Acho lindo o seu blog *o* !

    trick-ortreating.blogspot.com -> Da uma passadinha

    ResponderExcluir
  4. Adorei o tutorial, fica bem fofo!

    below average ✌

    ResponderExcluir
  5. tava procurando por esse tuto, obrigada por postar Wendy ♥♥

    ResponderExcluir
  6. Adorei o tutorial :).
    Amo o teu blog! Alguns dos tutorias que colocas-te ajudaram muito para fazer o meu blog.
    Segui ❤

    http://coolfashionsoul.blogspot.pt/

    ResponderExcluir
  7. Que lindo *---* acho que vou usar no proximo lay...

    estou vindo avisar a todos os nossos antigos afiliados que nos retornamos, resolvi mudar nome e url do blog, se quiser divulgar em algum post nosso retorno estaremos agradecidos - Antigo Kawaii Things || Just Some Things ( new url ) http://j-somethings.blogspot.com.br/

    ResponderExcluir
  8. Que lindo, acho que vou usar no meu próximo trabalho!!

    http://mixmateriais.blogspot.com.br/

    ResponderExcluir
  9. Adorei o tutorial, muito bom! Parabéns pelo blog, seu lay é fofo *---*

    http://cantinhodaamah.blogspot.com.br/

    ResponderExcluir
  10. Adorei o tuto, achei lindo e vou usar posteriormente!
    http://sweetcloudsoficial.blogspot.com.br/

    ResponderExcluir
  11. Adorei esse tutorial, fica muito fofo e bem organizado para blogs que postam várias coisas num só dia ♥. Muito obrigada por ter postado o/ e ficou bem explicado~.
    eveninng-tea.blogspot.pt

    ResponderExcluir
  12. Acho que a data nesse estilo fica tão bonita <3 Sempre usava nos meus lays, usei tanto que enjoou :v Beijos
    wehearthtml.com

    ResponderExcluir
  13. Olá,amei o tutorial e gostaria de saber se tem vagas para afiliados??troca de seguidores??espero a resposta,beijinhos de morango :*

    http://animedoqem.blogspot.com.br/

    ResponderExcluir
  14. Laken27/7/14

    Nossa adorei querida lindo maravilhoso,pena que não funciona.

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345