Thursday, February 10, 2011

FLOATING SHARE BUTTONS FOR BLOGGER

Do you want floating share buttons of twitter, facebook, buzz, etc for blogger as I do ? (see left of the page)

If yes, then read below.

I have made a simple widget for this. So, you don't need to edit HTML or do any CODING. All you need is simple copy-paste job. Just follow the steps below:


Adding widget
1) Login to your blogger account

2) Go to Dashboard

3) Click design

4) Now Click "Add a Widget". Note there are 'add a widget' link at several places on that page. You should click the one in right panel. Never click the upper one or lower one else the code won't work.

5) A small widget window will open. Select ADD HTML/JavaScript.

6) In the new small window copy-paste the below code:


<!-- floating page sharers Start ankuresh.blogspot.com-->
<style>
#pageshare {position:fixed; bottom:9%; margin-left:-675px; 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;-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 ankuresh.blogspot.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='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 style="clear: both;font-size: 9px;text-align:center;"><a href="http://ankuresh.blogspot.com/2011/02/floating-share-buttons-for.html">Get this</a></div>
</div>
<!-- floating page sharers End -->


7) Save the changes and view blog.


Customizing:
Now you will need a little customization if your widget has not positioned at your desired place. Note that you can place your widget at any place of your blog by this method. For example, you can place it at top/bottom side or you may position it at right/left side as I do.


1) Positioning Right/Left - In the third line of the code change the value of "margin-left". By default I have put - 675px (read as minus 675 pixels). Changing this value will position the widget right or left. If you give negative value then It will turn left. If you will give positive value then it will turn right.

2)Positioning Top/bottom - In the third line of the code change the value of 'bottom'. By default I have put 9%. Increasing this value will make your widget up. While, decreasing this value will place it down.

By default I have put values that will suit most of the blogs on blogger. However, if it doesn't then try changing the values as explained above and see which settings best suits your blog.

If you liked this tutorial and widget then please share this post :) Just hit the share buttons floating in your left :) Please comment on this article. If you have any question or facing difficulty in adding this widget then ask me in the comment box. I will be happy to help you.


No comments:

Post a Comment