Facebook Static Jquery Likebox With Hover

• Home
• Social
• Facebook Static Jquery Likebox With Hover

Facebook Static Jquery Likebox With Hover

Posted by Unknown | 2:32 PM | Leave a Comment

 

[button link="http://demo-mybloggerworld.blogspot.com/2015/01/facebook-static-jquery-likebox-with.html" align="center"]Live Demo[/button]

Hello Friends toady we 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">.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;}.mdfbplikebox 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("http://mybloggerworld.net/wp-content/uploads/2014/12/md_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(md){
        md(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            md("#fbplikebox").css({left: -250, "top" : 100 })
            md("#fbplikebox").hover(function () {
                md(this).stop().animate({
                    left: 0
                }, $dur);
            }, function () {
                md(this).stop().animate({
                    left: -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/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://mybloggerworld.net">My Blogger World</a> / <a href="http://mybloggerworld.net/blogger/facebook-static-jquery-likebox-hover/">+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