Add Floating Facebook Like Box In Blogger

Facebook Floating like box is very easy to use. You also  see this on many  website / blogs. Make your blog  more attractive by using  this social  media  widget in Blogger. Many other websites  also share this widget but i also  share this beautiful  widget with you. This widget  is pop out when   mouse cursor hover  it otherwise this  is fixed on the right      side of   your blog page. You  can change its position but it looks attractive on the  right side. This widget has built in CSS, JavaScript, and HTML etc..

How To Add This Widget In Blogger?

• Here are two simple steps to add this widget
• First go to Blogger > Template > Edit Html and click proceed
• Search for </head>  tag by using ctrl+f
• Add the following code above </head> tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.
1/jquery.min.js" type="text/javascript"></script>

• After this go to Blogger > Layout
• Add A Html / JavaScript Gadget and paste the following code in it

//<!--
$(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("http://3.bp.blogspot.com/-YwBHQWHKtfo/Tw2Ewd7XpQI/AAAAAAAAAOc/Nwjd9y
_JzjA/s1600/facebookbadge.png") 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=https://www.facebook.com/pages/My-Blogger-Widgets/476605042387302&amp;width=245&amp;colorsche
me=light&amp;show_faces
=true&amp;connections=9&amp;stream=false&amp;header=f
alse&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span> / <a href="http://mybloggerwidgets.blogspot.com/">+Get This!</a></span></div></div>
</div>

• Change https://www.facebook.com/pages/My-Blogger-Widgets/476605042387302 this with your facebook page address
• Finally you are done !

Tweet