Home Blogger Tips Add Facebook Floating Like Box Widget to Blogger

Add Facebook Floating Like Box Widget to Blogger

Facebook Floating Like Box

We all are fighting for Maximum Facebook likes, Add a  Facebook Floating like box in your blog or website. This Widget Sticks at a same position (Center Right), Just moving the cursor over Facebook Tab will make Jquery work further.

Also Read – Facebook Popup Like Box

 How to Add Facebook Floating Like Box Widget

facebook floating like box widget

 Copy the bellow code just before </body> in your blogger template


 <!--Floating Facebook Widget by www.Technoratan.net START--></pre>
<div><script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".theblogwidgets").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .theblogwidgets{background: url("http://3.bp.blogspot.com/-TaZRLv66f8g/UoMnTyTbF6I/AAAAAAAAAGY/U4qcf-SP6d0/TheBlogWidgets_facebook_widget.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%;} .theblogwidgets div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .theblogwidgets span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .theblogwidgets span a{color: gray;text-decoration:none;} .theblogwidgets span a:hover{text-decoration:underline;} } </style><!--Brought to you by www.TheBlogWidgets.com--><div style=""></div>
<!--Brought to you by https://technoratan.net/blogger-tips/add-facebook-floating-like-box-widget-to-blogger/--><div></div>
<!-- https://technoratan.net/blogger-tips/add-facebook-floating-like-box-widget-to-blogger--> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FTechnoratan&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"><!--Brought to you by www.TheBlogWidgets.com--></iframe><!--Brought to you by www.TheBlogWidgets.com--><span><!--Brought to you by www.TheBlogWidgets.com--><center></div>
<a style="color:#a8a8a8;font-size:8px;" href="https://technoratan.net/blogger-tips/add-facebook-floating-like-box-widget-to-blogger">Facebook Like Box</a></center></div>
<!--Floating Facebook Widget by www.Technoratan.net END--> 


 Go to Layout Tab — Add a Widget — HTML/Javascript, and copy the code into it and Save.

 If you find Issue after you complete the above actions

 Copy the following script right after <head> in your Blogger Template

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

Customize Facebook Floating like box Widget

 Find facebook.com%2FTechnoratan in the Code and Replace it with yours

You may drop your queries in comments below. and also subscribe for the latest Updates


Share your Experience

This site uses Akismet to reduce spam. Learn how your comment data is processed.