Como personalizar o rodapé dos posts*

Depois do lançamento do template compulsivo 2.0, passei a receber vários pedidos de tutoriais. Alguns já foram atendidos, como a Galeria de destaques, o Menu em abas e o Rodapé em colunas. Porém uma das solicitações mais recorrentes não havia sido atendida... Ainda.

Hoje vou mostrar como personalizar o rodapé dos posts no Blogspot. Incluindo um convite bacana para assinatura dos Feeds, artigos relacionados e opções para enviar por email, imprimir e incluir nos sites sociais, etc.

Depois de aplicar este tutorial, o rodapé dos seus artigos, nas páginas individuais do Blogspot, vai ficar assim:

O que precisa ser feito:

1. Incluir definições de formatação do rodapé no CSS;
2. Incluir o leiaute para impressão;
3. Substituir o link para encaminhar por email;
4. Substituir o rodapé original pelo código compulsivo.

Os avisos de praxe:

• Tente antes num blogue de testes;
• Faça um backup do seu template antes de começar;
• Leia o tutorial até o fim e tenha certeza de ter entendido.

Antes de mais nada você precisa ter configurado e funcionando o tutorial compulsivo para exibir os Artigos Relacionados no rodapé das postagens. Se ainda não tem, vai lá e configura que eu espero ;-)


1o. Passo - Incluir definições de formatação CSS;

Entre no modo de edição HTML do seu template no painel de controle do Blogger, marque Expandir modelos de widgets e vamos começar a trabalhar.

A primeira coisa a fazer é incluir as definições de formatação do rodapé dos posts no CSS. Cole o código abaixo antes do trecho referente as definições de formatação dos comentários, conforme o exemplo abaixo:

.post-footer a:link, a:visited {color: #333;}
.post-footer a:hover {color: #c60; text-decoration: underline;}
.post-footer ul {font-size: 120%; list-style: none; padding: 0; margin: .2em 0 0 0;}
.post-footer ul li {margin: 0; padding: 0;}
#subscribe {width: 100%; font-size: 120%; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 1em 0 1em; background: #eee;  padding: 5px;}
#post-footer-container {width: 100%; clear: both; min-height:140px;}
#relacionados {width: 250px; float: left;}
#mais-opcoes {width: 140px; float: right; padding-left: 5px; border-left: 1px solid #ccc;}

/* Comments
----------------------------------------------- */

OBS: Os valores destacados em azul são personalizáveis. Em vermelho são referências para ajudar a posicionar o código.


2o. Passo - Incluir o layout para impressão:

Agora vamos incluir o layout para permitir a impressão apenas do conteúdo do post e dos comentários, excluindo a sitebar e demais elementos. Cole o código abaixo antes do fechamento da TAG </head> no seu template:

<style media='print' type='text/css'>
#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}
#main-wrapper {width: 95%}
</style>

</head>

3o. Passo - Substituir o ícone para encaminhar por email;

Para não duplicar a opção de encaminhar postagens por email, localize e remova todo trecho de código a seguir. Não se preocupe, pois essa opção será incluida no rodapé mais adiante:

<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>
</a>
</span>
</b:if>

4o. Passo - Substituir o rodapé original pelo código compulsivo:

Agora vamos alterar o rodapé propriamente dito. Conforme observado no início deste tutorial, você precisa ter configurado previamente os Artigos Relacionados, para localizar o trecho de código abaixo no seu template:

<div class='post-footer-line post-footer-line-3'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h3>artigos relacionados</h3></b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>

Substitua tudo pelo código compulsivo personalizado a seguir:

<div class='post-footer-line post-footer-line-3'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- Exibir apenas nos permalinks -->
<div id='subscribe'> <!-- Personalizar Mensagem no rodapé dos posts -->
Gostou deste artigo? Então <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='faça seu comentário'>deixe um comentário</a> e assine nosso <a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='RSS Feed'>RSS Feed</a>.
</div> <!-- fim subscribe -->
<div id='post-footer-container'> <!-- Container: Relacionados + Opcoes -->
<div id='relacionados'> <!-- Artigos Relacionados -->
<h3>Artigos Relacionados</h3>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div> <!-- fim relacionados -->
<div id='mais-opcoes'> <!-- Personalizar Mais Opções -->
<h3>Outras Opções</h3>
<b:if cond='data:post.emailPostUrl'><span class='item-action'><a expr:href='data:post.emailPostUrl' target='_blank' title='Enviar por email'>Encaminhar por email</a><br/></span></b:if>
<a href='javascript:;' onclick='window.print();return false' title='Imprimir esta página (texto e comentários)'>Imprimir esta página</a>
<p><a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Enviar para o seu Twitter'>Enviar para o Twitter</a><br/>
<a expr:href='&quot;http://ueba.com.br/NovoLink?url=&quot; + data:post.url + &quot;&amp;titulo=&quot; + data:post.title' target='_blank' title='Enviar para o Uêba'>Enviar para o Uêba</a><br/>
<a expr:href='&quot;http://dihitt.com.br?botao=enviar&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='Recomendar este artigo no diHITT'>Recomendar no diHITT</a><br/>
<a expr:href='&quot;http://rec6.via6.com/link.php?url=&quot; + data:post.url + &quot;&amp;titulo=&quot; + data:post.title' target='_blank' title='Recomendar este artigo no Rec6'>Recomendar no Rec6</a></p>
<a expr:href='data:blog.homepageUrl + &quot;feeds/&quot; + data:post.id + &quot;/comments/default&quot;' title='Feed dos comentários deste artigo'>Feed dos comentários</a>
</div><!-- fim Mais Opções -->
</div><!-- fim Container: Relacionados + Opcoes -->
</b:if><!-- fim Exibir apenas nos permalinks -->

Visualize para ter certeza que não há nenhum erro, salve e está pronto!

Observação: Se não conseguir de primeira, continue tentando. Fiz exatamente conforme descrito neste tutorial e garanto que funciona. Os testes foram realizados no template Minima White que está disponível para download:

Mínima Compulsivo Rodapé Customizado
©2008 UsuárioCompulsivo - Alguns direitos reservados ;-)

* Conteúdo exclusivo desenvolvido na CCP**
** Central Compulsiva de POG!

Imagem topo: Tom Grundy