Adding Floating Facebook, Twitter And Google Plus Follower/Fan Box To Blogger

Some weeks ago one of my loyal visitor sishir asked me to help him in adding several social media's fan/follower box that would cutely pop out when we move our cursor on it. After doing a little effort i got it. Actually we all should give it a try as it doesn't occupies much space of your site but makes it attractive and helps you to get more fan/followers. So what are you waiting for. Move your cursor down and follow the below tutorial and add a beautiful gadget to your blog. So lets begin:
If you want to see how does it actually looks then be sure to see this live demo.

Live Demo

After seeing that demo if you like it then here it is just for you:

Adding jQuery Plugin:

• Sign in to your blogger account.
• Be forwarded to dashboard>design>edit Html.
• Find </head> tag.
• Place this code just before (above) </head> tag.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

If you have already installed jQuery plugin to your template then there is no need to add it again. Just ignore it.

Adding Widget Code:

• Be forwarded to design and click on "Add a Gadget" link.
• Scroll down and click on HTML/Javascript.
• Add the below code in that content box.

<link rel="stylesheet" type="text/css" href="http://latesthack.googlecode.com/svn/mywidgets/3in1/3.css" /><script src='http://latesthack.googlecode.com/svn/mywidgets/2in1/twitter.js'></script><script src="http://googleplus-activity-widget.googlecode.com/files/jquery.googleplus-activity-1.0.min.js"></script>
<script type="text/javascript">
 //<![CDATA[ 
   jQuery(document).ready(function($) {
      $('#gpaw').googlePlusActivity({
         api_key : 'AIzaSyDsd2KGlVuN5dEwas5G3TsOVX17oRCCTFM'          ,user:'104631247590315800894'          ,image_width:75          ,image_height:75          ,body_height:230       });    }); //]]> </script> <script type="text/javascript"> jQuery(document).ready(function(){  jQuery("#facebook_right").hover(function(){   jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -240}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -240}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -280}, 500); });  }); </script><p style="display:none;"> 3 in 1 social sharing by<a href="http://www.latesthack.com">Latest Hack</a></p> <div id="on"> <div id="facebook_right" style="top: 10%;"> <div id="facebook_div"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvORmHK_JgA94Nah2yX_k5fIjFf16uRmtfdmQmMWzzCgGhHY7dNTrQyV_RtjsyfaP2BEyNYZwWD0uBEg4PQZRoiEdBayZKOkMD7CR3xslR-bYuwsfzKswjkTDtBC_A4gDUMmImU4HJhOE/s1600/%25255Bwww.latesthackdemo.blogspot.com%25255Dfacebook_right.png" alt="" /> <iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fbloggingsentral&amp;locale=en_GB&amp;width=238&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=256"   scrolling="no"> </iframe> </div></div></div><div id="on"><div id="twitter_right" style="top: 27%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5JuLk2HGvImcR0pcis5CcaVFTHfdUxT_zT_FNC-R1f97njwjG-YGZNHYT-dmVMn3UoTE3sjidPRF24xQoPzg3yzS2ibJxZh0GdBEzf6xtBrscZawyFFgGvSn2r1pkg68xpO_q0ndH1TQ/s1600/%25255Bwww.latesthackdemo.blogspot.com%25255Dtwitter_right.png" /><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("martingajurel");</script> </div></div></div><div id="on"><div id="google_plus_right" style="top: 44%;"><div id="google_plus_div"><img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQj8uVlyY5bUdDCkVglyCEa_Jja0IAedEx2oRfvH2AS2Xl9YZLS1zDHrKZnIXlAVRuhX-0w-xxGqzihB81Midq75MUi_8_eSrrTq226trDq9n5O-CSahwegj9ElK0agutT8Z6tVB-Ax9w/s1600/%25255Bwww.latesthackdemo.blogspot.com%25255Dgoogle_plus_right.png" /><div style="float:left;margin:0px 0px 4px 4px;"><div id="gpaw">  </div></div></div></div></div>

• Now replace the underlined and bold text in the above code:

1. My facebook page username "bloggingsentral" with your own facebook page username.
2. My twitter username "martingajurel" with your own twitter username.
3. My google plus id "104631247590315800894" with your own google plus id.

• Finally click on save and view your blog.

Now a beautiful and niche widget has been added to your site. Enjoy it and keep on visiting Blogging Sentral for our other posts.