Add Fancy Facebook Likebox Slider For Bloggers

Adding a Facebook Likebox Slider to your blog on blogger is a way you can increase your facebook page like also increases your facebook audience.
There are many facebook likebox slide effect you can add to your blog but is good to add a fancy and stylish effect so as to attract more of your visitor and make them to like your page without causing any diversion.
Note this facebook slider will be add to the sidebar of your blog

You can check the demo at the right hand side of my blog

How to add Facebook likebox slider to your Blog
=>Go to your blog =>Layout=>add gadget=>html/javascript
add the below code to the html/javascript box

<style type="text/css">
#fbplikebox {
    display: block;
    padding: 0;
    z-index: 99999;
    position: fixed;
    background: #ffffff;
}

.fbplbadge {
    background-color: #000000;
    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/AVvXsEgkVsWiVsfmqx_NJfd9aGwBxBuYYOkplwLCixCFw8hAr5ciM8fw_xSskw94V1rnwsIt8t6VkECOxACyJpigJeOKvvsWg7oQIt5Hk0QdxvNGlPW9Q5LNEOyWLTW4jq3HiH_HYX2pJDY3VN4/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"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fvictorayoblog&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;" allowtransparency="true"></iframe>
</div>

Note:

Change the text in red to your facebook page
You can change th background color by changing the text in orange background
it advisable you put the code on the bottom of your blog template

Pages