Saturday, September 7, 2013

How to Add a Floating Share Widget

floating share widget
'Sharing is Caring', This is a common phrase in Blogging world. A blogger brings quality content and If you like his work then you should support his site by sharing the post.

You must have seen a floating share button on many websites and blogs around the Internet. This kind of widgets attract people to share articles if they find it interesting. People won't have to search for share buttons because, buttons are following you with each scroll.

You can see a demo of this widget on left side of my Blog, while looking at it, Do share it on social networks.

If you guys like my posts then please Share them.

How to Add a Floating Share Widget

Adding a floating share widget is easy if you know all the steps and I am here to show you How to do it.

Step 1: Go to your Blogger Dashboard and click on Design > Edit HTML


Step 2: Now click on Add a Gadget and choose HTML / JavaScript Widget.

html javascript widget blogger
Step 3: Now copy the code below and paste it inside the Widget (HTML/Javascript)

<!-- Floating Share Widget---(The-area51.com)-->
<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-68px; 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;}
<div id='pageshare' title="Get this from BloggerSentral.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 class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
<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 class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.the-area51.com/2012/02/how-to-add-floating-share-widget.html">Get This</a></div><!-- Do not remove this link -->
<!-- Floating Widget End---(The-area51.com)-->

Step 4: Save your Widget and drag it to desired position. I suggest to keep it on top (Don't worry It won't be visible in your template)
 Now you'll be able to see a floating Share widget on your blog.

Customization: You can align the widget as per your template design.

For aligning the widget Horizontally change the value of margin-left in the code.

Negative value: To push widget to left side (-12)
Positive value: To push widget to right side (12)

example: If I want to push the widget towards left a bit, I'll change the value of margin-left from -68px to -70px.
Spread The Love, Share Our Article


Post a Comment


 about US

SoftGlad is a leading blog which providing Latest News, Social Media, Web Design, Blogging, PC tutorials and many other stuffs. We will always trying to relate with our valuable readers by updating the quality contents. There are millions of blogs which providing technological knowledge but our goal is to provide dainty articles and useful technological knowledge.
See More


RECENT Comment