Mensagens no rodapé dos posts

Mensagens no rodapé dos posts

6 10 99
Mensagens no rodapé dos posts 10 6 99
Que tal colocar um convite, no rodapé de todos os seus posts, convidando seus leitores para que assinem os feeds do seu blog ou para te seguir no Twitter ? Ou mesmo qualquer mensagem que seja importante para o seu ´público? Eu já havia feito um tutorial em 2008, que acabou ficando desatualizado, então hoje iremos rever como implantar essa função.
Antes de começar, faça um backup do seu template. Como se trata de um tutorial avançado, NÃO PROSSIGA, caso não se sinta apto (a) para fazer alterações no html do seu template.
Eu vou usar 2 modelos com imagem -  assine os feeds e siga no Twitter e um só com texto.

Convite para assinar os feeds
Assine o feed deste blog ou receba todos os artigos por email.
Encontre uma imagem de 32 x 32 px. Hospede-a na sua conta do Picasa ou no serviço de hospedagem de sua preferência. Copie a url da imagem. Cole no bloco de notas.

Entre no FeedBurner, procure pela aba publicize e pelo link (fica na coluna da esquerda)  email subscription. Copie o código que fica em Preview subscription link:

Agora, copie o código abaixo e substitua URL DA IMAGEM  pela url da imagem que você hospedou no Picasa. Em URL DO FEED DO SEU BLOG, coloque a url do feed do seu blog (rs) e em URL DO FEED POR EMAIL, coloque a url que você copiou do Feed Burner.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table
style="border: 2px solid rgb(204, 204, 204); background-color: rgb(239, 239, 239); width: 100%; height: 40px; text-align: left; margin-left: auto; margin-right: auto;"
cellpadding="4" cellspacing="4">
  <tbody>
    <tr>
      <td align="undefined" valign="undefined"><img
alt=""
src="URL DA IMAGEM"
style="width: 32px; height: 32px;" align="middle" /></td>
      <td style="text-align: left;"><span
style="font-weight: bold;"></span><b>Assine o <a
href="URL DO FEED DO BLOG">feed </a> deste blog ou receba todos os artigos
por
<a href="URL DO FEED POR EMAIL">email</a></b>.<br />
      </td>
    </tr>
  </tbody>
</table>
</b:if>
Vá em layout>editar HTML, clique em expandir modelos de widgets e procure por:
<div class='post-footer'>
Cole o código já modificado em cima dessa linha:

Você pode adaptar o texto (em vermelho) conforme suas necessidades, bem como as cores da borda e do background (plano de fundo). Veja aqui uma tabela de cores.
Para mudar a cor da borda, altere os números (em verde) deste trecho do código:
border: 2px solid rgb(204, 204, 204);
E para mudar a cor do plano de fundo, altere:
background-color: rgb(239, 239, 239);
Posts anteriores que irão te ajudar a implementar esse recurso:
Convite para seguir no Twitter
Siga-nos no Twitter e fique por dentro de muitas novidades!
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table
style="border: 2px solid rgb(204, 204, 204); background-color: rgb(239, 239, 239); width: 100%; height: 40px; text-align: left; margin-left: auto; margin-right: auto;"
cellpadding="4" cellspacing="4">
  <tbody>
    <tr>
      <td align="undefined" valign="undefined"><img
alt=""
src="http://lh6.ggpht.com/_mcq01yDJ2uY/S2RVxWzkEbI/AAAAAAAABSE/uT16McxNjlI/twitter-32x32.png"
style="width: 32px; height: 32px;" align="middle" /></td>
      <td style="text-align: left;"><span
style="font-weight: bold;"></span><b>Siga-nos no <a
href="URL DA CONTA DO TWITTER">Twitter </a> e fique por dentro de muitas novidades!</b><br />
      </td>
    </tr>
  </tbody>
</table>
</b:if>  
Mensagem sem imagem
Assine o feed ou receba os artigos por email. E siga o blog no Twitter!
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table
style="border: 2px solid rgb(204, 204, 204); background-color: rgb(239, 239, 239); width: 100%; height: 40px; text-align: left; margin-left: auto; margin-right: auto;"
cellpadding="4" cellspacing="4">
  <tbody>
    <tr>
      <td style="text-align: left;"><span
style="font-weight: bold;">Assine o </span><a
style="font-weight: bold;"
href="URL DO FEED">feed </a><span
style="font-weight: bold;">ou receba os artigos por </span><a
style="font-weight: bold;"
href="URL DO FEED POR EMAIL">email</a><span
style="font-weight: bold;">. Siga o blog no </span><a
style="font-weight: bold;"
href="URL DA CONTA NO TWITTER">Twitter</a><span
style="font-weight: bold;">!</span><br />
      </td>
    </tr>
  </tbody>
</table>
</b:if>  
Este truque funciona perfeitamente nos template do Dicas Blogger, mas não tenho como garantir que irá funcionar nos demais modelos disponibilizados na web.
Ah, sejam criativos e não copiem o modelo usado aqui no Dicas Blogger O.o :P
39 Comments
Comments
  1. Oi Juliana, dá gosto de ler sus dicas. Sempre completas e com riqueza de detalhes. Parabéns.

    Com certeza implementarei algumas. Mas só depois de descobrir como traduzo os feeds do Feedburner para português.

    um abraço

    Açaí Grosso

    ResponderExcluir
  2. Juliana,adorei a dica. ;)
    Sempre com os melhores artigos!

    ResponderExcluir
  3. Açaí, para traduzir os feeds, leia meu post "Riqueza da nossa Blogosfera" (link do @hordones)

    ResponderExcluir
  4. Mas se quiser pode deixar abaixo da caixa de comentários,não é? Adicionando o código na parte de gadget>>HTML/JavaScript>> depois arrasta para postagens no blog.

    ResponderExcluir
  5. Dicas Blogger esta de parabens com os artigos.

    ResponderExcluir
  6. Juliana
    Nem vou tentar. Demasiado difícil para mim.

    ResponderExcluir
  7. Vou colocar em meu blog! Suas dicas são as melhores, aprendo a cada dia mais e mais!!

    ResponderExcluir
  8. Funcionou perfeitamente no meu blog!
    Parabéns Juliana!

    ResponderExcluir
  9. Tava precisando mto disto!!!
    Obrigado pelo excelent post!
    Deve ser parecido mas um post atualizado sobre como inserir um texto logo acima deste formulario de comentário e como remover a opção Anonimo seria bem vindo!
    Sds,
    Stallone For Ever!

    ResponderExcluir
  10. Fundionou no Planeta ebaaaaa \o/
    Como adoro esse Blog!! Confira lá, eu achei um Mimo!!!
    Obrigadíssima!!!!

    ResponderExcluir
  11. Relembrar... foi bom, pois acrescentei o @twitter

    Boa Semana!

    ResponderExcluir
  12. Ju, amo seu blog e sus dicas cada vez mais estou acresentando coisas novas no meu blog e esto cada vez mais melhorando ele obrigado por tudo, Funcionou perfeita mente no meu blog.bjss

    ResponderExcluir
  13. Gostei muito da postagem, era o que eu precisa pra dar aviso a todas as postagens de uma vez. Muito obrigado pelo tutorial, eu havia pedido muito tempo atrás, e só agora fez um, mais tá valendo, muito obrigado e o blog tá show.

    Abraços,
    Charles.

    ResponderExcluir
  14. Oi Juliana,

    adorei essa dica e já coloquei no meu Blog (http://floresiflores.blogspot.com), com uma pequena modificação, eu estava precisando muito mesmo dessa dica (risos)párabens.
    Quando você puder, poste como fazer para que os visitantes compartilhe o Blog no Orkut da mesma maneira

    ResponderExcluir
  15. Olá Juliana, já soua costumado a mexer com códigos, HTML, entretanto, não consigo colocar rodapé em meu blog, mesmo possuindo o templete do Dicas Blogger. Faz tempo que tento colocar um rodapé nesse estilo mas nunca funciona. Se pudesse me ajudar a descobrir a razão ficaria eternamente grato. Obrigado e abraços.

    ResponderExcluir
  16. Igor, repita o processo. Os meus templates são totalmente compatíveis com essa dica.

    ResponderExcluir
  17. puxa! super bacana a sua dica! estava precisando fazer isso no meu blog a tempoooo! valeu mesmo e parabéns pelo seu trabalho!

    ResponderExcluir
  18. Já falei que gosto demais de suas dicas. Facilitam pra caramba na execução de uma das coisas que mais gosto atualmente: mexer nos meus blogs. valeu, Jú, por mais essa dica!

    ResponderExcluir
  19. Juliana mais uma super dica, mais do que aprovada! Já adicionei no Lost in Chick Lie e adorei =o*

    ResponderExcluir
  20. Olá, Juliana

    Tentei por várias vezes colocar no meu blog Receitas Saborosas (http://recantodarose.blogspot.com/) a Mensagem sem Imagem, mas todas as vezes apareceu a seguinte mensagem: "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 entity name must immediately follow the '&' in the entity reference."
    No blog uso o template Flowers - Dicas Blogger e tenho o tutorial que você indicou em 2008, mas gostaria muito de atualizar para este novo, poderia ajudar a solucionar o problema?
    Desde já agradeço.

    Abraços,
    Rose

    ResponderExcluir
  21. Rose, fiz um teste usando o template Flowers e funcionou perfeitamente. Não esqueça de marcar a caixa "expandir modelos de widgets"

    ResponderExcluir
  22. Olá, Juliana

    Finalmente consegui incluir no meu blog Receitas Saborosas (http://recantodarose.blogspot.com/) a "Mensagem sem Imagem", mas tive que fazer uma pequena alteração para funcionar: deixei apenas uma vez a instrução "span
    style="font-weight: bold;". Ficou perfeito e sem problemas.
    Grata pela dica.

    Abraços,
    Rose

    ResponderExcluir
  23. julianaa obrigado pela dica;
    usei sua dica para por um link de compartilhamento
    do orkut no rodapé; mais a imagem do link fika transparente na frente de todos os post's na pagina inicial =x

    sabe oque eu poderia fazer pra mudar isso?

    ResponderExcluir
  24. Quando vou visualizar as modificações, aparece essa mensagem:

    "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 reference to entity "loc" must end with the ';' delimiter."

    Coloquei exatamente como vc falou. :( Pode me ajudar?

    ResponderExcluir
  25. Dicas Blogger sempre na frente.
    As vezes eu fico pensando, como encontrar tanto conteúdo atualizado e com muita utilidade em um lugar só?
    Desde que comecei minha vida de blogueiro, o DB tem sido essencial no meu crescimento!
    Obrigado Juliana!

    ResponderExcluir
  26. Vou construir um altarzinho aqui pra ti e rezar agradecendo todo dia, hahahaha! Santoooo Dicas Blogger! Parabéns!

    ResponderExcluir
  27. Olá Juliana. Parabéns pelo seu trabalho fantastico. Olha, eu fiz tudo como voce mandou, não deu problema pra gravar a implementação mas simplesmente nao aperece nada disso nas postagens. Alias observei que outras dicas que voce tem, ja tentei fazer no template stype que é o que eu uso e nao funciona. Me ajuda por favor. Meu blog é ericauad.blogspot.com ou www.acesseimovel.com

    ResponderExcluir
  28. Outra opção seria deixar o texto (no caso o html) a ser exibido como base (em configurações) para todos os posts criados.

    ResponderExcluir
  29. Eu ponho o primeiro, mas aparece:
    Não foi possível analisar o seu modelo por não estar bem formado. Certifique-se de que todos os elementos XML estão fechados correctamente.
    Mensagem de erro de XML: The element type "a" must be terminated by the matching end-tag "".

    Eu expando os modelos de widget, se me puder ajudar agradeço!

    Este é o meu blog http://eujogador-pt.blogspot.com

    ResponderExcluir
  30. Continuo aguardando resposta ao meu problema...
    Desde já obrigado!

    ResponderExcluir
  31. JT, leia os termos d euso do blog.
    Grata.

    ResponderExcluir
  32. Olá Juliana, já li e peço desculpa pelo meu erro, mas se me podesse ajudar com este meu problema, agradecia :D
    Desde já obrigado e desculpe ter desrespeitado as suas regras :s

    ResponderExcluir
  33. Olá, Ju, visito seu site todos os dias para ver dicas aos iniciantes, assim como eu sou um, gostaria de saber, do mesmo jeito que você fez este, como você fez o que está no seu blog agora, sou "criança" =D obrigado.Belo tutorial!!

    ResponderExcluir
  34. Olá, Ju, visito seu site todos os dias para ver dicas aos iniciantes, assim como eu sou um, gostaria de saber, do mesmo jeito que você fez este, como você fez o que está no seu blog agora, sou "criança" =D obrigado.Belo tutorial!!

    ResponderExcluir
  35. Parabéns pela dica, fica muito bonito e é muito útil.

    ResponderExcluir
  36. Excelente, com um pouquinho de paciência consegui colocar um texto e arrumar os links da minha maneira, Parabéns Juliana mais uma vez!

    ResponderExcluir
  37. Olá !!!

    Nossa, procurei isso na net dias e nada, os que achei não funcionavam...
    Adorei os modelos que compartilhou e utilizei o último colocando link pro Facebook !!

    Obrigadíssimo !!!
    Um abraço

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top