How to add a Floating Social Bookmarking Widget in Blogger

12:52 PM
If you have seen share bar plugin social widget which floats along with post container’s border. This share bar makes sharing easy and you can add as many sharing button as you want including Facebook share button,Twitter button,Stumbleupon etc.

Actually this share bar definitely increase article share on different websites such as Facebook,Twitter etc.

Not only in WordPress you can add this attractive floating widget in Blogger blog too and it is simpler than simplest and I mean it. To add this sliding social widget you have to add just a JavaScript code any where in your template HTML code.

You can also paste this code snippet as a HTML widget.
  • So here is a step by step guide how to add this social slider to your Blogger blog.
  • First of all you have to login to your Blogger.com account ( Google account). Though I do not need to tell about this Smile

  • Now on Blogger dashboard go to the option “Design”
  • Here you can see the option “Page Elements” and I think definitely your template is widgetized and you can add gadgets anywhere in your template.  Select the option “add a Gadget”. Here select the Gadget type “HTML/JavaScript” and paste the following code in this gadget;
Code to add

<!-- floating page sharers Start bloghight.com--> <style type="text/css"> #pageshare {position:fixed; bottom:11%; margin-left:-1015px; 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 bloghight.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.bloghight.com/">widget</a></div><!-- Do not remove this link --> </div> <!-- floating page sharers End -->


If you are unable to add this script code as a HTML gadget then you can add this code any where in the template body code.


To add this code to template body go to the option Design > Edit HTML

Here locate the closing body tag i.e </body> and add the script code just before this closing tag. ( to find this tag you can use the “find” option of internet browser ).
, , ,