How to add a Floating Facebook like box in Blogger

To day we know how to add a Floating Facebook like box in Blogger. It is very easy to add and use and makes your blog attractive. Those who intend to make their blog good-looking and striking by adding various social media widgets to their blogs can make the best use of it. It is a unique widget and is used by many bloggers.

This widget normally remains squeezed to the right side of the blog. However when one hovers or flits around it, it appears prominent and that’s why it is called floating Facebook Like box. Its position can be changed to the left side of the blog’s body. You may keep it as you deem it suitable to your blog’s page appearance. It can be more valuable for you if you've a good number of Facebook likes for your blog.

This widget is shared with you with the purpose of conveying it to more users for benefiting as a blogger. This widget is built within JavaScript, CSS, HTML and J Query. Here are we teach you how to add Floating Facebook Like box to blog.

Follow these simple steps below and add this widget.

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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU-_QebvxinAXyA21KFGUskRcGlKLmKuHAJ7xZxd213BgW-O6SfUWSALbExUfSTMtbDZzj0L3fxKidvqdYzHGLDD8HIY501HzFjUH72wY8FrvDmAUe_EG6mcY31bE8mIEw7HWr2LXentjX/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%2Fmyblog&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 you will 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'/>

Save the template and you are done. Now you'll find a new Facebook like box shrinking on the right side of your blog.

Customization:

There are two options to customize this widget; the first one is changing Myblog with your Facebook page user name

The second is float:right. However, if you want this widget to appear at left side then change the property right to left in float:right;.

If you like my work; you can show your regards by hitting Facebook like button, following us on Google+ or Twitter, stumbling our posts on stumble upon . Stay tuned for more tech updates.