Add Facebook Floating Like Box on Mouse Hovering to Blogger Blog

Hello dear guests, Right now i am present to you in filezooby with a Lovely Facebook floating like Box for blogger weblog, Because this is the greatest and stylish widget ever, In prior post i told you about basic and clean Facebook like box for weblog, But nowadays i have brought a Floating Jquery Plugin Facebook like box for make your weblog much more stunning and keep your eyes on your Facebook routinely fans. Floating Facebook like box is a lovely mouse hovering box. Hope you need to like this widget because this could 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 weblog then adhere to my directions

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 Measures

Step 1

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

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

Step 2

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

<script variety="text/javascript"> /*<![CDATA[*/ jQuery(document).prepared(function() jQuery(".abtlikebox").hover(function() jQuery(this).quit().animate(correct: "", "medium"), function() jQuery(this).cease().animate(proper: "-250", "medium"), 500)) /*]]>*/ </script> <style kind="text/css"> .abtlikeboxbackground: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyuFEiYmDkKGtV0Q7h0IaQzzVy6LyS9FKhSrkQhvdzBD6ECeaeZcp1DVxtZBg7PvUQw_77-ZV8vpmsetdpXRcljnKDouQFa_3eaVa8Ce-sQsok8ZkxqgmileVbmaMsCTyjNcL32IhkWro/s320/fb1-appropriate.png") no-repeat scroll left center transparent !important float: rightheight: 270pxpadding: 5px 46pxwidth: 245pxz-index:  99999position:fixedright:-250pxtop:20% .abtlikebox div padding: margin-right:-8px border:4px solid  #3b5998 background:#fafafa .abtlikebox spanbottom: 4pxfont: 8px "lucida grande",tahoma,verdana,arial,sans-serifposition: absoluteright: 6pxtext-align: rightz-index: 99999 .abtlikebox span acolor: graytext-decoration:none .abtlikebox span a:hovertext-decoration:underline } </style> <div class="abtlikebox" style="">     <div>     <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/MuhammadTariqRafique&ampwidth=245&ampcolorscheme=light&ampshow_faces=correct&ampborder_colour=white&ampconnections=9&ampstream=false&ampheader=false&ampheight=270" scrolling="no" frameborder="" scrolling="no" style="border: white overflow: hidden height: 270px width: 245pxbackground:#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 really a lot. If you want more tutorials then Subscribe us by entering your e-mail ID.

Title: Add Facebook Floating Like Box on Mouse Hovering to Blogger Blog
Rating: 910109 Votes

Posted by: Admin Updated at: 2:52 AM

Tweet