How To Add Floating Social Media Floating Button On Blogger

Published by Author

Social bookmarking is great way to get more traffic.But how can you make your visitor Share your content with their social bookmarking profiles like Digg, Stumbleupon, and Social Communities like Google +, Facebook.That's the difficult part,most people feel lazy about sharing them with their Social bookmarking profiles.

But don't worry about it now.This widget make it easy for you.This floating widget helps you to get more attention from visitors...This widget will increase traffic to your blog. That's why this widget is effective and this is a very needed one for any web site.

In most sites i saw this widget on "Left" side. but i suggest "Right", because when the reader scrolling the page, mouse pointer is always in the "Right" side. So i think clicking Effectiveness

is high in "Right" side.     ok then let's see how to add it to your blog 

See the screenshot  below
         

Steps

Login to your blogger Dashboard and go to Design --> Page Elements.
 
Click on 'Add a Gadget' on the sidebar.
 
Select 'HTML/Javascript' and add the code given below and click save.

<!-- floating share bar Start mytrafficbot.blogspot.com-->
<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Get this from mytrafficbot.blogspot.com">
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://www.bloggertricksandtools.com/2011/12/how-to-add-floating-social-media.html">widget</a></div><!-- Do not remove this link -->
</div>
<!-- floating share bar End -->

 Drag the gadget and reposition it under or above the Blog Posts gadget.

Click Save button (top right hand corner).

That's It. You're done...

Kindly Bookmark this Post using your favorite Bookmarking service: