Facebook Static Jquery Likebox with Hover

Live Demo

Hello Friends toady I will show you that how you can add facebook static jquery hover likebox on your blogger or website.

Facebook Static Jquery Likebox with Hover

First of all go to Blogger Dashboard > Layout > Click on add widget. Then select HTML/Javascript. Now paste the following below code on it.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
.mbwfbplikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.mbwfbplikebox span a{color: #808080;text-decoration:none;}
.mbwfbplikebox span a:hover{text-decoration:underline;}
/*<![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;right: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoZjnzhBS5NRkknZHKPbTQn9MMExVvcNEEMhAhcEsKf9ACzaxBgyu8UngoT5hQEaVMvalfsKqsA5YHfxepT2GF6MSk9WCOgqIBxjOF9ivgWmuHQbuNUdc6ma7MrPzI72-wWLyFV0W-PUh0/s1600/mbw_vertical-left.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-right-radius: 8px;-webkit-border-bottom-right-radius: 8px;-moz-border-radius-topright: 8px;-moz-border-radius-bottomright: 8px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(mbw){
        mbw(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            mbw("#fbplikebox").css({left: -250, "top" : 100 })
            mbw("#fbplikebox").hover(function () {
                mbw(this).stop().animate({
                    left: 0
                }, $dur);
            }, function () {
                mbw(this).stop().animate({
                    left: -250
                }, $dur);
            });
            mbw("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div class="mbwfbplikebox">
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div> 
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/mybloggerworlds&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:#F5EBF5;" allowTransparency="true"></iframe><span>
By <a href="http://www.mybloggeworld.net/">My Blogger World</a> / <a href="http://www.mybloggerworld.net/2014/10/facebook-static-jquery-likebox-with.html">+Get This!</a>
</span>
</div>
</div>

Now replace  https://www.facebook.com/mybloggerworlds with your facebook fan page url. After Changing these thing you are done.

Note : If you want to change the color of likebox replace this color code F5EBF5 with the color you want