How To Add Static Facebook Like Box In Blogger

In the previous post we have discussed how to add a Facebook like box to blog and the uses of adding it. But the like box occupies a lot of space making it difficult to publish ads. So in this post i will explain how to replace general Facebook like box with static Like box that floats on the left side of your blog. Static like box not only saves page space but it also makes your blog attractive and animated. After adding this you will see a Facebook tag floating on the left side of your blog. When some visitor hovers the cursor on it, it stretches smoothly showing your Facebook page like button. Simply follow the steps below and get the static Facebook like box.

1) Log in to your Blogger account.

2) Go to layout settings and click "Add a Gadget".

3) Now, in the list of gadgets select "html/javascript".

4) Paste the code below replacing letshacksomething with your page name.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<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/AVvXsEhpTVQwednNpkFLwxsI5mgMXzNpwUXAbsfNZR4w4Go2SudWWR4aJ3b29cq_Jl2Gm0xODLTieuvLUgf7VVdTqDz4F2SnTSLHwhf2yyRoVBPhXOJYvxhloMhjReJ9yiaH-f_6cg-Iy59k6HFg/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><a href="http://letshacksomething.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://letshacksomething.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://letshacksomething.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/24workpng1" alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/letshacksomething&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: 280px; width: 300px;background:#fff;"></iframe></div></div>

5) Now click save and then click save arrangement.

That's it...open your blog..you will see a beautiful static Facebook like box. 

How To Add a Facebook Like Box to Blogger>>>