How to add fixed facebook like box in the blogger Right Scroll

One of the most useful and popular way of getting more likes into your business's facebook page is to put facebook like box into your blog or sites. Basically, you should copy the script given by facebook to add facebook like box into your site as documented by Facebook developer. However, there may be difficult to add any facebook plugins in blogger template, because blogger template has xml codes whereas facebook plugins has html and javascript codes.

Different looks of Facebook like box can increase more likes in your business's Facebook page. So you should apply different techniques. Like you can pop up like box and you also can fix facebook like box in blogger. This time, I am giving a block of code that helps you to add fixed facebook like box in the right sidebar of blogger, in which a facebook img is attached. When you point Facebook img, it hovers and slide on left. Then you can see Facebook like box.

Follow the given steps to add fixed Facebook Like Box in the sidebar of blogger template:-

Step 01: Login to blogger dashboard and click on layout>>add gadget.

Step 02: Now choose HTML/Javascript gadget and paste the following block of codes:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".facebookstaticlikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-252"}, "medium");}, 502);});
//-->
</script>
<style type="text/css">
.facebookstaticlikebox {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSmxFIhpzM1DF6WnopwOLAkPFwHKQIjjmFGsh_oCAKP6ru7N674HdUcY9W8OcH86RFotbgO0aKb61nXdjs4s5RCdyEt0-1SXshKm3Od1X6p39OyanNZF83xxBSERHe0YJLyVAzx7mGUBNQ/s1600/facebook-png.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 272px;
padding: 0 6px 0 45px;
width: 247px;
z-index: 99999;
position: fixed;
right: -250px;
top: 16%;
}
.facebookstaticlikebox div {
border: none;
position: relative;
display: block;
}
.facebookstaticlikebox span {
bottom: 12px;
font: 10px "lucida grande", tahoma, verdana, arial, sans-serif;
position: absolute;
right: 6px;
text-align: right;
z-index: 99999;
}
.facebookstaticlikebox span a {
color: #808080;
text-decoration: none;
}
.facebookstaticlikebox span a:hover {
text-decoration: underline;
}
</style>
<div class="facebookstaticlikebox" style="">
  <div><a href="http://allblogsolution.blogspot.com/" rel="dofollow" target="_blank" title="All Blogging Tips and Tricks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpRoM9xVrjm9-BByVxsZG6LbQqybp9EpS8BoMtA0HW_GrWFQXHl2u4T8PHgXUlqaRAyXfd0648p2ncV46NQk-sxgSlr_NH8zHuGtOPXEtA_nyZyuMZz-l3bUeCL8jwgN3_pakQiF8ENTM/s1600/all.png" width="60" alt="All Blog Solution" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://allblogsolution.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Solution"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpRoM9xVrjm9-BByVxsZG6LbQqybp9EpS8BoMtA0HW_GrWFQXHl2u4T8PHgXUlqaRAyXfd0648p2ncV46NQk-sxgSlr_NH8zHuGtOPXEtA_nyZyuMZz-l3bUeCL8jwgN3_pakQiF8ENTM/s1600/all.png" width="60" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://allblogsolution.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpRoM9xVrjm9-BByVxsZG6LbQqybp9EpS8BoMtA0HW_GrWFQXHl2u4T8PHgXUlqaRAyXfd0648p2ncV46NQk-sxgSlr_NH8zHuGtOPXEtA_nyZyuMZz-l3bUeCL8jwgN3_pakQiF8ENTM/s1600/all.png" alt="All Blog Solution" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/yourpagename&amp;width=247&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=272" scrolling="no" frameborder="1" scrolling="no" style="border:none; overflow: hidden;background:#f7f7f7; height: 272px; width: 247px;">
    </iframe>
  </div>
</div>

Step 03: Now save the template.

Note: 

1. Before saving the template, you have to replace http://www.facebook.com/yourpagename by your own facebook page url.
2. Do not use jquery link if there is already jquery link into your blogger template.