Add Floating Share Buttons For Blogger (Easy Steps)

How To Add Floating Share Buttons To Blogger

Right here, we will discuss how to add floating share buttons in blogger. This share buttons are shown vertically at the left hand side beside your blog post,

See steps to add it below..

Steps
Step 1: Open blogger template > Edit HTML.

Step 2: Locate this code <b:includable id='post' var='post'> Do that by using control + F key to show to bring out a search box in template, input the code there.

Step 3 paste the code below directly below this <b:includable id='post' var='post'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/*<![CDATA[*/
#btnt-social {  bottom: 10%; margin-left: -50px; position: fixed; }
#btnt-social ul { list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#btnt-social ul li { display: inline;background:none;margin:0;padding:0;}
#btnt-social ul li a { display:block;  width: 32px; height:32px; margin: 5px 0; }
#btnt-social ul li a.twitter    { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Ax7CvJ16AkwHDVvZ4LdKip9_o_jy71LpLIe7k1HJTr5jOmOXaDtQfBwRfGsXLVl1P9zKI2phV4Rr4JwVdFWkAvDWArT8M36nIFNRGfp3FJlflxnl174FdTyb9I7pKXw9ljWa5prlGjna/s32/twitter.png") repeat scroll 0 0 transparent;  }
#btnt-social ul li a.facebook   { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZM4zu0bEQgd_JRnt8udQMiItUZqDn6RZMI10NCUuDFcoTO7XJqE2rShlEEhZUShfb1e2q6LoNW4tDrogUZg4H92tT47WV1CatwrjsBlway22xSsxsXSF_w9Gcniz2jihp_pOHGT96eteK/s32/facebook.png") repeat scroll 0 0 transparent; }
#btnt-social ul li a.stumbleupon  { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJrdhvLdU9EpTg4nsAKaoxEhGKSMt_YHtYcnK9ChGWRe8V9QCbEMmKeupjy8vUjyGgYPdZLExOFKX5CGOrC2XDWyVP0tE79bAZRnaM6dckHpzcchJarTDvmdJp2820V0PYNaeJvvDKDyf/s32/stumbleupon.png") repeat scroll 0 0 transparent;  }
#btnt-social ul li .google-plus    { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicEeGCXUCDrLZ3qn-e3JbSfGiIp8RQV7q24qOYjAccXfn_1QFwfVg7NhB3lgBDKxB867Qfpxq4K0DtOtxhd1NhGMwyyl78eYtF1a6zAyR-fnlRGnVCcTfoEpBcAg6WCiP3vkSqEfeo_FVH/s1600/g-plus.png") repeat scroll -1px 0 transparent;  }
#btnt-social ul li a.pin-it-button   {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUEwYQ-bv600DI54AapiwH0gDQMKF7ytyQHYuo81QUrfOyH5_fai5Y6Q82s7_D3BYi1eGJaIAAyXJ7emWLh7_8oZd9i51673at_rNGgHvI9Pe7bDkPilWBPkO3XfvFMoHoeGtEf3405G36/s32/pinterest.png") repeat scroll 0 0 transparent;  }
#btnt-social ul li .addthis_32x32_style .dummy .at300bs, #btnt-social ul li .addthis_32x32_style .at300bs, #btnt-social ul li .addthis_32x32_style .at15t   { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKWDKSgLmlAZtOEkzWkcvc76zCY6-b95pxANIFZQfzIOR-kw0p1Dxy9SKKYyi_IODwqyOl7dhlNckVppJhw6LYffRQw2wbblZbLv7J8QKOT1SVE4f7JGiWTjG290TG2niPj76wfyHsAVYP/s32/sharethis.png") repeat scroll 0 0 transparent;  }
/*]]>*/
</style>
<div id='btnt-social'>
<ul>
<li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='facebook' 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='Share this post on Facebook'/></li>
<li><a class='stumbleupon' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
<li><a class='google-plus' expr:href='&quot; http://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Google+ '/></li>
<li><a class='pin-it-button' href='javascript:void(run_pinmarklet())'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script></li>
<li><div class='addthis_toolbox addthis_32x32_style'>
<a class='addthis_button_compact'/>
</div>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;blogtipsntricks.com&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>
<script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/></li>
</ul>
</div>
</b:if></b:if>

Step 5: Save your template.
You are done, go to your blog, you will find the share buttons beside your blog post.