Facebook Page Like Button Blog Sidebar (Static) ah Dah Dan: Adding Facebook Static Like Widget in Blogger

Example

To show facebook page like button is not a new thing in blogging. But for beginners, all seems new things. I have already provided Facebook Like Button widget for blogger. This time, static like widget, which means to be static with the sidebar. When hover it, it will come out. Untill you hover, you will see only "Facebook".

Go to your blog dashboard. In the "Theme" go to "Edit Html". Then search for the following code: </head>   

Just above the head tag paste the following code.

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

Press Save

Now, Add gadget. Copy the following code and paste it: 

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

.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/AVvXsEhOv2YWGw4JLz3ZMfQTgNehGdiMKuamM6xarPW7XHS8x98GPv2HzCtAsvvruFwAzyIZFkFZvgcWA-lb3cVSmjxtJFOAsLEao9bRp5KmRd8BXosbh2VIFqqbI-uTYdseyAQ0PS3QTkWZUYU/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;" allowtransparency="true"></iframe>
</div>

You can change the code given in red and blue colour. Put your Facebook page address in place of YOUR-FACEBOOK-PAGE

Save and enjoy.