Blogger Widget

How to add Floating Share Buttons to your blog’s sidebar(For Blogspot)

Add Floating Share Buttons to your blog’s sidebar

Most Of 80% Traffic come from Social Sites.A floating share buttons (social bookmarking) widget by the right of every page is just one of the gadgets you must add to your blog if you intend to get free traffic from facebook,twitter,Google + and other Social Sites.
Having a floating share buttons widget makes it even easier for your blog visitors to share your blog posts they find interesting.
Floating Share Widget
Now Steps For How To add Floating Share Buttons to your Blogspot Blog.
Floating Share Widget Preview

Steps :-

1. Log in to your blogger account and click on Design

2. You’re now looking at your blog’s layout. Click on Add A Gadget on the sidebar.

3. Select HTML/Java Script

4. Paste the code below into the box and save. There’s no need for a title.

<!–SideBar Floating Share Buttons Code Start–>
<style type=”text/css”>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px


#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;-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=”Share This With Your Friends”>
<div class=’sbutton’ id=’gb’><script src=”″></script><fb:like layout=”box_count” show_faces=”false” font=””></fb:like></div>
<div class=’sbutton’ id=’rt’><a href=”” data-count=”vertical” >Tweet</a><script src=’’ type=”text/javascript”></script></div>
<div class=’sbutton’ id=’gplusone’><script type=”text/javascript” src=””></script><g:plusone size=”tall”></g:plusone></div>
<div class=’sbutton’ id=’su’><script src=”″></script></div>
<div class=’sbutton’ id=’digg’ style=’margin-left:3px;width:48px’><script src=’’ type=’text/javascript’></script><a></a></div>
<div class=’sbutton’ id=’fb’><a name=”fb_share” type=”box_count” href=””>Share</a><script src=”” type=”text/javascript”></script></div><br/><div style=”clear: both;font-size: 9px;text-align:center;”><a href=”” target=”blank”><font color=”black”>[Get This]<font></font></font></a></div></div>

<!–SideBar Floating Share Buttons Code End–>

5. Save the widget and preview your blog.
That’s it.

If, It is work then share it with your Friends…

Please Share:

About the author

Harshil Barot

Harshil Barot is a Computer Geek, Internet Entrepreneur, Blogger, Day Dreamer, Business Guy, Fitness Freak, Music Lover and Digital Marketing Specialist. He also helps companies to grow their online businesses. At Just Web World he Writes about Blogging, WordPress, SEO, Business, Technology and Computer Tips and Tricks.

Leave a Comment