Floating Facebook Widget For Blogger

Add a floating facebook like box to your blog or website.  The widget remains in a fixed position on the right-hand side of your site.  When you hover over the blue facebook image, the like box will then slide and reveal itself using jquery. As you can see in the right side of my blog.

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

                                                        </head>

• 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'/>

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

                                                         </body>

• Now Paste the Code Shown Below just Before it.

<!--Floating Facebook Widget by techpokers START-->
<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/AVvXsEjzfLjOrm4biyNd3VmHz6uYjFObeVTN0feA_pPgs4Xk3dLEOLPlc5_96-OQM9FX_q40nI1GKOwBzD9j7LDx4ARLAf3RF7p7yM-OHnAVQIxOyEL3ro9031Sm7KGxIpiG6DSOVF0HV2PbMpQ/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>
<!--Floating Facebook Widget by techpokers END-->

• Replace it URL HERE with your Facebook Fan Page URL.
• Now save your template.