Aprenda como personalizar a data do seu blog | Quero Dicas Quero Dicas : Aprenda como personalizar a data do seu blog

Quero Dicas : Aprenda como personalizar a data do seu blog

Aprenda como personalizar a data do seu blog

|

Aprenda como personalizar a data do seu blog

Olá, pessoal. Este foi o meu primeiro tutorial aqui no Quero dicas, ensinando como personalizar a data das postagens no blog. Este código, deixa a data ao lado do titulo, tanto ao lado direito, quanto para o lado esquerdo.

Eu busquei em vários blogs mais não encontrei nenhum que funciona-se, então depois de muito quebrar minha cabeça eu consegui.

Infelizmente, muita gente está tendo dificuldade em arrumar a data dentro da imagem ou tentando achar algum dos códigos do tutorial. Por isso, eu testei e achei uma forma muito mais simples.
É muito mais fácil. Vamos lá?

Já está pronto o tutorial em vídeo no final da postagem, em caso de dúvidas. =D
Caso não consigam, eu criei este outro tutorial para personalizar a data com imagem. Clique e veja o post

  Tutorial


Antes de começarmos, faça um backup do seu template caso você queira voltar a versão anterior ou dê algum tipo de erro. Não fazer fazer um backup? Não tem problema, veja este tutorial.

1 - Altere primeiramente a data do seu blog, deixe dia, mês e ano (sem virgula ou "de"). Há duas maneiras de fazer isso. veja:

1º Opção: Vá em Layout, entre em Postagens no blog e faça a alteração, como já informado (sem "virgulas" ou a palavra "de" entre elas) ou

2º Opção: Vá em configurações, Idiomas e formatação e altere a data do mesmo jeito.
Veja a imagem abaixo: (amplie se desejar)

 

Agora que você já alterou a data, vamos editar o HTML

1 - Vá em Painel, Modelos e Editar HTML.

2 - Quando abrir, procure por </head>.  Abaixo dele, cole o seguinte código:

Clique aqui para pegar o Script

3 - Depois, procure pelo código abaixo.
Procure pela primeira linha deste código, assim será mais fácil!
 
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/></h2>
</b:if>


4 - Você encontrará três. Mais, a alteração só será feita no primeiro encontrado. Ao encontrá-lo, logo abaixo dele, cole este seguinte:

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

Ficando assim. Veja na imagem abaixo ↓


5 - Agora, neste mesmo código que achamos e adicionamos o código acima, veja este trecho:

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

6 - Substitua ele todo por esse:

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


 
7 - Agora procure pelo código: ]]></b:skin>

 ]]></b:skin>

 

8 - Cole acima dele o código abaixo:
 

/*Data personalizada www.querodicasde.com.br*/

#fecha {
display: block;
float:left;
margin: 0px 0px 0px 0px;
padding: 5px 0px 0px 0px;
color: #000;
font-weight: 400;
background: url('SUA IMAGEM AQUI') no-repeat;
line-height:17px;
list-style:none outside none;
margin-left:-17px;
margin-right:10px;
margin-top:-10px;
padding-top:15px;
font-family:arial;
 
text-align:center;
width:75px;
height:81px;
}

}
.fecha_dia {
display:block;
font-size:18px; /*Tamanho da fonte*/
line-height:16px; /*Altura da Linha*/
margin: 0 5px 0 0px; /*margin caso não esteh=ja centralizado*/
font-family:'Arial';
letter-spacing:-1px
}
.fecha_mes {
font-size:10px; /*Tamanho da fonte*/
line-height:9px; /*Altura da Linha*/
margin: 0 5px 0 0px; /*margin caso não esteh=ja centralizado*/
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px; /*Tamanho da fonte*/
line-height:8px; /*Altura da Linha*/
margin: 0 5px 0 0px; /*margin caso não esteh=ja centralizado*/
display:block;
}
 /*Fim do código*/


9 - Salve.

Agora na parte escrita "COLOQUE AQUI A SUA IMAGEM", coloque a sua coloca o URL da imagem que você hospedou. Não sabe como hospedar? Veja algumas dessas postagens:


10 - Faça as alterações no código como: Largura, altura, se quer no lado esquerdo e ajuste a imagem dentro da imagem, enfim... Tenha calma e paciência e vá ajustando. Deixei tudo ao lado onde você poderá ajustar.

Abaixo, algumas imagens pra você pode usar ou se basear.

    
    

Beijinhos
Caso não consigam, eu criei este outro tutorial para personalizar a data com imagem mais facilmente. Clique e veja
Tutorial em vídeo atualizado 

Compartilhe


81 comentários:


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço!

Apenas peço que leia:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com palavras de baixo calão, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

Beijinhos ♥

  1. Eu amei, porem fez coisas erradas, porque nao consegue colocar a minha imagem , infelizmente, mas amei muito todos os seus tutorias, pois comecei meu blog a um mes !! Obrigada mesmo, Grata Jennifer

    ResponderExcluir
    Respostas
    1. Olá Juniper. Muito obrigada por sua atenção, estou muito grata! Agora...
      O que está dando errado na sua instalação? Se quiser eu te ajudo, sem problemas! =D Beijos

      Excluir
    2. Desculpa pelo nome errado :( Jennifer. Beijinhos ♥

      Excluir
  2. OI gostei muito do se tuto, pode me ajudar quero colocar menu no blog que estou montando só ñ sei como faze-lo ficar dropdown e como estiliza-lo com a forma que quero pode me indicar algo

    ResponderExcluir
    Respostas
    1. Olá Elaine, acabei de fazer uma postagem sobre seu pedido, veja: Menu Drop Down para Blog
      Mais a frente postarei outros estilos. E obrigada pela visita =D Beijinhos ♥

      Excluir
  3. Não sei fazer nada , tudo oque eu tento da errado :/ ... a minha data sumiu :(

    ResponderExcluir
    Respostas
    1. Oi Kemilly, manda pra mim e arrumo para você! e-mail: contatosbiabarros@hotmail.com
      Não esqueça de mandar o link da imagem, ok?! beijinhos ♥

      Excluir
    2. Faz para mim por favor eu envio para você email com meu dados da conta do blogue e você faz para mim!

      Excluir
    3. Olá. Anônimo.
      Faço a alteração, sem nenhum problema, você terá que enviar o link da sua imagem ou eu crio uma para você e claro, terei que ter acesso ao seu blog.

      Entre em contato comigo pelo e-mail: contatosbiabarros@hotmail.com

      Informando: Hoje é cobrado pelos serviços prestados

      Excluir
  4. A data do Blog sumiu!!! O que eu faço?

    ResponderExcluir
    Respostas
    1. Olá Blog Bille, está semana estarei fazendo um outro tutorial em vídeo ensinando passo a passo sobre colocar a imagem e ajustar a data dentro dela. Afinal, muito gente, está tendo dificuldade neste quesito. Espere só mais um pouquinho. Beijinhos ♥

      Excluir
  5. Respostas
    1. Olá Juliana Souza, como informei acima, está semana estarei fazendo um outro tutorial em vídeo ensinando passo a passo sobre colocar a imagem e ajustara data dentro dela. Afinal, muito gente, está tendo dificuldade neste quesito. Espere só mais um pouquinho. Beijinhos ♥

      Excluir
  6. Olá! O máximo que eu consegui fazer foi deixar a data na vertical. Por algum motivo, não consigo colocar a imagem de fundo, e tenho certeza que segui todos os passos. Meu template no blogger é o Travel.

    ResponderExcluir
    Respostas
    1. Olá Tiago, desculpe pela demora pela resposta correta :( O que deve estar acontecendo é: Você pode estar colocando o link da sua imagem errada ou não deve ter hospedado sua imagem corretamente na Web ou no seu próprio blog. Você tem que colocar todo o endereço da imagem corretamente dentro do local indicado (como no vídeo).
      Veja uma dessas postagens:
      Hospedar uma imagem no blogger ou
      Hospedar uma imagem na Web
      Atenção: O modelo Travel, infelizmente, dá alguns defeitos em alguns javascripts/códigos. Teste em outro modelo.

      Espero ter ajudado. =D

      Excluir
  7. Muito obrigada!!!! Adorei deu certo..

    ResponderExcluir
  8. Eu consegui fazer senhoor! Deu vários erros, não conseguia achar os códigos, achei um codigo parecido e cliquei sobre ele apareceu o código que eu estava procurando, então, obrigada! Muito obrigada, e eu acho que nunca vou aprender a usar HTML

    ResponderExcluir
  9. Eu queria colocar a imagem de fundo da data para a fora da postagem, só que fica dentro

    ResponderExcluir
    Respostas
    1. Oi May, este estilo não dá para ficar do jeito que me falou, mais veja esta postagem, Personalizar a data do blog - Modelo 3, este fica do lado de fora. Espero te ajudado =D Beijinhos ♥

      Excluir
  10. Esta bloqueada para copiar os links :/

    ResponderExcluir
    Respostas
    1. Oi Yasmim. Os links não estão bloqueados, a não ser o texto. Para você copiar é só selecionar dentro das "caixinhas de texto", onde estão os links para você colocar em seu blog/site e clicar sobre o link "Clique aqui para pegar o script" na outra página.
      Beijinhos ♥

      Excluir
  11. Não estou conseguindo copiar o HTML para por no meu , COMO FAÇO?

    ResponderExcluir
    Respostas
    1. Olá Yasmim. Para você conseguir copiar os códigos, clique dentro das caixinhas de seleção e com o botão direito do mouse, tecle em "selecionar tudo" e depois copiar. Pronto! Caso, não seja isso que esteja falando, explique-se melhor :-bd

      Excluir
  12. Ooie pf me ajuda eu fiz tudo certinho so nao ta entrando pf e ajuda :(

    ResponderExcluir
    Respostas
    1. Olá Jessica. O que exatamente "não está entrando"? explique melhor para que eu possa te ajudar.

      Excluir
  13. Nossa obrigada procurei muita na net ate achar seu tutorial, enfim deu tudo certo obrigada!
    ;)

    ResponderExcluir
    Respostas
    1. Que bom Jéu. Espero que encontre ainda mais coisas para você. Beijinhos ♥ e muito obrigada pela visita. :-bd

      Excluir
  14. Deu super certo o tutorial mas eu queria deixar a data na mesma linha do titulo da postagem, como faço? ta meio desproporcional...

    ResponderExcluir
    Respostas
    1. Oi Miah. O que estaria desproporcional? a data ou a imagem? Bom...
      Vá alterando os códigos que eu deixei escritos ao lado do código e veja se consegue corrigir o que quer. Por exemplo:
      padding: 15px 0px 0px 8px;
      margin-right:5px;
      line-height:16px;
      line-height:9px;
      line-height:8px;

      Espero ter ajudado. Beijinhos ♥

      Excluir
  15. O meu saiu certinho, o único erro é que não aparece em todas as postagens , o que eu faço ?

    ResponderExcluir
    Respostas
    1. Olá Dani. Como assim não aparece a data em todas as postagens? Se a sua personalização da data está certinha e aparecendo na tela home do seu blog, então terá que aparecer em todas elas.

      Excluir
  16. Eu consegui!!!! A muitooo tempo estava tentando vários tutoriais! Mas finalmente eu consegui colocar!!!
    Obrigada!!!!

    ResponderExcluir
  17. Consegui fazer tudo certinho, o único erro é que a data não aparece em todas as postagens. Ex: Se insiro uma nova postagem, a postagem de baixo desaparece a data.
    O que faço?

    ResponderExcluir
    Respostas
    1. Oi Amanda, infelizmente, não sei o que poderia estar causando este problema, caso eu tenha entendido. Até porque, não devia causar este tipo de erro de publicar uma postagem com data e a outra desaparecer. :/I nforme seu blog, para que eu possa te ajudar melhor. ;)

      Excluir
  18. Bia,
    Estou reformulando meu blog, segue link do blog. http://personalidadminha.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. OK Amanda. visitei seu blog e vi que ainda está em construção. Qualquer duvida é só falar. Beijinhos ♥

      Excluir
  19. Bem Funcionou , Mas não ficou do lado do titulo :(
    O que eu Faço ?

    ''http://www.putzvei.com''

    ResponderExcluir
    Respostas
    1. Olá Putz. Vi seu blog e altere as margin- e padding: até ajustar e coloca-la ao lado do titulo. Caso não consiga, será postado amanha, a partir das 8:30hr, outro tutorial com a mesma funcionalidade, com imagens, só que muito mais fácil.
      Bjs

      Excluir
  20. Respostas
    1. Olá Alice, fique tranquila ela existe e é ]]>
      Para achá-lo, tecle uma vez dentro do seu HTML e uma caixa de busca irá abrir coloque ]]> e clique Enter. Pronto!
      Preste atenção se a algum espaço depois de > pois não pode ter nungum. Tem que ficar "justinho" se não não vai encontrar realmente o código.
      Bijinhos ♥

      Excluir
  21. Oi, adorei, mas o que eu faço se aparecer "More than one widget was found with id: HTML17. Widget IDs should be unique." ???? :c

    ResponderExcluir
    Respostas
    1. Que bom que tenha gostado Catarina. Infelizmente, nunca apareceu esse tipo de erro (até agora). Caso queira não tenha visto, eu criei outro jeito de vocês instalarem a personalização da data. Clique e veja é muito mais fácil.
      Espero que tenha ajudado. Beijinhos ♥

      Excluir
  22. Parabéns pelo Blog e pelo Turorial, porém meu titulo da postagem ficou abaixo da imagem da data, como faço para ficar ao lado?

    ResponderExcluir
    Respostas
    1. Olá Jenny. Obrigada pelo comentário e pelo agradecimento, Tudo o que faço é para vocês mesmo.
      Bom em relação ao posicionamento, você deve ir fazendo alterações onde deixei escritas ao lado de todo o código. Caso não consiga ou tenha alguma dificuldade, eu criei outro tutorial com a mesma funcionalidade desta, só que muito mais fácil de fazê-lo.
      Acesse: Aprenda como personalizar a data com imagem facilmente
      Esoero que tenha ajudado. Beijinhos ♥

      Excluir
  23. Olá, bom, gostei do tuto, deu mais ou menos certo, kkkk eu consegui colocar, porém, minha data sumiu...

    ResponderExcluir
    Respostas
    1. Olá Lilian, realmente algumas pessoas tem um pouco de dificuldade na hora da instalação. Por isso, eu criei outro tutorial com a mesma característica que essa (colocar imagem ao lado do titulo). Acesse e veja se dá tudo certinho Aprenda como personalizar a data com imagem facilmente
      Não esqueça de comentar se deu tudo certinho lá, ok? kkk Beijinhos ♥

      Excluir
  24. Bia, estava quase desistindo de inserir esse formato no meu blog. Estava umas quatro horas tentando e nada. Até encontrar esse tutorial.
    Fiz uma mistura de outro código que tinha e por fim, consegui inseria o novo formato.
    Muito bom!!

    ResponderExcluir
    Respostas
    1. Que bom Deise que conseguiu, isso me deixa muito feliz =D sucesso no blog!

      Excluir
  25. Muito Obrigado!! Foi o primeiro tutorial q deu certo!! Sucesso.

    ResponderExcluir
    Respostas
    1. Que bom que tenha dado certo espero você novamente em outros tutoriais. =D Beijinhos ♥

      Excluir
  26. Olá, adorei é muito fácil de fazer, usei o verde no meu blog <3

    ResponderExcluir
    Respostas
    1. Que bom que tenha gostado Beatriz, isso me deixa muito contente =D

      Excluir
  27. Oi, adorei suas dicas, mas acontece que queria por a imagem mas com a data em cima da postagem, por extenso mesmo, normal. Como faço?? ME AJUDA POR FAVOR D; D;

    ResponderExcluir
    Respostas
    1. Olá Leticia.
      Com este mesmo tutorial dá para fazer este tipo de alteração. só que você terá que entender um pouco de CSS, ter calma e paciência, para que fique na posição que deseja.

      Vá na tag "DATA" e verá outras formas mais simples de alteração.

      Excluir
  28. Olááá.
    Eu fiz e funcionou no blog.. só nao consegui alterar o tamanho e tbm queria por em negrito e centralizado no meio.. mas nao sei como fazer.
    Mas.. no mais deu muito certo.

    Muito obrigada!!!!

    http://anapblog.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ola Ana,
      Eu deixei marcado ao lado de cada código como alterar e o que alterar, principalmente, para centralizar, caso, esteja deslocado o texto (data).
      Espero que consiga, é só seguir. =D
      Beijinhos ♥

      Excluir
  29. Eu nao acho o codigo que tem que copiar a primeira linha!->
    Me ajuuda!

    ResponderExcluir
    Respostas
    1. Oi Nayara.
      Procure então pela segunda linha e você terá algumas opções. Claro, veja se ela contem todos os outros códigos descritos como informando no tutorial.
      Caso não consiga, eu fiz outros tutoriais de personalização de data para blogs e uma delas é com imagem também, só que muito mais fácil de você conseguir. (Veja no marcador "Data")
      Espero ter ajudado. Beijinhos ♥

      Excluir
  30. oi tudo bem ?
    Olha eu fiz e ficou um xuxuzinho.. mais nao consigo centrelizar :( nem com vc marcando como e gostaria ate qe me auxiliasse em outra coisa.. na minha sidebar, meu widgets sao cortador no meio e só cabe um e meio, pode me ajudar ? por favor mesmo kkk um beijao !

    ResponderExcluir
    Respostas
    1. Olá Brubs.
      Em relação a data, no próprio código eu deixei marcado para ajustar a centralização. Vá alterando até ficar certo dentro da imagem.

      Em relação a sidebar, pelo que eu entendi, ela está no modelo de duas formas (1 é inteira e a outra é dividida, uma para cada lado, posicionada um pouco mais abaixo). Você deve ter colocado seus gadgets nesta que é dividida. Troque de lugar, posicionando na parte de cima do layout e depois salve a posição (botão laranja) e pronto.

      Espero que seja isso que entendi. Beijinhos ♥

      Excluir
  31. O ano não está aparecendo no meu :/

    ResponderExcluir
    Respostas
    1. Configure a data como corretamente. Como informei acima

      Excluir
  32. Olá, como eu faço para alinhar a data com o titulo do post?
    Amei o tutorial da data!

    ResponderExcluir
    Respostas
    1. Olá
      É só arrumar onde está escrito "margem caso não esteja centralizado"

      Excluir
  33. Bia, eu consegui fazer tudo. Mas ao concluir o minha sidebar saiu. Como faço para pôr de volta? Acho que os códigos alteraram isso.

    ResponderExcluir
    Respostas
    1. Oi Mayla.
      A data e a sidebar são códigos diferentes. Não há conflitos. O que pode ter acontecido é um erro seu mesmo, sem você ter notado.
      Faça novamente, ambas as alterações para que elas aparecem novamente.
      Espero ter ajudado.
      Beijinhos ♥



      Excluir
  34. Me ajudou bastante mas não consegui colocar a imagem da data mesmo copiei o endereço da imagem pelo seu blog e nada apareceu. :(

    ResponderExcluir
    Respostas
    1. Ola Sailloane.
      O endereço de imagem deve ficar entre aspas. Exemplo: " aqui dentro "
      talvez, sem querer você esteja apagando quando cola o endereço da imagem.
      Espero ter ajudado

      Excluir
  35. Oiee me ajudou bastante só de achar esse tutorial, mas a imagem ficou acima do post e nao do lado e a imagem nao coube toda. pode me ajudar? obrigada!

    ResponderExcluir
    Respostas
    1. Olá Bruna.
      Altere leff, e aumente width:75px e height:81px para o tamanho da imagem que você criou. Você também pode alterar onde está escrito margin para ajustar ao seu gosto.
      Espero ter ajudado
      Beijinhos ♥

      Excluir
  36. Simplesmente amei. E foi super simples de fazer, muito obrigada ♥

    ResponderExcluir
    Respostas
    1. Adoro quando você conseguem!
      Beijinhos ♥

      Excluir
  37. Bia, me ajuda por favor!
    Eu fiz tudo certinho, porém a imagem e a data ficaram por baixo dos posts, o que tenho que fazer para ficar por cima?

    ResponderExcluir
    Respostas
    1. Oi Magic. Como assim ficam por baixo dos posts? coloque o link do seu blog para que eu possa ver e tentar te ajudar.

      Excluir
  38. http://magic-beleza.blogspot.com.br/
    No caso, eu coloquei o mais pra cima que eu consegui para não tampar a data, porém, se eu colocar mais para baixo, o post fica por cima da imagem e da data também.

    ResponderExcluir
    Respostas
    1. Oi Magic. Dei uma olhada no seu blog e creio que você tenha colocado o código do item do numero 6 no local errado. Tente novamente =/

      Excluir
  39. Bia, fiz de novo passo a passo junto com o seu vídeo, acredito que colei os códigos certinho onde você colou os seus, mas, mesmo assim não vai. Você pode me ajudar?

    ResponderExcluir
    Respostas
    1. Oi Magic.
      Para eu poder ajudá-la como você me pede e necessita, terei que ter acesso ao seu blog (template) e este é um procedimento pago.
      Caso necessite dos meus serviços, entre em contato comigo por e-mail contatosbiabarros@hotmail.com

      Beijinhos ♥

      Excluir
  40. Ok! Muito muito obrigada pela sua ajuda! Seu blog é muito bom! Vou tentar mais algumas coisas, qualquer coisa eu entro em contato. bjsss ♥

    ResponderExcluir
  41. Uhullll!!!! Consegui! Muito obrigada pelas dicas e pela sua ajuda! Amei seu blog! bjsss =*

    ResponderExcluir
    Respostas
    1. Que bom Magic. Fico muito feliz! =D
      Beijinhos ♥

      Excluir

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Linkicha Atoananet Linkirado
subir