How to Add Facebook Slide Likebox

Add Facebook slippy Like Box with jQUERY To journalger blog. Would be not wrong if I say you already use facebook like box for your facebook page at your website/blog. however they don’t have any quite impact they simply live at your website/blog sort of a easy gismo. It’s regarding a way to add a begin facebook like box with slide impact. I found a script on-line that adds a floating Facebook button to right aspect of your blogs or websites. The button upon clicking slides towards left revealing a Facebook Like Box. it's a superb coded slider that Hides the Likebox within a instrumentation and divulges it only guests hovers the pointer on the floating button.

Add Like Box To Blogger Blog

1. Go To your Blogger Dashboard>>Template>> Edit HTML

2. and click on HTML Code then press CTRL+F and Find the Following code.

</head>

3. and paste the following jquery link before </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">

</script>

4. Find the following code.

</body>

5. and paste the following code before/above </body>

<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('http://1.bp.blogspot.com/-PUYBb2326SY/T13eXFv1sPI/AAAAAAAABdE/VOqfH

VMXhWk/s1600/w2b_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' : 350 })
            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'></div> 
    <iframe src='http://www.facebook.com/plugins/likebox.php?href

=http%3A%2F%2Ffacebook.com%2Fsoftwareandgame&width=250&height=

260&colorscheme=light&show_faces=true&border_color=%23C4C4C4

&stream=false&header=false' scrolling='no' frameborder='0' 

style='border:none; overflow:hidden; width:250px; height:260px;background

:#FFFFFF;' allowtransparency='true'></iframe>
</div>

http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fsoftwareandgame&amp

6. Replace “softwareandgame” with you facebook page user name highlighted above in blue.

7. Click on save button and take your blog new look.

Visit your Blogs to see it floating at the right side of your webpage. If you wish to change the direction, width, height, background. of the Likebox or make the image changes then do let me know.

Read Also For More Widgets:Get More Widgets By Click Here

Thanks alot For visiting Our Website! Kindly Bookmark and Share it With you Friends.