How To Add Floating Sharing Buttons On Blogger?

Sharing buttons helps blog to drive more traffic. This will recommend your blog to different social networking sites in the net. The most know is Twitter, Facebook and etc. All the blogs in the net already have this feature in their blog. This is in a form of widget. This is not hard to implement if your thinking to have one your blog. The best thing about this is that it is a floating social media sharing buttons. Meaning whenever your moving the page of the blog, the social media sharing buttons stay still in the place where they are located.

The floating buttons features 6 sharing buttons, namely:

• Facebook
• Twitter
• Stumble Upon
• Digg
• Google Buzz
• Google +1

Adding Floating Sharing Buttons On Blogger

1. Now go to your Dashboard > Design > Page Element.
2. Then, Add a Gadget and select HTML/java script.
3. Copy the script below and paste it on the HTML/java script gadget.

<!-- floating page sharers Start teachblogspot.blogspot.com-->
<style>
#pageshare {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;}
#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;/*bs-fsmsb*/-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 ehowportal.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 class='sbutton' id='gplusone'>
<script type="text/javascript" 

src="http://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone>
</a></div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://ehowportal.blogspot.com/2011/05/how-to-add-floating-social-media.html">Get this</a></div>
</div>
<!-- floating page sharers teachblogspot.blogspot.com -->

     4.  Preview your blog.
     5.  If you have your floating sharing social media buttons working well in the preview then SAVE it.

Now you have your floating social media sharing buttons. Visitors can now +1, dugg, buzz, twit and whatever they call it.

Drop a comment if you have something to say! ^^