Breaking News

Floating Share Button For Blogger

Share buttons are very popular among the bloggers, and with the popularity the presentation of the share buttons has really changed alot. Now in this post, I'll teach you how to create an Floating Share Buttons for your blog.

Floating share buttons has now been very popular as it is preferred by many big site like Mashable. As these buttons are very good looking and effective on attracting readers to share buttons, these buttons have been in demand for long.

So regarding that I've written this post to teach you how to add it to your blog. Just follow these steps:

Now open> go to Design>go to edit html page> Check Expand Widget Templates

now search for ” ]]></b:skin> “ and add the below mentioned code just above it, do not include ” while copying the code

inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth – offsetWidth);}
#float_corner {padding: 5px;
border-bottom: 1px solid #e8e8e8;
now save your template. now here is the second stage of adding the code. now search for “</body>” code in your template, and add the below mentioned code just above “</body>” code. Do not add ” while copying the code

<div id=’float_corner’>
<script type=’text/javascript’>
(function() {
var s = document.createElement(&#39;SCRIPT&#39;), s1 = document.getElementsByTagName(&#39;SCRIPT&#39;)[0];
s.type = &#39;text/javascript&#39;;
s.async = true;
s.src = &#39;;;
s1.parentNode.insertBefore(s, s1);
</script><a class=’DiggThisButton DiggMedium’/><br/>
<script src=’’ type=’text/javascript’/><br/>
<a class=’google-buzz-button’ data-button-style=’normal-count’ data-locale=’en_IN’ href=’’ title=’Post on Google Buzz’/>
<script src=’’ type=’text/javascript’/><br/>
<script badgetype=’square’ src=’’ type=’text/javascript’>
<a href=’’ name=’fb_share’ type=’box_count’>Share</a><script src=’’ type=’text/javascript’/><br/>
<a href=’>Get This</a><br/>
Now save your template and check out your blog. you can adjust the position of the widget by editing ” position:fixed;_position:absolute;bottom:0px;left:0px;clip: ” part of code.
You can change the following attributes : bottom :left
Change them to make the image appear were you like :
top left
top right
bottom left
bottom right


Adding Floating share Button In sidebar for Blogger

1. Login to blogger account.

2. Go to design --> page Elements

3. Click Add A Gadget.

4. In Add A Gadget window, choose HTML/Javascript .
5. Copy the code below and paste it inside the content box.

#sharebar {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;right:0;}
#sharebar .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="sharebar">
<a href="">Source</a>

<div class="sbutton" id="fb">
<a href="" name="fb_share" type="box_count">Share</a><script src="" type="text/javascript">
<div class="sbutton" id="rt">
<script src="" type="text/javascript">
<div class="sbutton" id="su">
<script src="">
<div class="sbutton" id="digg">
<script src="" type="text/javascript">
<a class="DiggThisButton DiggMedium" href=""></a>
<div class="sbutton" id="gb">
<a class="google-buzz-button" data-button-style="normal-count" href="" title="post on google buzz">
<script src="" type="text/javascript">


6. Save the gadget.
7. Click Save button on upper right corner.

If you like this post. Share it. Enjoy!


  1. this code doesn't work on my blog. May be I am doing mistakes. But thanks for the post. I was looking of it.

  2. Thanks For Posting these, It will help many Bloggers gain More Traffic to their Blogs, Am gonna add it to all My Blogs.


  3. Awesum work,thanks for doing this great job i get many help of doing this thanks again :) .

  4. this gadget is really awesome. Its working

  5. how can i add the rss feed to this float??

  6. using it fine. thanks!

  7. Thanks for it I will check how it looks.

  8. Hmm its working i applied it on my blog and its working and moving ...
    Vertical Jump Bible

  9. hi! I want a non floating one. Can you share how to do that too? thank you!

  10. very good

  11. This doesn't work.When i paste the 2nd code and click on save template it says

    "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute "{1}" associated with an element type "id"."

  12. how to take on the left hand side

  13. nice post.thnx for sharing.check this also it will be useful.

    how to add any share button you want to this widget

  14. thank you it's working now on my blog

  15. Awesome post thanks for sharing ,its very helpfull.

  16. Congratulations!
    Add and my blog in your list of blogs ! CUM SA FAC

  17. not working properly,

  18. I can't get it to configure or connect with twitter at all. and it's losing counts.

  19. Awesome thanks for the information it really helped me out.

    buy real instagram followers

  20. I am happy to found interesting post. I really increase my knowledge after read your post which will be beneficial for me.
    website design


Any Comments ?

Designed By GP