Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1498248146
Vida do cache: 1498291346
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

Novo Blogger Postagens

Data dos posts em formato calendário no Designer de Modelo

[alerta] Este tutorial serve apenas para quem usa os templates Designer de Modelo.
Se você usa template mínima, ou persoanlizado, leia este artigo: Personalizar a data do post em forma de calendário[/alerta]

Eu já publiquei um artigo onde eu ensino a Personalizar a data do post em forma de calendário, só que aquele tutorial não se aplica aos templates novos do Blogger, o Designer de modelo.
Depois do lançamento dos novos templates Designer de Modelo, alguns dos hacks que já publicamos não funcionam nestes modelos.
Este mês resolvi dar uma especial atenção a este modelos de templates e, assim, fazer diversos testes, aplicando alguns dos tutoriais que publiquei, a fim de verificar possíveis mudanças, erros etc.

Se você está usando os novos templates Designer de Modelo do Blogger,o método postado anteriormente para personalizar a data em forma de calendário não funcionará.

data calendario designer de modelo

Demo

Veja a seguir como proceder para personalizá-la no Designer de Modelo.

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

Configurar a data dos posts em formato calendário

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

2º passo: incluir o script para o bom funcionamento deste hack.
No painel do blogger, acesse o menu “modelo » Editar HTML” e 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.

3º passo: colocar a data ao lado do título do post e fazer com que ela fique no formato vertical.
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'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          <div class="date-posts">
        </b:if>
        <div class='post-outer'>

((Veja imagem))
data dos posts em formato calendário

SUBSTITUA a linha:


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

Por esta:


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

4º passo: Para acrescentar estilos ao bloco da data você deve acrescentar códigos css.
Localize a tag: ]]></b:skin> e cole logo ACIMA dela:


/* Data
------------------------- */
#fecha {
color: #464646; /*---Edite a cor da data---*/
padding: 8px; /*--- margens internas da data---*/
margin-right:10px; /*---Margem externa direita---*/
background: #eee;  /*--- cor do fundo---*/
border: 4px solid #ccc;  /*---cor da borda---*/
float:left;
text-align:center;
list-style:none;
display: block;
-moz-border-radius:80px;
-webkit-border-radius:80px;
border-radius: 80px;
width: 30px ; 
height: 30px;
}
.fecha_dia {
display:block;
font-size:20px; /*---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;
}

Se quiser incluir uma imagem na data, modifique estas linhas a seguir dentro do bloco de código em: #fecha
Substitua:
background: #eee;
por:
background: url(URL DE SUA IMAGEM) no-repeat;
Em width: 30px e height: 30px substitua 30px pelo tamanho da largura e da altura da sua imagem.



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. Victor disse:

    Funcionou mas não ficou do lado titulo :( ficou acima do titulo.

  2. Gian disse:

    Show de bola deu certo aqui, quebrei a cabeça mais consegui.

  3. Leticia disse:

    Oi Vanessa, obrigado por compartilhar, usei e deu super certo.
    Só gostaria que a data aparecesse em apenas na primeira postagem do dia. Qual a linha do código que tenho que apagar para que fique essa configuração? Se puder me ajudar, agradeço imensamente.
    bjs

    Leticia

  4. mil coisas disse:

    Oi
    eu fiz tudo direitinho no meu blog, mas so apareceu a data e nao o circulo. O que fiz de errado???
    Obrigada

  5. Jéssica disse:

    Oie:) Adorei o tutorial, já tinha visto varios e sempre sem sucesso, o seu foi o unico que consegui fazer!! Parabéns!!

  6. Dani disse:

    Olá vanessa! Olhe, estou com dificuldades de com o passo 3 neste post. Não consigo expandir widget na nova aparência do HTML. Pode me ajudar?

  7. Marhcella Guimarães disse:

    tentei localizar as linhas do terceiro passo e nao consigo :(

  8. Malu disse:

    Pode me ajudar. Comecei a personalizar blogs com a plataforma do minima. Mas quando fui trocar o template do meu blog que estava na modelo viagem a data em forma de calendário sumir, o leia mais não aparece personalizado, a fonte do texto dos posts não tá a que coloquei e o titulo não tá centralizado.

    Pode me informar como resolver isso?

    • Vanessa disse:

      Infelizmente não tem como resolver. A única coisa é que vc terá que instalar todos esses recursos no novo template, pois qdo trocamos de template, os recursos não o acompanham. Lembre-se que os recurso sempre ficam instalado no template e não no blog.

  9. Wagner_P disse:

    menina , vc é uma linda! obrigado pela dica funcionou direitinn…
    tem como alterar a cor do circulo que envolve a data??? tá cinza, qqueria outra cor

  10. Celina Alves disse:

    Olá Vanessa, usei esse tutorial no meu blog e deu certo, obrigada por compartilhar.
    BjoBjo;)
    Celina Alves
    Loja Luxos e Luxos
    Blog Luxos e Luxos

  11. Vanessa, Tem como trocar a opção do footer ” 3 comentários” por uma imagen ? Tem um tutoriail aqui no blog ? Eu não achei..

    Muitos web designers fazem isso, e eu queria fazer no meu blog !!
    Teria um modelo especifico ?

    Obrigado …

  12. Deu certo quase tudo , o que não deu certo foi que a data não ficou do lado do titulo da postagem.

  13. NEO disse:

    Vanessa
    Na Página inicial funcionou perfeitamente, já nas páginas que criei (contato) não apareceu a data, apenas circulo.

  14. NEO disse:

    Vanessa tem algum link com sugestão de calendário?

  15. NEO disse:

    Obrigado!

    No meu BLOG deu certinho, só prestar atenção no 3º PASSO, ao procurar , o meu encontrou 3 linhas iguais a essa, ae é só observar como na imagem do tutorial o que vem abaixo do codigo, se estiver igual é essa.

    Vanessa no BLOGGER ao invés de comentar com o login do GOOGLE ou ANONIMO teria como apenas com nome e e-mail?

  16. Paulo Rocha disse:

    Ótima dica, vou ver se coloco no meu blog. Valeu!

  17. Valeu Vanessa!

    Segui as instruções direitinho, pelo modelo Window, nativo do novo Blogger e deu certinho. Continue com seu trabalho em prol de ajudar os leigos em customização de blogs.

  18. Wallison Oliveira disse:

    Efetuei todas alteracoes mas nao deu certo. Sugestoes??
    Obrigado

    • Vanessa disse:

      Deve ser algo relacionado ao seu modelo.

      • Wallison Oliveira disse:

        Desculpe ter enviado mais de 1 comentario, masé que deu erro ao enviar e pensei que nao tinha ido.
        Mas enfim, pode me ajudar em algo?

        • Vanessa disse:

          Como vc pode verificar, isso não aconteceu no blog de testes que eu usei para aplicar este recurso (veja blog Demo). O modelo que utilizei para testes é o Modelo Travel, do designer de modelo.Porém, alguns recursos podem variar de template para template.
          Sendo assim, lamento, mas não tenho como te ajudar, de qualquer forma agradeço pelo comentário.

  19. Jaqueline disse:

    Oi Vanessa,

    Tentei aplicar o tutorial no meu blog, mas não consigo fazer algumas alterações, como cor, direção da data. Ela ficou no formato vertical, mas está localizada acima do texto e não consigo mudá-la.
    Todas as alterações que faço no 4º passo parece não serem “computadas”. Você sabe o que pode ser?!

    Abraços,
    Jaqueline

    PS: Seus tutoriais são ótimos. Tenho usado vários para personalizar meu blog. Obrigada!

    • Vanessa disse:

      Certifique-se se colou os códigos css do passo 4 corretamente, principalmente se colou ACIMA da tag “b:skin”

  20. Boa noite. Com o intuito de agradecer aos serviços prestados, e de não desmerecer esse “metablog” conceituado, cujo qual já utilizei inúmeras vezes, reservei no meu blog um espaço para agradecer vocês. Podem conferir no endereço: http://uontem.blogspot.com.br/p/agradecemos-prezadamente-ao-mundo.html
    Não quero desperdiçar seu tempo, então em último, desejo que continuem sempre atendendo as pessoas – as que merecem – com dinamismo e respeito. Parabéns, e até mais.

  21. Felipe disse:

    To tentando editar esse template aqui e queria saber se vc pode ensinar a tirar o resumo de postagem, queria que aparecesse a postagem toda sem ”leia mais” , pode ajuda ?

  22. Ana disse:

    O meu ta dando erro tb (Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente. Mensagem de erro em XML: The element type “div” must be terminated by the matching end-tag “”.
    Error 500). Uso o travel do design de modelo. O que pode está dando errado?

  23. Ana disse:

    O 3º passo não existe no designer do travel. O que fazer? :/

    • Vanessa disse:

      Existe sim Ana, eu testei no Travel. Veja a imagem com atenção que ela irá te auxiliar a identificar o código que vc deve localizar.

  24. Herlan Santos disse:

    Olá Vanessa.

    Gostei muito do artigo, estava precisando disso para um blog meu, vou tentar adicionar e depois venho mostrar o resultado aqui.

    Abraços!

  25. 100 Idei@s disse:

    Uso um template personalizado que não tem data
    Esse tutorial serve no meu caso?

    • Vanessa disse:

      Não sei te informar, pq depende muito do modelo do seu template. Este tutorial se aplica apenas nos modelos DESIGNER DE MODELO.

  26. Jeanne disse:

    Boa tarde!
    Ao tentar fazer os passos, à partir do 3º começa a dar este erro no blogger: Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente. Mensagem de erro em XML: The element type “div” must be terminated by the matching end-tag “”.

    Error 500

    Sendo que segui exatamente todos os passos descritos no post. Pode me ajudar?

  27. Gíh Santos disse:

    Hum na substituição no 3º Passo esta dando erro. Dizendo que a formatação esta inadequada. Já refiz varias vezes mas continua no erro.:/

    Uso o template Mínima. O que será que esta acontecendo?

    • Vanessa disse:

      Este tutorial serve apenas para quem usa os templates Designer de Modelo. No inicio do post eu explico isso, e tem um link do artigo para quem usa template minima.

  28. Alma de Adra disse:

    Acho que deve ser um erro, eu não posso aplicá-la, repeti os passos várias vezes. De qualquer forma, aproveitar a oportunidade para agradecer por tudo que você traz.

  29. Marcos Araújo disse:

    O segundo passo falta a linha e o código.

  30. Marcos Araújo disse:

    Vanessa, você não colocou o 2º passo. Falta a linha e o código.

  31. NEO disse:

    ficou confuso o passo 2 e passo 3, ” e localize a linha:” mas não tem nada…

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

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