How to Add a Floating Social Bookmark Button to Your Blogger Blogspot Blogs

A floating social bookmark button is a very cool tools that you can try to install on your Blogger Blogspot blogs. One clear benefit of this floating social bookmark button over the static one is that your readers will continuously see the buttons so that they can hit anytime. The button will follow whenever your readers do scrolling on your blog. They do not have to search the button on your blog pages to find them as the case for static social bookmark button.

If you want to use this floating social button to your Blogger blog, here is how to:

1. Log in to your blogger dashboard
2. Select Design and then Page Element of the blog to which you want a floating social bookmark button
3. Click Add a Gadget and select HTML/JavaScript in the appearing window
4. Copy all code provided below and paste it into content box of your widget. Leave the title box blank
5. Click Save
6. Move the widget to under you post block
7. Save and done.

The floating social bookmark button code (make sure you copy all the codes):

<!-- floating page sharer Start bloggersentral.com-->

<style>

#pageshare {position:fixed; bottom:15%; margin-left:-70px; 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'>

<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'>

<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://www.bloggersentral.com/2010/07/install-floating-social-media-buttons.html">Get this</a></div>

</div>

<!-- floating page sharer End -->