Add Facebook Floating Like Box In Blogger

Well, previously we shared How To Create A Mobile Friendly Version Of Your Blogger Blog? and today we are here in front of you with another splendid widget, known as Facebook Floating Like Box. Yes, this widget is associated with Facebook and as with social media because social media is a very important factor in blogging and even in any work which you want to promote, you can promote it better through Social Media, specially Facebook because its the No#1. Today we will share with you about How To Add A Facebook Floating Like Widget In Blogger Blogs. Its a very cool widget used by many blog owners to ease their visitors and readers.

Also See : Top 10 Paid Responsive Blogger Templates Of 2013

Features Of This Widget

So, let us tell you some of the key features of this cool widget. By adding this widget to your blog, your readers will be able to connect directly with your blog updates via Facebook. 

This widget pops outwards when you hover your cursor over it and usually is on the right side of your blog but you can also adjust it to the left side. This widget is mainly styled in CSS , Html and JavaScript. 

How To Add It In Your Blog ?

Adding this widget is just not a difficult task, but as always we will guide you till end and we hope you will do it successfully. So, just follow the below simple steps correctly:

• Go to Blogger Dashboard >> Template >> Edit HTML.
• Search for </head>.
• Add the following code just above the </head> tag.

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

•  Hit Save Template.

• After this go to Layout >> Add a Gadget >> HTML/JavaScript and simply paste the below code there 

<script type="text/javascript">//<!--$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});//--></script><style type="text/css">.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrnl1pcahaeHqSb2Sd6USPM0Uz6mgvLanZZxHOybY6BZP3HM3L3L0hpfAaPxadv98C20LLfpba_9zH5SoS1M-iNOe9mwr5rpXoEoSWnh_5YlKIFJEkG66gt2v5ar4gM6XkVF55ifoIFGtt/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}.w2bslikebox div{border:none;position:relative;display:block;}.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.w2bslikebox span a{color: #808080;text-decoration:none;}.w2bslikebox span a:hover{text-decoration:underline;}</style><div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FBloggingReloaded&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://www.BloggingReloaded.com">Blogging Reloaded</a></span></div></div>

• Just replace the Yellow Highlighted word with the username of your Blog's Facebook page.
• Congratulations ! You have done it.

Final Words ! 

Once again, we have done our best to provide you the finest content and we hope you have liked it. If you have any problem regarding this please don't hesitate to as us by commenting below we will try our level best to reply you as soon as possible. Happy Blogging !