FaceBook Slideout Floating LikeBox Widget

I have recently tested another good looking facebook Slideout Floating Widget, on my blogger and have indeed shoot up our subscription rate fast. As we know equipping your blog with social media has been one of the most important audience building strategies and surely it works wonders. The more fans we would gather, the more long term traffic source we could achieve. So take help of social media to increase your traffic. 

And that what we all aim for and not just waiting for search engines to determine out future with algorithms updates. They can be cruel! ;(

Ok So lets see How we can add this amazing widget to our blogs.

Step#1. 

1. Go to Blogger and Click on template.
2. If somehow anythings goes wrong then it may create problem to you so better is to Download your full template. So make a Backup of your template.
3. Now Click on LayOut and Add a Gadget.                                               

Paste the following code below. (in html/Javascript gadget)

 <div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZRuly6bmKU2oL9XVg7uuhwmmZj2p-ssvP80Iq1zEYSX2DmDofq3_-VjukEF7ARQ8LY1D95o2IENyfJb6EqsP_8Ruuf5SBxWYUyYaQpmAILA6KOJ8TQah6nlkGR_n8Xkn-TGetifaSaQhp/s1600/%255Bwww.gj37765.blogspot.com%255Dfacebook_right.png" alt="" /><iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Ftipsn101tricks&<Script Language='Javascript'>  
 <!--  
 document.write(unescape('%20%20%3C%69%6E%70%75%74%20%74%79%70%65%3D%22%68%69%64%64%65%6E%22%20%6E%61%6D%65%3D%22%6C%6F%63%22%20%76%61%6C%75%65%3D%22%65%6E%5F%55%53%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%69%6E%70%75%74%20%63%6C%61%73%73%3D%22%73%75%62%73%63%72%69%62%65%22%20%6E%61%6D%65%3D%22%63%6F%6D%6D%69%74%22%20%74%79%70%65%3D%22%73%75%62%6D%69%74%22%20%76%61%6C%75%65%3D%22%53%75%62%73%63%72%69%62%65%22%20%2F%3E%0A%0A%3C%70%20%73%74%79%6C%65%3D%22%20%6C%69%6E%65%2D%68%65%69%67%68%74%3A%30%70%78%3B%20%66%6F%6E%74%2D%73%69%7A%65%3A%38%70%78%3B%20%66%6F%6E%74%2D%77%65%69%67%68%74%3A%62%6F%6C%64%3B%20%74%65%78%74%2D%61%6C%69%67%6E%3A%72%69%67%68%74%3B%22%3E%3C%61%20%73%74%79%6C%65%3D%22%63%6F%6C%6F%72%3A%23%44%33%44%33%44%33%3B%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%62%6C%6F%67%67%69%6E%67%65%68%6F%77%2E%63%6F%6D%22%3E%57%69%64%67%65%74%73%3C%2F%61%3E%3C%2F%70%3E%0A%0A%3C%2F%64%69%76%3E%3C%2F%64%69%76%3E%3C%2F%64%69%76%3E%3C%2F%64%69%76%3E%3C%2F%66%6F%72%6D%3E%0A%0A%3C%73%74%79%6C%65%3E%0A%0A%23%65%6D%61%69%6C%5F%69%63%6F%6E%20%7B%0A%20%20%62%61%63%6B%67%72%6F%75%6E%64%3A%20%75%72%6C%28%27%68%74%74%70%3A%2F%2F%77%77%77%2E%6D%6B%79%6F%6E%67%2E%63%6F%6D%2F%77%70%2D%63%6F%6E%74%65%6E%74%2F%74%68%65%6D%65%73%2F%6D%6B%79%6F%6E%67%6E%65%77%2F%69%6D%61%67%65%73%2F%65%6D%61%69%6C%2E%70%6E%67%27%29%20%6E%6F%2D%72%65%70%65%61%74%3B%0A%20%20%68%65%69%67%68%74%3A%20%38%36%70%78%3B%0A%20%20%77%69%64%74%68%3A%20%37%39%70%78%3B%0A%20%20%64%69%73%70%6C%61%79%3A%20%62%6C%6F%63%6B%3B%0A%20%20%70%6F%73%69%74%69%6F%6E%3A%20%61%62%73%6F%6C%75%74%65%3B%0A%20%20%66%6C%6F%61%74%3A%20%6C%65%66%74%3B%0A%20%20%6D%61%72%67%69%6E%2D%6C%65%66%74%3A%20%2D%33%35%70%78%3B%0A%20%20%6D%61%72%67%69%6E%2D%74%6F%70%3A%20%33%35%70%78%3B%0A%7D%0A%0A%2E%70%6F%73%74%2D%61%66%74%65%72%2D%63%6F%6E%74%61%69%6E%65%72%20%7B%0A%20%20%20%20%62%61%63%6B%67%72%6F%75%6E%64%2D%63%6F%6C%6F%72%3A%20%23%46%46%46%46%46%46%3B%0A%20%20%20%20%62%6F%72%64%65%72%3A%20%31%70%78%20%73%6F%6C%69%64%20%23%45%34%45%34%45%37%3B%0A%20%20%20%20%6D%61%72%67%69%6E%3A%20%30%20%32%30%70%78%20%32%30%70%78%20%30%3B%0A%20%20%20%20%70%61%64%64%69%6E%67%3A%32%30%70%78%3B%0A%7D'));  
 //-->  
 </Script>  

Step#2: Add the Javascipt code.

Now simply go to Edit html section of your blog. and search </body> code below.(use Ctrl+F to search)

Just above </body> paste the following code. 

1:  <link href='https://gj37765.googlecode.com/svn/trunk/html/mddemo/4in1widgetv2.css' rel='stylesheet'/>  
2:  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>  
3:  <script src='http://apis.google.com/js/plusone.js&apos; type=&apos;text/javascript' type='text/javascript'/>  
4:  <script src='http://makingdifferent.googlecode.com/files/fanbox_init.js' type='text/javascript'/>  
5:  <script type='text/javascript'>  
6:  jQuery(document).ready(function(){  
7:   jQuery(&quot;#facebook_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery(&quot;#facebook_right&quot;).stop(true,false).animate({right: -200}, 500); });  jQuery(&quot;#twitter_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery(&quot;#twitter_right&quot;).stop(true,false).animate({right: -250}, 500); });   jQuery(&quot;#google_plus_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery(&quot;#google_plus_right&quot;).stop(true,false).animate({right: -154}, 500); });  jQuery(&quot;#feedburner_right&quot;).hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery(&quot;#feedburner_right&quot;).stop(true,false).animate({right: -303}, 500); });  });  
8:  </script>  

5. Now you need to replace tipsn101tricks and your facebook URL that highlighted in step#1.

Thats all! Hope you guys liked the widget and in case of any queries, leave out a comment below. 
Stay connected Stay Updated. 

Read More : How to Highlight Syntax in Blogger.