Hoje vou ensinar como personalizar o rodapé das postagens como este que tem aqui no Notícia e blog, este rodapé permite o leitor enviar a postagem para as principais redes sociais e também exibe os artigos relacionados vamos então ao primeiro passo da personalização, lembrando que este hack foi produzido pelo
Usuário Compulsivo todos os créditos a ele:
Veja abaixo as alterações que iremos fazer:
- Adicionando os Artigos Relacionados no rodapé
- Adicionar CSS
- Incluir layout de impressão
- Substituir link de enviar postagem por e-mail
- Substituir o rodapé
1.Adicionando os Artigos Relacionados no rodapé*:
Atenção para a adição deste hack é imprescindível a adição do hack acima.
2.Adicionar a CSS
1.Faça login no Blogger
2.Vá para "Layout"->"Editar HTML"->Marque a caixa "Expandir Modelos de Widgets"
3.Adicione o código abaixo no seu template observe a nota:
.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
----------------------------------------------- */
Nota: O código em vermelho é apenas uma referência de onde deve ser colocado o código se não encontrar o código em vermelho coloque antes de ]]</b:skin> , o código em azul é as cores personalize de acordo com seu template.
3.Incluir o layout de impressão
O layout de impressão define no template que quando for imprimir imprima apenas a postagem e os comentários, e não imprima a sidebar e os gadgets insira o código abaixo antes de </head> do 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>
Nota: O código em vermelho é apenas uma referência de como deve ser posicionado o código.
4.Substituindo o link de encaminhar postagem por e-mail
Para não haver duplicidade de links para encaminhar por e-mail será necessário eliminar um desses links para fazermos isso procure pelo código abaixo e apague no seu template:
<!-- 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>
5.Substituindo o rodapé original pelo personalizado
<div class='post-footer-line post-footer-line-4'>
<b:if cond='data:blog.pageType == "item"'>
<h3>Artigos relacionados: </h3> <script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div>
Substitua o código acima por este código abaixo:
<div class='post-footer-line post-footer-line-3'/>
<b:if cond='data:blog.pageType == "item"'> <!-- 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 + "feeds/posts/default"' 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='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Enviar para o seu Twitter'>Enviar para o Twitter</a><br/>
<a expr:href='"http://ueba.com.br/NovoLink?url=" + data:post.url + "&titulo=" + data:post.title' target='_blank' title='Enviar para o Uêba'>Enviar para o Uêba</a><br/>
<a expr:href='"http://dihitt.com.br?botao=enviar&url=" + data:post.url + "&title=" + data:post.title' title='Recomendar este artigo no diHITT'>Recomendar no diHITT</a><br/>
<a expr:href='"http://rec6.via6.com/link.php?url=" + data:post.url + "&titulo=" + data:post.title' target='_blank' title='Recomendar este artigo no Rec6'>Recomendar no Rec6</a></p>
<a expr:href='data:blog.homepageUrl + "feeds/" + data:post.id + "/comments/default"' 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 -->
6.Visualize e salve as alterações.
