Sliding facebook popup for blogger

Pin It Now!

Here is the new facebook sliding popup for blogger with hover effect .this gadget will slide out on hover from left of your browser window it is provided as a gadget so don't have to edit your CSS code just add it as a gadget to your blogg



            <--LIVE DEMO




STEPS FOR INSTALLATION
1.Go to Blogger Dashbord>layout>Add a gadget
2.Now choose HTML/Javascript
3.Paste the below given code in it(first edit your facebook page name)

<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;right: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxhAT_eXbkiw9bUfSEtVhdaw2PNR8s1jNwrpfoP-SNJUlM0fNLQsmsnxdfN16oUZx-nT0-JXXKFgKdJoqHKzCCXGWBP6DM_nqBRBcMn4vGV7rFl-kSzNMFx9pLiXFFtfF89OIw7jCwyys/s1600/badgefacebook.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(w2bz){
        w2bz(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2bz("#fbplikebox").css({left: -250, "top" : 100 })
            w2bz("#fbplikebox").hover(function () {
                w2bz(this).stop().animate({
                    left: 0
                }, $dur);
            }, function () {
                w2bz(this).stop().animate({
                    left: -250
                }, $dur);
            });
            w2bz("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div> 
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fway2bloggerz&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>
</div>

IMPORTANT CHANGE
Replace way2bloggerz with your facebook page name in line 29

Pin It Now!