ARQUIVO DO BLOG EM FORMA DE CALENDÁRIO

08 junho 2016


Mais uma aula da nossa série layout dos sonhos, e hoje trago o passo a passo de um arquivo em forma de calendário, que por sinal é bastante útil para gerar tráfego, pois ele mostra ao leitor os posts da semana, dando-o a opção de clicar no artigo que ele deseja ler.  Na aula passada disponibilizei 4 modelos de newsletter para você personalizar o seu FeedBurner, não deixe de conferir.  Agora vamos ao tutorial!


1. No painel do blogger, procure por LAYOUT - ADICIONAR UM GADGET - ARQUIVO DO BLOG e o configure dessa maneira:

2. Agora vamos botar a mão na massa, e fazer o gadget funcionar. Vá em MODELO - EDITAR HTML e dentro da caixa de códigos, clique na opção Ir para um widget e depois em BlogArquive1 como mostra a imagem:


3. Você será direcionado ao código do arquivo. Apague tudo que estiver entre <b:widget id='BlogArchive1' e </b:widget> com é ilustrado na imagem:



No lugar, cole o seguinte código:





4. Agora procure por </head> e ACIMA desse elemento, cole o código:


5. Vamos dar cor e forma ao nosso calendário. Pesquise por ]]></b:skin> e acima dessa linha, coloque o seguinte código:


Clique em visualizar modelo, se estiver tudo ok, é só salvar!


Sobre o 3º código...

Destaquei as áreas mais fáceis para se modificar, mas caso você tenha um conhecimento avançado em css, fique a vontade para deixar calendário do seu jeito. Entendo melhor:

#F7819F / Rosa claro - referente a cor de fundos dias da semana. (Dom, Seg,Ter...)

#2E64FE / Azul - referente a cor da fonte da data do post. (ilustrada pelo número 27)

#FE2E64 / Rosa escuro - referente a cor da fonte da data do post ao passar o mouse.



#A9BCF5 / Azul claro - referente a cor de fundo da data do post.

Atenção: Jamais esqueça de fazer um backup do seu template antes de realizar qualquer personalização, pois caso ocorra algum erro, você não perderá o seu template.


CONCLUSÃO

Os códigos são enormes por isso optei em armazena-los no site Dropbox, onde você tem a opção de baixar ou somente copiar os códigos. Caso seja novo nesse ramo de personalização, é normal ficar com receio de estragar o seu template, por isso te dei a dica de fazer em um blog de testes ou salvar o seu template antes de começar. O segredo é ler e reler o tutorial quantas vezes achar necessário para não haver erros.

Espero que tenha gostado, e se tiver qualquer dúvida, deixe nos comentários. Não esquece de clicar em "curtir" abaixo dessa postagem e de seguir o blog para não perder as novidades.  Um super beijo e até a próxima!

4 comentários:

  1. Boa tarde, eu gostaria que postasse um tutorial sobre como personalizar o rodapé do blog, consegui colocar um fundo como background e gadgets por cima deste fundoo para o modelo mínima.

    ResponderExcluir
    Respostas
    1. Olá Thaís! Anotei a sua sugestão de post.
      Em breve farei um tutorial sobre o rodapé.
      Bjs

      Excluir
  2. No meu blog não deu muito certo, ta dando erro na hora de salvar o código no meu template... Enfim, mesmo assim adorei o tutorial, muito bem explicadinho, parabéns ♥ Uma beijoca


    Blog Querida Hanny

    ResponderExcluir
    Respostas
    1. Olá Hanny,

      Bom minha linda, eu não imagino o que pode estar dando erro, pois o tutorial está corretíssimo, faz o seguinte. Faça em um blog de teste, limpo, pq talvez o seu blog esteja poluído de JavaScript e isso está causando o erro. Se der certo em blog de teste, refaça o seu layout nele, sei que terá trabalho, mas é a única alternativa.

      Espero ter ajudado! Bjão :*

      Excluir