Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1508408623
Vida do cache: 1508451823
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Hospedagem - 728 x 90

Postagens

Personalizar a Data do seu Post em forma de calendário

Resolvi trazer esta dica sobre como personalizar a Data do seu Post em forma de Calendario.
Vou postar aqui o que eu aprendi com a ajuda deste tutorial que vi no Templates para Você, com algumas alterações que fiz, tentando explicar de maneira mais simples. Os créditos são todos de lá.

[becape]É sempre bom lembrar que, antes de realizar qualquer edição no html do seu template, é altamente recomendável fazer um backup.[/becape]

O primeiro passo é alterar o formato da data, no menu “configuração” no painel do blogger, e para isso você deve Clicar em “Configurações » Idioma e Formatação » Formato da data” e escolha o formato: 19 janeiro 2013, conforme imagem demonstrativa abaixo:
configurar data painel blogger

Salve as configurações.

Feito isso, você deve modificar o HTML do seu template e para isso, vá no menu “modelo » Editar HTML”
Localize a linha:
</head>

Cole ABAIXO dela o seguinte código:


<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<div class='fecha_dia'>"+da[0]+"</div>";
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>";
anio = "<div class='fecha_anio'>"+da[2]+"</div>";
document.write(dia+mes+anio);
}
</script>

Salve as modificações.

Agora você deve colocar a data ao lado do título do post, e para isso, volte no menu “modelo » Editar HTML” e clique “Expandir modelos de widgets” e Localize as seguintes linhas:


 <b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

E cole logo abaixo dela:


<a expr:name='data:post.id'/>

 

Agora você deve configurar a data para o formato vertical. Veja como:
Substitua a linha:


<h2 class='date-header'><data:post.dateHeader/></h2>

Pelo código abaixo:


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

 

Para configurar a imagem ou bloco da data você deve copiar este código abaixo e colar acima da tag: ]]></b:skin>


#fecha {
color: #464646; /*Edite a cor da data*/
padding: 0px 0px 0px 0px; /*Altere as margens internas da data*/
margin-right:5px; /*Altere a Margem externa direita*/
float:left;
text-align:center;
border: 1px none #dedede; /*Coloque borda se quiser*/
list-style:none;
display: block;
}
.fecha_dia {
display:block;
font-size:18px; /*Tamanho da fonte*/
line-height:16px; /*Altura da Linha*/
font-family:'Arial';
letter-spacing:-1px
}
.fecha_mes {
font-size:10px; /*Tamanho da fonte*/
line-height:9px; /*Altura da Linha*/
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px; /*Tamanho da fonte*/
line-height:8px; /*Altura da Linha*/
display:block;
}

 

Caso você queira incluir uma imagem/icone na data, acrescente estas linhas a seguir dentro do bloco de código em: #fecha


background: url(URL DE SUA IMAGEM) no-repeat;
width:XXpx; /*Largura da imagem*/
height:XXpx; /*Altura da imagem*/

Em “width e height” coloque o tamanho da largura e da altura da sua imagem.
Por exemplo: se a sua imagem tem um tamanho de 50×50, inclua:
widht:50px;
height:50px;

 
Caso o título do seu post fique acima da data, você deve configurar os comandos margin e padding para que tudo fique alinhado.
Conforme vai alterando,vá visualizando os resultados.

[dica]DICA: Experimente inserir a linha: margin-left:35px; no titulo do post no comando .post h3{ [/dica]

Segue abaixo links onde você poderá fazer download de alguns icones de imagens para data em forma de folhas de calendário, vale a pena conferir:
Icones para Data



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

46 Comentários

  1. Oi Clau, uso esse recurso há muito tempo, e só agora resolvi te perguntar o seguinte:

    Tem como OCULTAR a imagem de fundo da data nas PÁGINAS do blog, pq as imagens aparecem nos títulos das páginas só quem sem data?

    Será que tem Solução? Olha esse blog que acabei de entregar:

    http://www.petitefleury.com

    Beijo grande e muito Obrigada! Adoro o Mundo Blogger, sempre recomendo como fonte de estudo e consultas para meus clientes, valeu demais!

  2. Muito interessante,preciso pegar o jeito!

  3. Kassia disse:

    Uso blogger, fiz tudo certo como vc disse só q a data ficou descentralizado na imagem (background) que usei, ficou muito em cima
    meu blog , ainda está em construção e este nome é soh por enquanto.

    • Vanessa disse:

      @Kassia:
      Lamento, mas eu não tenho como te ajudar, pois pode ser algo relacionado ao seu template e para tentar descobrir, teria que ser feita uma análise mais minuciosa, e infelizmente eu não disponho de tempo para isso. De qualquer forma, agradeço pelo comentário.

  4. Cheias de Conteúdo disse:

    Clau se eu te disser q simplesmente a data ñ mudou vc acreditaria? Pois ér… ñ mudou nada, refiz tudo umas 1000 vezes q nada mudou… eu uso o modelo simples do blogger, tem algo a ver om isso?

  5. Luana Souza. disse:

    A minha não apareceu a imagem :S

  6. Babi Drumont disse:

    Não deu certo Clau!
    A data não ficou vertical e eu tentei.
    A imagem não apareceu e coloquei!
    nem a cor que eu pus não ficou.0
    me ajuda?

  7. Natália disse:

    Mais um tuto que deu certo pra mim. To amando isso aqui *-*

  8. victorzazuela disse:

    Clau, muito obrigado.
    No meu caso, ficou o calendário à esquerda, mas acima do titulo dos artigos/posts. Até aí, achei bem interessante, mas em algumas postagens o calendário tem ficado no meio, muito estranho. Além disso, antes de carregar a página completamente, alguns artigos/posts ficam inteiramente esprimidos no centro – Tem alguma idéia do porquê disso.

    bjs na alma

    http://qaeqse.blogspot.com

  9. Rayanne disse:

    Eu queria saber, o porquê de no meu, aparecer duas datas. Uma na imagem, e a outra normal, acima da imagem. Já fucei tudo e não resolvo. Pode me ajudar?

  10. Jolie1 disse:

    Clau… Já tem uns anos que vc postou esse tutorial, mas espero que possa me ajudar pois o seu blog é de grande ajuda para nós que estamos iniciando.
    Bem… deu tudo certo com o tutorial na internet explorer e no Chrome, mas, quendo coloquei no Firefox, não aparece a data com a imagem, apenas no modo vertical personalizado…
    Vi alnguns blogs que usou o seu código e eles funcionam no firefox.. apenas o meu que não!!!

    O que pode ser?!
    Me ajuda!!!

    Parabéns pelo blog!!!

  11. .:: Clau ::. disse:

    Fabiana
    Repito que já disse no meu comentario anterior: Tais recursos variam de template para template. Sendo assim, não tenho como te ajudar.

  12. Por Fabiana! disse:

    Olá Clau tudo bem?

    fiz o tutorial 4 vezes contudo ñ consegui vincular a imagem. Só a nivel de esclarecimento o data ficou assim:

    24
    julho
    2011

    não entendi o q deu errado. Por favor me ajude.

    aguardando retorno.

    ps: parabens pelo excelentissimo blog.

    essa e a url do meu blog:

    http://oquetodamulhergostariadeter.blogspot.com/

  13. .:: Clau ::. disse:

    Não, Como Assim?
    Tais recursos podem variar de template para template. Sendo assim, não tenho como te ajudar.

  14. Não, Como Assim? disse:

    oi… eu nao consegui… tentei varias vezes… talvez seja pq meu template nao eh em minima, da uma olhada pra ver se consegue me ajudar de alguma forma pf… http://naocomoassim.blogspot.com
    obg… adoro o mundo blogger

  15. .:: Clau ::. disse:

    Dá uma lida neste tutorial:
    Mostrar a data nos posts de um mesmo dia

  16. : disse:

    Olá Clau?

    Queria um ajudinha…
    Coloquei a data no modo calendário, mas queria que mostrasse em todos os posts, inclusive nos posts do msm dia, mas não consigo, Se existe algum código que eu possa acrescentar?
    será que vc pode me ajudar?

  17. Lucas Rafael disse:

    O Meu dá erro!

  18. .:: Clau ::. disse:

    blogattao
    Tais recursos variam de template para template. Sendo assim, não tenho como te ajudar.

  19. blogattao disse:

    Olá Clau, queria uma ajudinha sua. 😀

    Então, eu queria colocar a minha data na vertical, mas só que no meu html não tem a tag "h2 class='date-header'>/h2" Ela está dessa forma:

    b:if cond='data:post.dateHeader'>
    div class='mobile-index-date'>
    div class='date-header'>
    span /span
    /div
    /div
    /b:if

    Já substitui pela tag que você pede, mas mesmo assim n da…

    E tem outra coisa, por mais que eu configure a data da forma que você fala no 1º passo, ela não fica do jeito que tem que ficar.

    Espero que você enha entendido a minha duvida, e que possa me ajudar 😀 Bjs

  20. .:: Clau ::. disse:

    ServidorFederal
    É só trocar o float:left por float:right.

  21. ServidorFederal disse:

    Olá amigo, parabéns pelo blog. Como façao para a data ficar a direita do post, ao invés de fizar a esquerda? Obrigado!

  22. Kevvin Oliveira disse:

    Olá! Refiz o tutorial mas nada =/. E o pior de tudo, é que o estilo que está acima de ]]> nem funciona. Para testar, fiz um blog de testes e fiz o tutorial no template Mínima 2006, e funcionou! Acho que esses templates do designe de modelo é que não prestam =/. Se você conseguir encontrar algum modo de fazer esse código funcionar nos templates do design de modelo me fale ok?
    PS: Espero não ter atrapanho vc =).
    Abraços!

  23. .:: Clau ::. disse:

    Kevvin Oliveira
    Verifique se vc não fez alguma coisa errada, ou se há alguma configuração diferente para os titulos dos posts.

  24. Kevvin Oliveira disse:

    No meu não funciona, sempre fica acimado do título do post. Eu usu o templates do designe de modelo. Alguém pode me ajudar?

  25. Kevvin Oliveira disse:

    O meu ficou acima do título do post. Como faço para ela ficar ao lado do título do post.

  26. ::Clau:: disse:

    @Portal do Photoshop:
    Vc vai ter q ir editando as medidas e ir visualizando e testando até ficar conforme vc quer.

    @Santiago Régis:
    As vezes a gente aplica um tutorial na pressa e dá errado…por isso eu sempre aconselho: se não deu certo, tente novamente, refaça q na maioria das vezes dá certo isso. Q bom que conseguiu. 😉

  27. Santiago Régis disse:

    Clau, acho q acabei me desesperando rsrs
    apaguei tudo e refiz tudoooo de novo pela 3º vez
    e tudo certinho..
    muito obrigado pelos tutoriais 😀

  28. Santiago Régis disse:

    Olá Clau fiz o tutorial, bastante simples e claro
    mas aconteceu um probleminha que deve ser parecido com os outros colegas, pelo que li nos comentarios..
    no meu caso, coloquei as datas à esquerda com um imagem decalendario no fundo, até aí tudo bem.. mas nas postagens do mesmo dia nao aparece a imagem do calendario nem a data configurada a esquerda. E olha que eu tbm já fiz o outro tutorial que vc indicou pra colocar datas nas postagens do mesmo dia..
    poderia me ajudar?
    grato

  29. Portal do Photoshop disse:

    Olá, consegui fazer o tutorial, mais a data do post fica no canto da postagem, eu queria saber como que faz para o calendário ficar ao lado do título do post.
    Obrigado!

  30. ::Clau:: disse:

    @Alessandra:
    Obrigada por me alertar, já corrigi o link dos ícones. Erro na hora de digitar. =)
    Fico feliz que tenha conseguido e gostado, obrigada pela visita e volte sempre que precisar.

  31. Alessandra disse:

    Clau primeiro de tudo obrigada pelo tutorial, é mais simples do que uns que eu encontrei por aí…
    Mas olha, o link com ícones não está funcionando =/

  32. ::Clau:: disse:

    @RFCM:
    Eu não entendi muito o que vc quer, mas dá uma lida neste post: "Configurar Data da Postagem", talvez possa ajudar.

    @Caio Almeida:
    Eu acredito que vc terá que configurar o widht e height na imagem que vc quer usar.

  33. Caio Almeida disse:

    Porr favor me ajuda, eu fiz tudo certinho, deu tudo certo, menos uma coisa, sempre que coloco a imagem do calendário, ela fica muuito pequena.

    Não sei por que, ja tentei todas os ícones, mais sempre ficam pequenos, por favor dê uma olhada no meu blog e me ajuda.

    Aguardo respostas
    Caio Almeida – Kubo Negro.

  34. Rita, a dogmática disse:

    Olá. Desculpe, mas pus um tutorial e devo ter feito asneira. Agora aparece sempre o mes e o dia debaixo do titulo, a esquerda. Como posso fazer com que isso nao apareça? Obrigado :) *

  35. .:: Clau ::. disse:

    @1Lenin 1 Blog:
    O Tinho já havia vindo aqui perguntar a mesma coisa que vc..e eu respondi.
    Dá uma lida neste tutorial.
    Lembre-se: procure sempre ler os comentários publicados abaixo dos tutoriais, pois sua dúvida pode já estar respondida.

  36. 1 Lênin 1 Blog! disse:

    oii seu oi de novo ;PP
    desculpa ser chato, mas olha só, há um pequenno problema, talvez seja só no meu template ou sei lá que aconteça isso…
    sempre quando faço mais de um post por dia e que a data é igual o calaendario some, não aparece junto ao titulo ;s
    será o que que é?
    agradeço desde já!

  37. ::Clau:: disse:

    @1 Lênin 1 Blog:
    Os códigos que eu posto aqui sempre são testados e utilizados no Template Minima. Qdo é aplicado em template modificado, as vezes dá alguma diferença mesmo, por isso é bom sempre que instalar algum Hack, ir editando os códigos até que fique tudo de acordo com o template que está usando.
    Vc fez corretamente em editar o seu até atingir o visual que vc queria!
    Sobre a imagem, as vezes é problema do site que vc usou para hospedar a imagem.
    Imageshack e Tinypic as vezes dá problema mesmo, procure sempre hospedar suas imagens no Picasa ou mesmo no próprio Blogger.
    Se quiser dá uma lida Aqui.

  38. 1 Lênin 1 Blog! disse:

    cara na verdade não,
    é que tive que cola esse codigo

    "div id='fecha'>
    scriptremplaza_fecha('data:post.dateHeader');script
    div>"

    embaixo deste:

    "h3 class='post-title entry-title'>"

    só assim fico direitinho, mas antes tinha ficado desalinhado com o titulo do post ;/
    dae eu fiz daquele jeito e funciono, só que dá um bug as vezes sei lá e em alguns posts a imagem não aparece ;/
    será o que que é??

    abração!

  39. .:: Clau ::. disse:

    @1 Lênin 1 Blog:
    Pelo que vi no seu blog está tudo certo, ficou bom.

  40. 1 Lênin 1 Blog! disse:

    cara fico bem abaixo do titulo a esquerda ;s
    que que deu será??

  41. Tinho disse:

    Deu certo!!
    Mais uma vez obrigado pela ajuda, seus tutoriais são de fácil entendimento e têem sido muito úteis pra mim.:)

  42. ::Clau:: disse:

    Tinho:
    Ah, agora entendi o que vc quise dizer!
    Isto é um bug do proprio blogger.
    Dá uma lida neste tutorial e veja como contornar esse bug.

  43. Tinho disse:

    Eu uso o blogger, o caminho é um pouco diferente , esta em configurações, mas esta tudo habilitado. A data aparece, mas se eu fizer mais de uma postagem no dia, ela só aparece na ultima postagem, nas outras não.

  44. ::Clau:: disse:

    Tinho:
    Vc tem que ver se está habilitada o aparecimento de data nas postagens.
    Dá uma olhada neste tutorial aqui.

  45. Tinho disse:

    Ola!!
    Eu segui este tutorial e deu tudo certo, mas como faço para a data aparecer em todas as postagens?
    Mais uma vez obrigado!

Desculpe, os comentários deste artigo estão desativados.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.