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é*:
Para adicionar veja está postagem: Exibindo artigos relacionados (Blogger/Blogspot)
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
Agora vamos alterar o rodapé que é a parte principal deste hack,como foi dito no começo deste hack é necessário ter o hack Exibindo artigos relacionados (Blogger/Blogspot) para que funcione.Procure agora pelo código abaixo no seu template:
<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.
11 Comentários
Como você, eu também uso esse rodapé personalizado. Já fiz várias mudanças e ficou bem legal no meu blog.
Abraços.
Maravilhoso post este sobre optmização de blog
@LCF obrigado por gostar
Oi ja tenho este no meu blog, queria que fizesse um post falando como colocar os icones ao lado, assim como tá no usuario complulsivo, obrigada,
@Marilucia , posso sim em outra postagem
Muita bacana, mas eu tentei e não consegui. Fiz tudo e não vi alteração no blog.
@Tarcicio Andrade..
Ola. E se a única modificação que eu quiser fazer for incluir o botão DiHITT? Ja personalizei o envio de e-mail e acrescentei resposta do autor e agora quero incluir o botão DiHITT no fim de cada postagem. Po favor, me ensine como, grata, Gisele.
Morri de medo mas acabei de colocar e funcionou muito bem!
Muito Obrigada!
Adicionei o printfriendly, mas qdo clico só vai o post. não vão os comentários. como faço?
Tem como colocar no rodapé, estes links abaixo:
Mostrando postagens mais recentes com o marcador PERIGO PARA CALO. Mostrar postagens mais antigas
Pois os meus estão em cima da postagem.
Desde já agradeço
Postar um comentário
Deixe seu comentário aqui
Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.