Adicionando botões de redes sociais para seu Blog

Veja como adicionar um Box Flutuante em suas postagens com os botões de compartilhar Tweet, Google+ e Facebook 

Veja um exemplo na lateral esquerda desse post ou na imagem abaixo.

Adicionando Box Flutuante

1. Passo - Assista o vídeo

2. Passo - Procure pela tag </head > e cole dentro (acima) o código abaixo - OBS>: Mude o usuário do Twitter. Procure pelo trecho: 'data-via='dicasquefunfa'

<b:if cond='data:blog.pageType == "item"'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(jQuery) {
var offset = jQuery("#fblog-box").offset();
var topPadding = 60;
jQuery(window).scroll(function() {
if (jQuery(window).scrollTop() > offset.top) {
jQuery("#fblog-box").stop().animate({
marginTop: jQuery(window).scrollTop() - offset.top + topPadding
});
}
else {
jQuery("#fblog-box").stop().animate({
marginTop: 0
});
};
});
});
//]]>
</script>
<style type='text/css'>
#floating-fblog {
    width:60px;
}
#floating-fblog .twitter-count-vertical {
    width:56px !important;
}
#fblog-box {
    border:1px solid #ccc;
    padding:5px;
    background:#fff;
    z-index:9999;
    display:block;
    position:absolute;
    top:200px;
    float:left;
    margin:0 0 0 -100px;
    text-align:center;
}
#fblog-box div {
    margin:0 0 5px;
}
#fb-root {
    display:none;
}
#floating-fblog .fb_iframe_widget iframe {
    position:relative !important;
}
</style>
</b:if>

3. Passo - Procure pela tag </body> e cole dentro (acima) o código abaixo

<script type='text/javascript'>
//<![CDATA[
!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>
<script type='text/javascript'>
//<![CDATA[
window.___gcfg = {lang: 'pt-BR'};
(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>
<div id='fb-root'></div>
<script type='text/javascript'>
//<![CDATA[
(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 = "//connect.facebook.net/pt_BR/all.js#xfbml=1&appId=228619377180035";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

4. Passo - Agora na linha  <div class='post-footer-line post-footer-line-3'>  cole o seguinte  código:

<b:if cond='data:blog.pageType == "item"'>
    <div id='floating-fblog'>
        <div id='fblog-box'>
            <div><a href='https://twitter.com/share' class='twitter-share-button' data-count='vertical' expr:data-url='data:post.url' expr:data-text='data:post.title' data-via='dicasquefunfa' data-lang='en'>Tweet</a></div>
            <div><div class='g-plusone' data-size='tall'></div></div>
            <div><div class='fb-like' expr:href='data:post.url' data-send='true' data-layout='box_count' data-width='54' data-show-faces='false' data-font='arial'></div></div>
        </div>
    </div>
</b:if>