Postagens Vanessa S.
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:
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 = '<data:post.dateHeader/>';</script>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>
<b:else/>
<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</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
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!
Muito interessante,preciso pegar o jeito!
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.
@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.
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?
A minha não apareceu a imagem :S
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?
Mais um tuto que deu certo pra mim. To amando isso aqui *-*
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
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?
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!!!
Fabiana
Repito que já disse no meu comentario anterior: Tais recursos variam de template para template. Sendo assim, não tenho como te ajudar.
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/
Não, Como Assim?
Tais recursos podem variar de template para template. Sendo assim, não tenho como te ajudar.
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
Dá uma lida neste tutorial:
Mostrar a data nos posts de um mesmo dia
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?
O Meu dá erro!
blogattao
Tais recursos variam de template para template. Sendo assim, não tenho como te ajudar.
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
ServidorFederal
É só trocar o float:left por float:right.
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!
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!
Kevvin Oliveira
Verifique se vc não fez alguma coisa errada, ou se há alguma configuração diferente para os titulos dos posts.
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?
O meu ficou acima do título do post. Como faço para ela ficar ao lado do título do post.
@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. 😉
Clau, acho q acabei me desesperando rsrs
apaguei tudo e refiz tudoooo de novo pela 3º vez
e tudo certinho..
muito obrigado pelos tutoriais 😀
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
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!
@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.
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 =/
@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.
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.
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 🙂 *
@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.
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á!
@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.
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!
@1 Lênin 1 Blog:
Pelo que vi no seu blog está tudo certo, ficou bom.
cara fico bem abaixo do titulo a esquerda ;s
que que deu será??
Deu certo!!
Mais uma vez obrigado pela ajuda, seus tutoriais são de fácil entendimento e têem sido muito úteis pra mim.:)
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.
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.
Tinho:
Vc tem que ver se está habilitada o aparecimento de data nas postagens.
Dá uma olhada neste tutorial aqui.
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!