Facebook Floating Like Box for Blogger

Tweet

Today we're going to share the  slideout/floating Facebook like box for blogger blogs which is very easy to use and can be useful for those who want to make their blog more attractive by adding different social media widgets to different parts of their blogs. This widget is very unique one and can be found on many websites and blogs on the web. It only appears when someone will hovers it. Otherwise, it will be shrinking it right side of your blog's body. You can change it's position Right side to left side as well. But keeping it on right side is better for human eyes.  This widget has already been shared by many bloggers, but we're just re-sharing it with you for expanding it to more users. This widget is built within JavaScript, CSS, HTML and JQuery. It can be more useful for you if you've a decent amount of Facebook likes for your blog i.e more than 1000. Now let's start adding it to blogger.How to Add Floating Facebook Like box to blog?Follow simple steps below and add this widget. How to Add This on Blogger? Go to Blogger >> Layout >> Add a Gadget >> Select HTML/JavaScript Gadget Add an HTML/JavaScript Widget and paste below inside that <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("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/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%2FTechTrickHome&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></div></div> Save the widget and now the initial part has done. After adding above code now find this tag </head> in your Template >> HTML >> Proceed and right before it paste below code: <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/> Customization There are two customization you can do in this widget, the first one is changing TechTrickHome ith your Facebook's page user name and the second is float:right, if you want this widget to appear at left side then change the property right to left like float:left;. That's all.

Today we're going to share the  slideout/floating Facebook like box for blogger blogs which is very easy to use and can be useful for those who want to make their blog more attractive by adding different social media widgets to different parts of their blogs. This widget is very unique one and can be found on many websites and blogs on the web. It only appears when someone will hovers it. Otherwise, it will be shrinking it right side of your blog's body. You can change it's position Right side to left side as well. But keeping it on right side is better for human eyes. 

This widget has already been shared by many bloggers, but we're just re-sharing it with you for expanding it to more users. This widget is built within JavaScript, CSS, HTML and JQuery. It can be more useful for you if you've a decent amount of Facebook likes for your blog i.e more than 1000. Now let's start adding it to blogger.How to Add Floating Facebook Like box to blog?Follow simple steps below and add this widget.

How to Add This on Blogger?

• Go to Blogger >> Layout >> Add a Gadget >> Select HTML/JavaScript Gadget
• Add an HTML/JavaScript Widget and paste below inside that

<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("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/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%2FTechTrickHome&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></div></div>

Save the widget and now the initial part has done.

After adding above code now find this tag </head> in your Template >> HTML >> Proceed and right before it paste below code:

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

Customization

There are two customization you can do in this widget, the first one is changing TechTrickHome ith your Facebook's page user name and the second is float:right, if you want this widget to appear at left side then change the property right to left like float:left;. That's all. 

Kindly Bookmark and Share it: