How to Add a 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.

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;}
</style>
<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>
<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;"><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 -->
</div>
<!-- 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.

SHARE

About Jimmie Luthra

Jimmie Luthra is a Mariner, Tech enthusiast, Blogger and Gadget reviewer. He is fond of technology and is usually found playing with some piece of tech. He is also a Guitarist, Music lover & fitness freak.