Como Colocar Redes Sociais no Final dos Posts do Blogger

Coloque a opção compartilhar postagens nas redes sociais no final das postagens de seu blog.

Apresentamos para você essa opção de muita importância em seu blog, que é a possibilidade de seus visitantes compartilharem apenas com um clique suas postagens nas redes sociais. Nesse código não há necessidade de nenhuma alteração, a não ser que você desejar personalizar com Css, aí fica a seu gosto.

Com uma aparência muito agradável e de fácil instalação você deixará essa ferramenta abaixo de suas postagens como irei lhe ensinar na sequência.

 Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog.

Tutorial

1- Acesse seu blogger, vá em "Modelo" e depois "Editar HTML".

2- Clique no código de seu template, pressione "CTRL+F" e pesquise por ]]></b:skin>

3- Logo ACIMA cole o seguinte código:

/* Social Bookmark Rodapé
--------------------------- */
.bookmarkbox {
}
.bookmarkbox h5{
color:#000;
font-size:18px;
font-family: 'Lucida Grande', Verdana, Sans-Serif;
font-variant:small-caps;font-weigth: normal;
}
.rsociais ul {
display:inline;
margin:0pt !important;
padding:0pt;
}
.rsociais li {
background:transparent none repeat scroll 0%;
display:inline;
list-style-type:none;
margin:0pt;
padding:2px;
}
.rsociais img {
border:0pt none;
float:none;
margin:0pt;
padding:0pt;
background:transparent;
}

4- Agora pesquise por <div class='post-footer-line post-footer-line-1'>
* Você poderá encontrar dois trechos desse código, caso isso aconteça opte pelo segundo.

5- Logo ABAIXO cole o seguinte código:

<!-- Social Bookmark - Inicio -->
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='left'><div class='bookmarkbox'>
<h5>Compartilhe este post!</h5>
<div class='rsociais'>
<ul>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='RSS Feed'><img src='http://i49.tinypic.com/5a4bb5.png'/></a></li>
<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='del.icio.us'><img src='http://i48.tinypic.com/33uygbs.png'/></a></li>
<li><a expr:href='&quot;http://digg.com/submit?phase=3&amp;url=&quot; + data:post.url' target='_blank' title='Digg'><img src='http://i50.tinypic.com/sebwph.png'/></a></li>
<li><a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Recomendar este artigo no Technorati'><img alt='Technorati' src='http://i48.tinypic.com/2dt3tjp.png'/></a></li>
<li><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Compartilhe no Facebook'><img alt='facebook' src='http://i45.tinypic.com/9i5pib.png'/></a></li>
<li><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Twitter'><img alt='Tweet this' src='http://i50.tinypic.com/11r9p8j.png'/></a></li>
<li><a expr:href='&quot;http://promote.orkut.com/preview?nt=orkut.com&amp;du=&quot; + data:post.url + &quot;&amp;tt=&quot; + data:post.title' rel='nofollow' target='_blank' title='Promova este post no orkut'>
<img src='http://i46.tinypic.com/sdzo7p.png'/></a></li>
</ul>
</div>
</div>
</div></b:if><!-- Social Bookmark - Fim -->

6- Clique em "Salvar Modelo".

Obs: Esse código está configurado para que as redes sociais apareçam apenas nas páginas das postagens.

Se você fez tudo como informado já estará funcionando perfeitamente em seu blog.

Deixe seu comentário, pois ele é a motivação para nosso trabalho.