How to Add Facebook Sliding Like Box on Blogspot

Social networks are very useful to increase traffic to your website. One of the best option to generate traffic through social network is Facebook Like Box widget.

There are so many Jquery widgets and these days very popular among blogger. According to me Facebook Sliding Like Box is the best option as it won't annoy your regular visitors like Facebook popup widgets.

Add jQUERY Plugin:

At first we have to install the jQUERY plugin. If it is already installed then skip this step. Go To your Blogger Dashboard >Template> Edit HTML and paste the following jquery script before </head>

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

Add Like Box To Blogger Blog:

After Installing the jQuery Plugin To Your Blog Follow the below steps

Go To Blogger Dashboard
Click On Layout
Click On Add a Gadget
Select HTML/JavaScript
Copy the below Script
After customization paste it into the HTML/JavaScript Box

 <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/AVvXsEghFlIc9Vxb8pdjWNRBT95B4vYghSyZYLBM21aW57eFKozwSQhp6k2hragBbEpKaEib0NSNWYF5Q76DHeQxDkkNJRV9lRWMIm4IbweFW0GwdtYyeiBNT4m8mpLTb3M0IGXziBrJTV6Nr1y1/s1600/w2b_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' : 350 }) 
             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=http%3A%2F%2Ffacebook.com%2FYOUR-PAGE-ID&amp;width=250&amp;height=260&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:260px;background:#FFFFFF;' allowtransparency='true'></iframe> 
 </div>

Customization:

Replace “YOUR-PAGE-ID” with you facebook page user name highlighted above in red
Click on Preview Template (You can see the template without saving)
Save the Template

Pages

Bangladesh Hot Jobs