Add slideout floating Facebook Like box on blogger blog

Instead of taking maximum widget space on your blogger blog to show how many Likes on your Facebook page.
Bloggers may find another way to add your Facebook slideout Like box to your blogger blog. Here BlogTariff expalins about how to save your space on your blogger blog and add slideout facebook Like box in good looking way.
This trick defenitely help to increase more likes and subscribers for your blog.
Before do this experiment just chckout this widget how its working for blogger blogs

Live Demo

Step one

How to Add slideout facebook like to your blogger blog?

Sign in to your Blogger blog
Note: Before do this just back up your template first (Dashboard-->Design-->Edit HTML--if anything goes wrong you can reuse your template again.
After signing to your blogger account
Go to "Design" Layout Tab under "Page Elements" sub Tab
Click on "Add a Gadget"
Then, Select to Click on "HTML/JavaScript" Widget Link
Paste the Code as shown below:

<div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2bOTBt9avE9X_3FAL1ldqJAT3n0eZZD6njgssVT0KCSqv4-gXNyPV5VNI_CawixiHjGOzpy-FQeeHkCW7uhUboNeDMJFajtZjz7AnXlHLrC8tjhYA28N46KSOEg-nDYDhNga4ojLWXZY/s300/%255Bwww.omylab.blogspot.com%255Dfacebook_right.png" alt="" /><iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fblogtariffcom&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356"   scrolling="no"></iframe></div></div></div>
<div style="top: 55%;">
<p style=" line-height:0px; font-size:6px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" target="_blank" href="http://www.blogtariff.com">Widgets</a></p>
</div>
</div></div>

Change facebook page name with your facebook page name as highlighted in red color
After successful adding the above code save the widget and Template
Step Two

How to add another script code in blogger blog?

Go to Click on "Edit HTML" sub Tab
Search for code </body>
Then after paste the below code before </body>

<link href='https://gj37765.googlecode.com/svn/trunk/html/mddemo/4in1widgetv2.css' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://apis.google.com/js/plusone.js&apos; type=&apos;text/javascript' type='text/javascript'/>
<script src='http://makingdifferent.googlecode.com/files/fanbox_init.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
 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); });    });
</script>

After pasting the above code....save the template and preview your blog....how its looks...good.
If you feel this article is helpful to you don't forget to leave your word on this blog.