How to Make, Create or Install floating social media buttons to Blogger

 This tutorial gonna show you how to create floating Icon sharing from social sites like Facebook, Twitter, Digg, Yahoo Buzz, and more. It is very easy to do it because you just put it to your blog without Editing HTML template. because we'll gonna play it via widget or gadget, isn't it cool huh?




Okay.. let's we start it. 

1. Login to your Blogger account.
2. Go to Design > Page Elements

3. Click Add A Gadget.

4. In Add A Gadget window, select HTML/Javascript 

5. Copy the code below and paste it inside the content box.



<!-- floating page sharer Start bloggerclick.com--><br /> <style><br /> #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;}<br /> #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}<br /> .fb_share_count_top {width:48px !important;}<br /> .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}<br /> .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}<br /> .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}<br /> </style><br /> <div id='pageshare'><br /> <div class='sbutton' id='fb'><br /> <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><br /> </div><br /> <div class='sbutton' id='rt'><br /> <script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script><br /> </div><br /> <div class='sbutton' id='su'><br /> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script><br /> </div><br /> <div class='sbutton' id='digg'><br /> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><br /> <a class="DiggThisButton DiggMedium"></a><br /> </div><br /> <div class='sbutton' id='gb'><br /> <a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'><br /> <script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script><br /> </a></div><br /> <div style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.bloggerclick.com">Get this</a></div><br /> </div><br /> <!-- floating page sharer End --><br /> <br />



6. Save the gadget.
7. Drag the gadget and reposition it under Blog Posts gadget.
8. Click Save button on upper right corner.