Floating Facebook Like Box To Blogger

A great way to increase ur facebook likes for ur blogspot or website.when a visitor visit ur page. Facebook Like Box is very useful widget to show visitors the authority for his blog. Facebook offers a simple Like Box plugin that you can easily integrate into your website But the default Facebook like box is not having good look at ugly all. This tutorial will show you How To Add Custom Facebook Like Box using CSS To Blogger.

 How To Add a Static Facebook Popout LikeBox Widget

 step 1: Login to Your Blogger Account.Go to your Blogger Dashboard.Go to design>>Edit Html

Step 2: Press (cttrl + F)  to find below Tag

</head>

Step 3:Now add the following code above/before </head> tag:

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

Step 4: save the Template

step 5: now go to Layout>>Ad a gadget>choose HTML/JavaScript>> and paste below code in HTML box.

                                               ------------------------------------------------------------------------------------------------

/*<![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/AVvXsEhmae-tN-4SCfiCeIIjzyrxdAppRTS76DHNHJLy28AVrmyFYsbXwj9wz4164_ihl-rcvIiNaCdq4kKOQT1t2NsUz7tOKIhXWBQq6YcQ50vWF7ghHX_zhvsEn9bAl1hfWi2RtprQiAlrDfA/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=YOUR-FACEBOOK-PAGE&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 6: Replace YOUR-FACEBOOK-PAGE in above code with the url of ur facebook fan page. and also replace symbol in ur URL with %3A and replace / with %2F .

like this:
my facebook fan page : http://facebook.com/pages/potonngo/12121212121
and AFTER replacing symbol its look like this : http%3A%2F %2F facebook.com%2F pages%2F potonngo%2F 12121212121

 save it.

DONE.
(: = %3A ) (/ = %2F)
Ur Floating Facebook Like Box to Blogger is Now Ready.


some optional settings:
1. To change the width and height of the facebook box,chage the bolded values  (250)
2. for changing background color of facebook fan box, change color code #FFFFFF . find html color code from GOOGLE
3. change the facebook button color replace the color code #3B5998 on ur own