Smooth Float Social Media Share Buttons For Blogger Posts

Recently we have Created one social media sharing widget for bloggers. It will to let your readers share your blogger posts on social media sites and social bookmarking sites. Today we are extending one more widget in the list. It's floating social media share buttons for each of your blogger posts. Your readers will be directly in contact with social media sphere using this widget. This widget is very simple to use for your readers as on one click a pop-up window of the chosen social media will open and then in two more click your posts will be shared on social media to get more popularize.

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>