HackingUniversity - Hacks . Tricks . How-To's

28 June 2012

How to Add Floating Page Sharing Widget for Blogger

sharing widgetI think you might have seen this widget right on our blog like 1 month earlier and it was awesome widget as it moves right with your page and reminds your readers to share you posts with their friends and you might have have seen this amazing widget on Mashable.com so we are here with the exact code for that widget so that you can also use this widget and share your posts in an easy way.

So first of all how this widget looks like you can get a preview of this widget on the right hand side you can see the image, well currently I don’t have any working in action preview for this widget but if you are an old reader on my blog than you might have seen this in action.

So come back to the ingredients of this blog so you don’t have to edit any code lines you simply have to follow the steps below and than you will a working floating sharing widget for your blog.

1. You have to sign in to your Blogger.com Dashboard & than choose your Blog in which you wanna add this amazing floating sharing widget.

2. Now click on Expand Widget Templates and press Ctrl + F to open the search now just make a search for <b:includable id='post' var='post'> and right below it paste the below code.

<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="Widget by HackingUniversity.in"> <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='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone> </div>

3. Now click on Save Template and your floating sharing bar is ready to be shared with your readers for further sharing.

Customizing Floating Sharing Bar :

  1. Now for the customization part your can simply edit the red numbers in above code to main the margins in horizontal position.
  2. Secondly if you just wanna show this widget in your posts you can add the above code inside the below code and than follow the same steps for pasting it.

<b:if cond='data:blog.pageType == "item"'>

Paste above code here…

</b:if>

That’s it now your widget is ready and can checked by refreshing your blog, well if you find any problem just comment below so that I can fix them out.