How to add Facebook like box on blogger

Facebook is one of the best ways to get traffic to your website or blog.
And make your visitors to find you easily on Facebook ...
So In this tutorial i will show you how to add  Facebook like Box for Blogger ..

It will look like That :




1/ Open your blog

2/ In your blog Dashboard go to Layout

3/ Choose the place where you want to add you like box and click Add a Gadget

4/ Choose HTML/JavaScript

5/ Enter a title for example (Follow us on facebook )

6/ Paste this code ..

<!-- http://Depotech.blogspot.com/ facebook like box-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBI-vKLkqSKatZcSXz3v5NpVE6Nx0RAan29Mia9mPOnLAvr5QmxX0NwcM2vXzFUx0GsQRM8_CdQ0qT6zBO_TAbUZBmkMt3_wO3_B0lUOliaa5TUoJTRb7gz0z3UVjriwmrqTIKJb4U4x0/s1600/G++theblogservices.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 275px;
padding: 0 0px 0 46px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:20%;
}
.gplusbox div{
padding: 8px;
background: white;
border: 2px solid #D64937;
border-radius: 15px;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
</style>
<div class="gplusbox">
<div>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/115935237586164014917/posts?hl=ar
" data-source="blogger:blog:followers" data-width="320">
</div>
<script type="text/javascript">

      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>
<a href="http://www.theblogservices.net/" target="_blank" title="The Blog Services"><img src="http://bit.ly/theblogservices" alt="The Blog Services" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
</div>
</div>
<!-- http://Depotech.com/ facebook like box-->

DONE ...

Previous
Next Post »