Follow Us @soratemplates

quinta-feira, 31 de janeiro de 2013

Data dos Posts em Forma de Calendário

Oie...eu já postei aqui para vocês como deixar a data da postagem personalizada com estilo de calendário.
Hoje vou mostrar a outra maneira que conheço para fazer isso, descoberta graças ao Cor Seletiva, em que a data aparece em cada postagem, independente de ter sido feita no mesmo dia ou não, e será mostrado dia e mês, igual a forma como uso aqui no blog atualmente.
Antes de tudo...
- Faça um backup do seu template.
- Vá em Configurações - Idioma e Formatação - Formato da Data e deixe assim:


- Em seu Modelo - Editar HTML - marque "Expandir Modelos de Widgets".
Vamos começar, lembrando que uso o tutorial no Modelo Travel editado pelo Designer do Blogger...
1. No seu template, adicione isso acima de ]]></b:skin>:
 #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: 'Kavoon';
  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;
} 

2. Abaixo de </head> cole isso:
<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> 

3. Encontre...

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
Nessa parte tem que tomar cuidado. Pode ser que apareça mais de 1 vez; 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> 

Como vocês viram, tem uma fonte chamada Kavoon para deixar o texto personalizado. Adicione-a em seu HTML, abaixo de <head>:
<link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css'/>
E por fim você irá obter um resultado mais ou menos assim:
Áreas personalizáveis:
  • background: #fee; = cor de fundo da data; para adicionar uma imagem troque por: background: url(URL DA IMAGEM) no-repeat;
  • box-shadow: 2px 3px 5px #fcc; = sombreamento.
  • border-radius: 50px; = arredondar.
  • border: 3px solid #fcc; = cor e estilo da borda.
  • width:50px; e height:60px; = largura e altura.
  • float:left; = aparecer a esquerda do post; se quiser a direita troque por float:right;
  • text-align: center; = alinhamento do texto no centro.
  • font-family: 'Kavoon'; = tipo da fonte.
  • font-weight: bold; = fonte em negrito.
  • color:#FF9FA5; = cor do número do dia.
  • padding: 0 0 8px 0px; = posicionamento.
  • font-size:20px; = tamanho do texto do dia.
  • padding:12px 0 0 0; = posicionamento do dia.
  • 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.
E é isso. Os créditos já estão lá no início do post. Apenas mudei as cores e uma coisinha aqui e ali :3

Essa foi a forma que fiz. Visualize e se não tiver dado certo dessa maneira, pode tentar dessa aqui do Mundo Blogger:

Beijus...

12 comentários:

  1. o blog está fofo, parabéns!

    http://crazyferraz.blogspot.com.br/

    ResponderExcluir
  2. Uau! que lindo o estilo de data, amei o tutorial ^_^ sempre arrasando!

    Ah, mudei de layout, queria que você desse uma olhada nos 'blogs que amo' hihihi

    Mudamos de layout // Adolescente Nerd

    ResponderExcluir
    Respostas
    1. Obrigada e com certeza passo lá no blog que adoro!!!
      Bjus …

      Excluir
  3. Olá!
    Já apliquei o código no meu blog mas, estou com dificuldade de alinhar a data de calendário com o titulo da postagem.
    Ficou um espaço enorme entre a data e o titulo da postagem.
    Tô penando aqui pra alinhar. Já tirei um pouco de padding, já aumentei e nada de alinhar como sua data e o titulos das postagens de seu blog.
    Pode tirar-me essa duvida? Em que padding devo mexer pra alinha como esta no seu blog?
    Obrigada desde já pela atenção
    P.S. se eu continuar com esse código postarei os creditos na minha página, ok? Abraços

    ResponderExcluir
  4. Tente alterar os valores em margin, principalmente o -70px.
    Ok e beijuus ;3

    ResponderExcluir
  5. Oi, eu usei o código no meu blog, mas eu não estou conseguindo colocar a data dentro do bloco do post, quando eu edito o -70px, o calendário some, provavelmente ele fica por trás do bloco do post.

    Eu uso outro código, mas separar as postagens no modelo viagem, tem como resolver meu problema?

    pixelsflamejantes.blogspot.com

    ResponderExcluir
    Respostas
    1. Aqui continuou dando certo; testei novamente no modelo Viagem personalizado pelo Designer do Blogger com um código de separação de postagens e a data ficou bem próxima do título.
      Tente ir testando valores no local do -70px, valores negativos e positivos, e também adicione/remova valores em margin e padding.

      Excluir
  6. Eu queria saber, como você fez para mostrar as postagens em caixinhas tão organizadas. Eu amei!

    http://mundootomee.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Nesse layout já veio tudo pronto :3
      Mas conheço uma forma de se fazer isso e posteriormente posso postar para vcs ^^
      Beijinhus <3

      Excluir
  7. Oieeee!!! Axei super bem explicadinho como alterar a html!!!
    Porém estou com um problema e talvez vc possa me ajudar!!
    Eu tirei os códigos que deixam a data dos post visiveis... para fazer algumas alterações que eu acabei nem fazendo...
    Esqueci...rsrs... e p/ complicar eu SALVEI... ou seja não consigo localizar as linhas que precisam ser mudadas .. não encontro nenuhma parte... =/
    E agora?? Estou sem data! Como eu faço p colocar uma data na minha postagem?!?!

    ResponderExcluir
    Respostas
    1. Você não salvou um backup? Aí era só usar seu modelo de backup e refazer as alterações que fez neste atual sem alterar a data.
      No post Exibir data em todas as postagens no Designer de Modelo do Mundo Blogger a autora mostra alguns trechos de códigos referentes a data; talvez te auxilie a localizar algo referente.
      Lá no layout também, em Postagens no blog, veja se a caixinha de data em Opções da página de postagem está marcada para ficar visível.
      Se não resolver e vc não quiser alterar o html, acho que seria legal usar um widget em forma de calendário dos arquivos do Mundo Blogger que mostra um calendário de postagens por data, mês, tudo organizadinho...
      Espero ter ajudado ^^
      Beijus...

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart