Add A Floating/Sliding Facebook Like Box For Blogger

In this tutorial i will show you how to add a cool floating Facebook like widget for Blogger that slides to the left on mouseover. Demo: You can see a static facebook badge at the right side of this blog.


☻ HOW TO ADD SLIDING FACEBOOK LIKE BOX FOR BLOGGER

1) Go to Blogger Dashboard → Template → Edit HTML.
2) Now Find the code shown below using [ctrl+F] (Use In HTML Box)

</head>

3) Now Paste the Code Shown Below just Before it.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

4) Now Find the code shown below using [ctrl+F] (Use In HTML Box)

</body>

5) Now Paste the Code Shown Below just Before it.

<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/AVvXsEiL-4_ijWlqhpG6WOLrRKd2H3VM1oN0Lf_R2ZGZPXfbMiVU-3gy-lcOcE95F8qsM_P-BcROqu7preIMsGrs0J8fffvG42SSPVwZHj1okvodPsm9qh8x5Ag4q9eZKxQNjp0Lk-Rt2JurrPg/s1600/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;}
/*]]>*/
</style>
<script type='text/javascript'>
/*<![CDATA[*/
    (function(w2b){
        w2b(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({right: -250, "top" : 100 })
            w2b("#fbplikebox").hover(function () {
                w2b(this).stop().animate({
                    right: 0
                }, $dur);
            }, function () {
                w2b(this).stop().animate({
                    right: -250
                }, $dur);
            });
            w2b("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id='fbplikebox' style='display:none;'>
    <div class='fbplbadge'/>
    <iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=URL HERE&amp;width=250&amp;height=250&amp;colorscheme=light&amp;
show_faces=true&amp;border_color=%23C4C4C4&amp;
stream=false&amp;header=false' style='border:none; overflow:hidden; width:250px; height:250px;background:#FFFFFF;'/>
</div>

6) Customize your setting.Find any word click Ctrl+F.

♥ Replace it URL HERE with your Facebook Fan Page URL.

7) Now save your template.

Browse More Articles

Tweet

Written by pipspiper

Happy? Funny? Sad? Angry? Feeling depressed? Contemplating to bang your head to the wall? Speak your mind out in the comments box below!