Add Facebook Floating Like Box In Blogger

Hey Guys ! Today I will share with you how to add a cool facebook floating like box in blogger so , that your visitors also get connected to your facebook page as it will be good for them and as well as for you.

Facebook floating like box is very easy to use. You might also have seen it on various blogs/websites and you may have wondered adding it to your own blog. So today , I will be fulfilling your dream. Adding this widget to your blog gives it a more beautiful and professional look , and infact makes it easy for your visitors to stay connected with your blog 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 This Widget In Blogger ?

Here are two simple steps to add this widget in blogger

• First Sign in to Blogger > Template > Edit 
• Search for </head> by using CTRL+F
• 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'/>

• After this go to blogger > Layout
• And add an Html/JavaScript gadget and simply paste the following code in it

<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/AVvXsEgrV1h4UDpzG2Rpln-D6AI955cXKhpSLR5wHlenAPLRJ6zLfFGKwfnPl2GGcWx_XhfJKqZPNqkd5NJFOPfWCPML2dyke8vByZTKEDa2vo-BjuXLVbJXw-4PhdaiAL9C-3dUB5F24aIrCoMT/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%2FAllGamesCorner&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.MyBloggerTricks.com">My Blogger Tricks</a></span></div></div>

• Just replace the words in Red with your facebook page username
• And finally you are done !

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →