Add Facebook Floating Like Box on Mouse Hovering to Blogger Blog

Hello dear visitors, Today i am present to you in filezooby with a Beautiful Facebook floating like Box for blogger blog, Because this is the best and stylish widget ever, In previous post i told you about simple and clean Facebook like box for blog, But today i have brought a Floating Jquery Plugin Facebook like box for make your blog more beautiful and keep your eyes on your Facebook regularly fans. Floating Facebook like box is a beautiful mouse hovering box. Hope you must like this widget because this may be your favourite. Now you can see the demo image of Floating Facebook like box. If you really want to add this box to your blog then follow my instructions;

See the demo

First of all you have to Add Jquery Plugin to your Blog, See the instructions

How to add facebook Floating Like Box to Blogger in 2 Steps

Step 1

1. Go to Blogger Dashboard> Template> Edit HTML
2. Search for </head> tag in your template and just before it paste the below Jquery code (You can ignore this step if Jquery Link is already added in your template)

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Step 2

1. Go to Blogger Dashboard> Layout> Add a Gadget
2. Select HTML/ JavaScipt and paste the below set of code

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY0Dlm9wRE7hRk8i3aBtESG6OdGZs0pVwqDM4n8wvF3qqtJNsk9brqUw1uUebt5KmRBVcWpxG3Wc7zCaHX_MPOyRDfTATG9m9cN7Iy1O3qtXi4orSLLwkz3PjRmb8PQQI8sd0qnsXsrLw/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style="">     <div>     <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/MuhammadTariqRafique&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span><a href="http://filezooby.blogspot.com/2013/11/facebook-floating.html"> Grab this widget</a></span>     </div> </div>

Now just replace https://www.facebook.com/MuhammadTariqRafique with your Facebook Fan page, and save it.

Hope you like our tutorials very much. If you want more tutorials then Subscribe us by entering your email ID.

Posted in: Blogger,Blogger Widgets