[Tutorial] Como colocar Botões de compartilhamento de redes sociais nas postagens do Blog

Hoje vamos aprender a adicionar os botões de compartilhamento no rodapé das postagens no Blog, assim como esse da imagem acima. Eles são muito bons para divulgar suas postagens nas redes sociais.
Então vamos ao Tutorial:

1º Passo: Vá no Painel do seu blog, layout, Editar html e dentro do código de seu blog, procure pelos seguinte trecho.


<div class='post-header'>
ou

    <div class='post-header-line-1'/>

Adicione o código da caixinha, abaixo do trecho encontrado. Os botões ficaram na parte de cima da postagem, do lado da data.

<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/pt_BR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == "item"'>
<div id='pin-wrapper' style='float: left; margin:0px 0px 0px 30px; width:44px;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<style type='text/css'>
#pin-wrapper > a {background-image:none !important;}
</style>
</b:if>
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->
 <div class='clear'/>

Agora Para adicionar os botões no rodapé das postagens, procure por esse trecho. Abaixo dele cole o código que está na caixinha acima.


<div class='post-footer'>

    <div class='post-footer-line post-footer-line-1'>

Para os seus botões funcionarem corretamente, não esqueça de desmarcar as opções de compartilhamento padrão do blog nas suas postagens assim como mostra a imagem abaixo.