Mensagens no rodapé dos posts

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:

• Hospedagem gratuita de arquivos
• 15 sites para busca de ícones web
• Backup no Picasa de imagens contidas nos templates

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