23/05/2014

Tutorial: Data dos Posts em Forma de Calendário

||

 Olá doçuras como estão? Weee finalmente mudei a frase, bom... hoje meu dia vai bem tedioso, depois de dias tão agitados. Acho que passei vendo filmes. Não necessária mente só filmes, mas passei em frente da TV e falando em passar tempo 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.

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:


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:
 #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;

Agora procure por </head> e abaixo cole:
<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>

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:
<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>

Áreas editáveis:
  • 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 dara.
  • 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)

15 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. oiieee,tenho 13 anos e sou nova e inexperiente com essas coisas de blog,passei rapidinho para divulgar ele aqui e pedir para me seguir assim te seguirei de volta<- (muitos ficam bravos com isso,mais por favor se não quiser seguir tudo bem,não precisa me seguir só peço que não m xingue lá no blog,só por causa disso) também gostaria de fazer afiliação ou parceria,por favor se for me responder,responda lá no meu blog,beijão gente :*
    http://animedoqem.blogspot.com.br/

    ResponderExcluir
  15. Laken27/7/14

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

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram