Smooth Float Social Media Share Buttons For Blogger Posts

Let us see how can we add this to your blogger site

Step#1

• Open Blogger Dashboard/Control Panel → Template → Html editor
• Pressing Ctrl+F search for ]]></b:skin> 
• And add the below given CSS code just above it.

Css

#sharebar {position: fixed;

bottom: 15%;
margin-left: -85px;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #FFF;
padding: 0 0 2px 0;
z-index: 10;
    padding: .8em 0em 0em .51em;}

#sharebar .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

Step#2

• Now search for below given code in you Template's → Html editor

• And add the the below given code just after it

Html

 

<div id='sharebar'>
<div style='float: none;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=65&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:65px;'/>
</div>
<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='twitter-share-button' data-count='vertical' data-related='' data-via='trackmyblog' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='sbutton' id='su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'>
</script>
</div>
<div class='sbutton' id='digg'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'>
</script>
<a class='DiggThisButton DiggMedium' href=''/>
</div>
<div class='sbutton' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'>
</script>
</a>
<div style='clear: both;font-size: 9px;text-align:center;'><a href='http://www.trackmyblog.com' style='color:white'>Get widget</a></div>
</div>
</div>
</div>
 
 
 
 
 
 

Congratulations you are done. You have successfully added the floating social media share buttons to each of your blogger posts

****************