Cursos 24 Horas - Cursos 100% Online com Certificado

Personalizando o rodapé das postagens - Blogger

11 Comentários Autor : Notícia e blog 11 outubro 2009

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:

  1. Adicionando os Artigos Relacionados no rodapé
  2. Adicionar CSS
  3. Incluir layout de impressão
  4. Substituir link de enviar postagem por e-mail
  5. 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 == &quot;item&quot;'> 
<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 == &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 -->




6.Visualize e salve as alterações.

    11 Comentários

    Jonathan Hess disse...
    11 de outubro de 2009 12:56 #

    Como você, eu também uso esse rodapé personalizado. Já fiz várias mudanças e ficou bem legal no meu blog.

    Abraços.

    LCF disse...
    21 de outubro de 2009 08:04 #

    Maravilhoso post este sobre optmização de blog

    Notícia e blog disse...
    21 de outubro de 2009 14:44 #

    @LCF obrigado por gostar

    Marilucia disse...
    13 de novembro de 2009 00:50 #

    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,

    Notícia e blog disse...
    13 de novembro de 2009 05:51 #

    @Marilucia , posso sim em outra postagem

    Tarcicio Andrade disse...
    31 de março de 2010 19:51 #

    Muita bacana, mas eu tentei e não consegui. Fiz tudo e não vi alteração no blog.

    Banda disse...
    10 de agosto de 2010 20:05 #
    Gisavasfi disse...
    20 de outubro de 2010 01:53 #

    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.

    J. Cordeiro disse...
    1 de novembro de 2010 19:24 #

    Morri de medo mas acabei de colocar e funcionou muito bem!
    Muito Obrigada!

    Mamãe Carlinha e Papai Bruno disse...
    17 de julho de 2011 23:42 #

    Adicionei o printfriendly, mas qdo clico só vai o post. não vão os comentários. como faço?

    mauricio disse...
    13 de outubro de 2011 20:55 #

    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.