HOW TO ADD FACEBOOK SLIDER SIDEBAR FOR WEBSITE OR BLOGGER

hOW TO ADD FACEBOOK SLIDER IN BLOG OR WEBSITE

Hi guys,i am going to post some excited stuff, you surely like it ,and its usual very simple one, add facebook side  bar as you always show in my site so here i past the code for facebook slider just copy and past in you blog.

step:1 got to blogger dashbaord ----> page element ---->add widget --->select HTML/javaScript from many option. past this script and click on save that 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/AVvXsEgQ_pSGsMvgVozaFhAodLfKB6Ul-oel-1hhpIsXpzonCd0he2Kudqg0C6hE1PpKSRGbM-kDR2kt-sBKk-mXLJDx_kpVIdJjBWdioQwXfQ_3q6iXS1xcqD6-PIZ09Qj_g6S9I3-aKiSTYf8/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://www.facebook.com/crackers.hacker&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:#FFFFFF;" allowtransparency="true"></iframe>
</div>

 

step: 2 just change aqua colored text with you URL prefix . if you have own website then simply past this code before </head> section.

---

hey !!!! if any compliment then never hesitate ,feel free to ask me in comment section.

---