Tuesday, January 17, 2012

How to Add Floating Share Button in Blogger

Putting a floating share buttons widget on your blog is very easy.The buttons will always float in the right side of your blog & will always remain in the visitors view.Just follow the instructions below :

1. Log in your dashboard and go to Design.
2. Then click on Add a Gadget
3. Scroll down and choose HTML/JavaScript
4. A pop up window will come and paste the code below :


<style>#sharebar {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;background-color:#fff;padding:0 0 2px 0;z-index:10;right:0;}#sharebar .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:0px;-webkit-border-radius:0px;}.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:0px;-webkit-border-radius:0px;}.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:0px;-webkit-border-radius:0px;font-size:8px;}</style><div><div id="sharebar"> <div class="sbutton" id="fb"><a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">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"><script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script><a class="DiggThisButton DiggMedium" href=""></a></div><div class="sbutton" id="reddit"><script type="text/javascript" src="http://www.reddit.com/static/button/button3.js"></script><!-- AddThis Button BEGIN --><div class="addthis_toolbox addthis_default_style "><a class="addthis_counter"></a></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4db9cb746b3d9b54"></script><!-- AddThis Button END --><div class="sbutton" id="SB"><a href="http://bestwaysofblogging.blogspot.com/2012/01/add-floating-share-button-in-blogger.html">Get this</a></div></div></div></div> 



5. Now save your template.And your blog will look like below.



Floating share button

0 comments:

Post a Comment

Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name (You Know Who You Are).

    About The Author

    Hi! I am Abdur Rakib, a student and a part time blogger from Bangladesh. This is my first blog. I trying to improve it every time. I am not a professional blogger and still learning how to blog :) Read More..

    Followers

    Ranks

    Recent Comments

    Receive all updates via Facebook. Just Click the Like Button Below

    Powered By | Best Ways of Blogging