Add Static Facebook Like Box To Blogger

With the increase in popularity of facebook, it is   compulsory to increase the facebook presentation as well. The blog must be maintained along with the increment in facebook likes. In the modern world facebook, likes are important things . They may help you to increase social presence.So, in this post, i am about to teach you how to add a static facebook like box. The Like Box looks like this:

 

Ok Lets Start it:

How To Install This Widget To Blogger?

 Click on add a widget button on your layout and add the code and then save your template then you are done.

[code type="CSS"]<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><style type="text/css">.mdfbplikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.mdfbplikebox span a{color: #808080;text-decoration:none;}.mdfbplikebox span a:hover{text-decoration:underline;}[/code]

[code type="HTML"]

/*<![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;right: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmiBR_BWFWfeY8AGOJOCnRhC_Pr2GhlmekvW2tJf_U8xzAoz50x94mKuldHeFGWIA_ZLrbBiRmV99NAYApztun6vYkeD_06dLGCbTgty-vHXi8QyfBtZh9EBPe_rChujLNz-acRooKGWsi/s1600/md_vertical-left.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-right-radius: 8px;-webkit-border-bottom-right-radius: 8px;-moz-border-radius-topright: 8px;-moz-border-radius-bottomright: 8px;border-top-right-radius: 8px;border-bottom-right-radius: 8px;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
    (function(md){
        md(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            md("#fbplikebox").css({left: -250, "top" : 100 })
            md("#fbplikebox").hover(function () {
                md(this).stop().animate({
                    left: 0
                }, $dur);
            }, function () {
                md(this).stop().animate({
                    left: -250
                }, $dur);
            });
            md("#fbplikebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div class="mdfbplikebox">
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/nepalilab&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:#F5EBF5;" allowTransparency="true"></iframe><span>
By <a href="http://www.nepalilab.blogspot.com.com/">Nepali Lab</a> / <a href="http://nepalilab.blogspot.com/2014/03/add-statif-facebook-like-box-to-blogger.html">+Get This!</a>
</span>
</div>

</div>[/code]

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

Note:Change the Coloured Code into Your Desire.