Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect

Today i am posting how to add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect:

In this tutorial i will show you how to add a cool floating Facebook Like widget for Blogger that slides to the left on mouse over.

Demo: You can see a static facebook badge at the right side of this blog.

Adding Static Facebook Like widget on blogger

Just follow the below steps to get started:

1. Log in to your Blogger Dashboard, go to Design >> Edit HTML

2. Check the "Expand Widget Templates" box

3. Search (CTRL + F) for this tag:

                   </head>

4. Add the following highlighted jQuery Plugin just before/above </head> tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Note: The Step 4. is Required, If your Blog already have this plugin then Ignore this Step.
If your Blog Don’t have this Plugin, then Install the above jQuery Plugin just before/above </head> tag.

5. Now Click on  Save Template.

6. Now go to Design >> Layout >> Add a new Gadget >> Choose HTML/JavaScript and in the HTML box, paste the code below:

 <style type="text/css">
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRNg2ayZuYt_66d-9c3VHf2oVcBFmMJQ2bznSVgBwQWgdZNvMkZ5T8AonA-KOZ7y2Wqq1WbmzRu0JtNuT53mdZNv87oB2I63j0vBn_3elndQaRv3VfCuJkZddi81Paf-V7d7LDchmN61sd/s1600/md_vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}.mdfbplikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.mdfbplikebox span a{color: #808080;text-decoration:none;}.rrmfbplikebox span a:hover{text-decoration:underline;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
(function(rrm){
rrm(document).ready(function(){
var $dur = "medium"; // Duration of Animation
rrm("#fbplikebox").css({right: -250, "top" : 100 })
rrm("#fbplikebox").hover(function () {
rrm(this).stop().animate({
right: 0
}, $dur);
}, function () {
rrm(this).stop().animate({
right: -250
}, $dur);
});
rrm("#fbplikebox").show();
});
})(jQuery);
/*]]>*/
</script>
<div class="mdfbplikebox">
<div id="fbplikebox" style="display:none;">
<div class="fbplbadge"></div>
 <iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FRAYEESREHMAMIR&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#FFFFFF;" allowtransparency="true">
</iframe>
<span>
By <a href="http://mirrayees.blogspot.com/">Mir Rayees</a>
</span>
</div>
</div>

7. Now Replace the red text RAYEESREHMANMIR with the user name of your facebook fan page.

Note: If you have not set your Fan Page user name and have default URL with symbols then replace the  :  symbol in your URL with %3A and  /  with %2F

Other Settings / Customization Settings (optional):

i. To change the width and height of the facebook box, change the bolded values (250)

ii. To change the background color of the facebook fan box, replace #FFFFFF with the hex code of your color, (you can also choose it from here).

iii. To change the Like-box Color Scheme, change light to dark.

iv. If you want to change the color of the facebook badge (facebook button) replace this code #3B5998

with your own.
v. To change the Like Box Border Colour, replace C4C4C4 with your own one.

8. Now you can  Save  your widget and Enjoy!

If any problem occurred,mention that in comment.