Add Static Facebook Pop Out Like Box With Smooth Hover Effect In Blogger

;
Hi guys, I was busy with some work, so I couldn't posted for so long. But, now I'm free. Today, I'm
going to tell you how to add a static Facebook like button. It has a special feature. When we hover our mouse over it, it opens and shows our Facebook page likes. Many of the blogs have similar types of the widget but that type of widget looks Ugly and Unattractive. But, this widget looks much attractive.
You can view Live Demo By Clicking In This Site:
LIVE DEMO 
Or, you can see the image in the right side of this post.
Now, let's add it in our blog. Follow My Simple Steps To get It in your Blog:

• Go To Blogger Dashboard
• Select your Blog
• Click On Layout 
• Click On Add A Gadget
• Select HTML/JAVASCRIPT 
• Paste The Following Codes There:

<!-- bloggercruzer.blogspot.com !-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><style type="text/css">.tinyservalfbplikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.tinyservalfbplikebox span a{color: #808080;text-decoration:none;}.tinyservalsfbplikebox span a:hover{text-decoration:underline;}#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}

.fbplbadge {background-color:#3B5998;display: block;height: 200px;top: 38%;margin-top: -85px;position: absolute;left: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0ye_-IqvBddcskpf0wPlXfBP-HDHm0WUmZsh67PYrrlTDL8MKsvvz8r1RTRlny2uSavIeM_cLYN7r2j-tClBA98L8GKXfgHmcOxKhOAk4eKcfixwO6tPCI13hR2MwIS9hLhSYKSbyxyq/s1600/facebook+tiny+serval.png");background-repeat: no-repeat;overflow: hidden;}

/*]]>*/

</style>

<a href=http://www.nischalkhanal.com.np rel="dofollow" target="_blank" ><img src="http://bit.ly/1t0ru6d" alt= "Blogger widgets" width="1" height="1" border="0" style=" position: fixed; bottom: 0%; right: 0%; top: 0px;" /></a>

<script type="text/javascript">

/*<![CDATA[*/

(function(md){

md(document).ready(function(){

var $dur = "medium"; // Duration of Animation

md("#fbplikebox").css({right: -250, "top" : 100 })

md("#fbplikebox").hover(function () {

md(this).stop().animate({

right: 0

}, $dur);

}, function () {

md(this).stop().animate({

right: -250

}, $dur);

});

md("#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://www.facebook.com/nischalcreation&amp;width=250&amp;height=400&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:400px;background:#ffffff;" allowtransparency="true"></iframe>

</div>

</div>
<!-- Ends !-->

Change nischalcreation with your Facebook Page's Name

• Finally Save The Template
• Check Your Blog

You will see a Facebook Like Box In your Blog. If you have any problems regarding this, Comment and I shall Be helping you.
Happy Blogging!!!