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 blogger.com> 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

position:fixed;_position:absolute;bottom:0px;left:0px;clip:
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’>
<ul>
<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;http://widgets.digg.com/buttons.js&#39;;
s1.parentNode.insertBefore(s, s1);
})();
</script><a class=’DiggThisButton DiggMedium’/><br/>
<script src=’http://tweetmeme.com/i/scripts/button.js’ type=’text/javascript’/><br/>
<a class=’google-buzz-button’ data-button-style=’normal-count’ data-locale=’en_IN’ href=’http://www.google.com/buzz/post’ title=’Post on Google Buzz’/>
<script src=’http://www.google.com/buzz/api/button.js’ type=’text/javascript’/><br/>
<script badgetype=’square’ src=’http://d.yimg.com/ds/badge2.js’ type=’text/javascript’>
ARTICLEURL
</script><br/>
<a href=’http://www.facebook.com/sharer.php’ name=’fb_share’ type=’box_count’>Share</a><script src=’http://static.ak.fbcdn.net/connect.php/js/FB.Share’ type=’text/javascript’/><br/>
<a href=’http://templates-widgets.blogspot.com/2011/03/floating-share-button-for-blogger.html>Get This</a><br/>
</ul>
</div>
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


UPDATE 


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.

<style>
#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;}
</style>
<div>
<div id="sharebar">
<a href="http://templates-widgets.blogspot.com/2011/03/floating-share-button-for-blogger.html">Source</a>

<div class="sbutton" id="fb">
<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">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">
<script src="http://widgets.digg.com/buttons.js" type="text/javascript">
</script>
<a class="DiggThisButton DiggMedium" href=""></a>
</div>
<div class="sbutton" id="gb">
<a class="google-buzz-button" data-button-style="normal-count" href="http://www.google.com/buzz/post" title="post on google buzz">
<script src="http://www.google.com/buzz/api/button.js" type="text/javascript">
</script>
</a>

</div>
</div>
</div>

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

If you like this post. Share it. Enjoy!

23 comments:

  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.
    http://www.guitarchordworld.net

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

    Thanks.
    Delords
    http://blogsonblogger.blogspot.com/

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

    ReplyDelete
  4. this gadget is really awesome. Its working

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

    ReplyDelete
  6. Thanks for it I will check how it looks.
    http://www.msuggestions.com

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

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

    ReplyDelete
  9. very good effort.www.dailyhacks.in

    ReplyDelete
  10. 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"."

    ReplyDelete
  11. how to take on the left hand side

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

    how to add any share button you want to this widget

    http://www.tech-cave.com/2011/12/add-any-share-botton-to-floating-share.html

    ReplyDelete
  13. thank you it's working now on my blog

    ReplyDelete
  14. Awesome post thanks for sharing ,its very helpfull.

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

    ReplyDelete
  16. not working properly, footballmanagerblog.org

    ReplyDelete
  17. I can't get it to configure or connect with twitter at all. http://bigfatdaddys.blogspot.com and it's losing counts.

    ReplyDelete
  18. Awesome thanks for the information it really helped me out.

    buy real instagram followers

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

    ReplyDelete

Any Comments ?

Designed By GP