Comofaz: agenda na lateral do blog

Se tem algo que eu não vivo sem é agenda! Sou bastante esquecida e se não anoto meus compromissos e tarefas em algum lugar, eu acabo deixando-os de lado. Quando vou ver, ou a data já passou ou está bem em cima da hora!
Isso acaba me deixando muito desorganizada no quesito tempo, o que reflete muito no blog. Por isso, há um tempo atrás, resolvi adotar a agenda do mês justo no local que passo mais tempo: o Julie de Batom. Assim, sempre que tiver um compromisso ou tarefa, vou me lembrar. Afinal, todo dia eu entro aqui. Impossível esquecer desse jeito!
Desde que coloquei a agenda na lateral do blog, muitos leitores me perguntaram como fiz isso. É bem fácil e não tem mistério nenhum. Mas, como recebi muitos pedidos, resolvi fazer um tutorial. Não é nada complicado e em cinco minutinhos você termina. Juro!
  • PASSO 01: Abra o Blogger e vá até Layout. Em cima coluna onde você vai adicionar a agenda existe a opção Adicionar um Gadget. Clique nele.
  • PASSO 02: Vai abrir uma janelinha com uma lista de gadgets que o Blogger oferece. Procure por HTML/JavaScript. Quando encontrar, clique no sinal de + ao lado.
  • PASSO 03: Em Título escreva o nome do gadget (por exemplo: Agenda, Agenda do mês, Agenda da semana, etc). No espaço do conteúdo, adicione o código abaixo:

<p>
<img src=”LINK DA IMAGEM” border=”0″ /> <b>01/01</b> – Tal compromisso
<br />
<img src=”LINK DA IMAGEM” border=”0″ /> <b>02/01</b> – Tal evento
</p>

Troque o que está sublinhado pela data e o que está em negrito pelo nome da tarefa. Já onde está o LINK DA IMAGEM, você tem que colocar o endereço da miniatura que vai representar aquele dia. Vai ficar assim:

<img src=”http://imageshack.com/a/img820/6825/l31v.gif” /> <b>06/11</b> – Entrega do áudioblog de Radiojornalismo

Para adicionar outra linha, basta copiar o código em vermelho e ir colando antes do </p>. Depois troque só as informações, como data, nome da tarefa e link da imagem. Assim:

<p>
<img src=”LINK DA IMAGEM” border=”0″ /> <b>01/01</b> – Tal compromisso
<br />
<img src=”LINK DA IMAGEM” border=”0″ /> <b>02/01</b> – Tal evento
<br />
<img src=”LINK DA IMAGEM” border=”0″ /> <b>03/01</b> – Tal evento 2
<br />
<img src=”LINK DA IMAGEM” border=”0″ /> <b>04/01</b> – Tal evento 3
<br />
<img src=”LINK DA IMAGEM” border=”0″ /> <b>05/01</b> – Tal evento 4
</p>

  • ONDE ENCONTRAR AS IMAGENS? As que eu uso no blog são do True-Luv. Lá tem vários pixels fofos para usar na agenda e estão disponíveis em várias cores. Para salvá-los, você precisa ir até esta página, escolher qual pacote quer e fazer o download. Depois de descompactar o arquivo, hospede as imagens na internet. Você pode usar o próprio Blogger. Para isso, crie uma nova postagem, vá no ícone de imagem no post, clique em procurar e selecione as imagens. Aí, para pegar o link é só clicar com o lado direito do mouse em cima dela e, depois, em copiar URL da imagem (isso se você usa o Chrome).
  • COMO RISCAR A DATA? Quando o evento ou a atividade já tiver passado, para “riscá-lo” é só colocar o código <s> antes do <b> e </s> ao fim do nome da tarefa. Ficará assim:

<img src=”http://imageshack.com/a/img820/6825/l31v.gif” /> <s><b>06/11</b> – Entrega do áudioblog de Radiojornalismo</s>

  • PASSO 04: Depois que tudo estiver ok, basta clicar em Salvar. Aí, é só arrastar o gadget para o local que você quer que ele fique na coluna e clicar em Salvar organização lá em cima da página. Prontinho!
Agora quero saber de vocês: gostaram do tutorial? Comentem aí! Qualquer dúvida, perguntem pelos comentários que eu respondo por aqui mesmo. Espero que tenham curtido, viu? E deixem sugestões para os próximos tutoriais! Quem sabe a sua dica não se torna o próximo post do JDB?

Comments

  1. sara sem h Avatar

    Bem legal o tuto, Julie! Já vi muita gente pedindo esse tutorial em outros sites de html. Vai ajudar muita gente 🙂
    Eu usaria, mas minha vida é tão tediosa e sem compromissos que, ficaria sem utilidade no meu blog UHEHEHEHEH 😛
    Kissus
    http://www.penseicliquei.blogspot.com

  2. Rebeca Pinho Avatar

    Tem tanto tenho que não venho no seu blog … O Layout está lindo, amei o tutorial, pena que estou pelo iPad então não dá pra fazer agora, mas assim que eu pegar meu Lap, vou fazer uma. Obrigada, beijos. http://cantinhodabecca.blogspot.com

  3. Rebeca Pinho Avatar

    Oi amor, tudo bem? Eu tentei fazer mas não deu muito certo, tudo ficou perfeito, menos a parte de, pq risca todos os dias. Me ajuda?

    http://cantinhodabecca.blogspot.com.br/

    1. Julie Duarte Avatar

      Oi, amr! Deve ser porque você não colocou o (sem o *, só o coloquei porque o blogger não aceita o código aqui hahaha) no final da linha. Tem que ficar igual o exemplo do post! :3
      Qualquer dúvida, me avisa que te ajudo!
      Beeeijos

    2. Julie Duarte Avatar

      mierda, não foi HUHAUHUAHUA é <*/*s*> (sem os *)

  4. Jhoyce Arruda Avatar

    Julie, ensina como fazer os dois menus iguais o do seu blog, queria fazer tipo assim no meu, mas não consigo ;( http://conexahollywood.blogspot.com.br/

  5. Juliana Barros Avatar

    Nossa, muito bom o tutorial!! E muito fácil ♥
    Valeu pela dica, Julie!! :*

  6. Lavynnya Vilaça Avatar

    Minha agenda está vazia mas eu vou usar o tuto no meu blog ^^
    questaoodeopiniao.blogspot.com.br

  7. Jayssa Silva Avatar

    Julie eu não consigo deixar só um evento riscado, toda vez quando coloco risca logo tudo. pode me ajudar?

    http://myheart-j.blogspot.com.br/

  8. Jayssa Silva Avatar

    Já consegui resolver o problema do riscado =), mesmo assim obrigada;

    http://myheart-j.blogspot.com.br/

  9. Mariana Mendes Avatar

    Adorei o tutorial! Consegui fazer direitinho!
    Muuuito obrigada!

  10. Julie da Silva Avatar

    Adorei queria mesmo saber como fazia isso!Estava louca para conseguir..Ficou ótimo o post, mas , seria melhor se tivesse um vídeo!Mas ficou tudo perfeitíssimo!!

  11. Henrique Erik Avatar

    adorei apostolosbanda.blogspot.com

  12. Alice Andrade dos Santos Avatar

    Adoooooooorei a dica, fiz isso no meu blog, agora só falta colocar gifs, efeitar, etc… *-*'
    http://meumundoentrerisosesorrisos.blogspot.com.br/

  13. 50 tons de Ironia Avatar

    Uhuul. Muito obrigada. Você me ajudou muito. 😀

  14. Camila Chagas Avatar

    Adorei! Muito obrigada :))

Leave a Reply to sara sem h Cancel reply

Your email address will not be published. Required fields are marked *