Add Slide Out Facebook likebox to Blogger blogs

Add Slide Out Facebook likebox to Blogger blogs
For increasing blogsite's fan in term of social media we generally use Facebook. And highlight your site's Facebook fan-page and let visitor quickly like your fanpage, Facebook's default likebox is very useful. Now here in this tutorial I'm am presenting Facebook's default likebox in a slide out menu what made with CSS3 and HTML. It will appear on very right side of your side, fixed at it's position and the words 'Like us on Facebook' as anchor title, hover with your mouse pointer the Facebook likebox will be appear with smooth slide, and removing mouse it will be hide again. Let's see how it looks like and how to add it in your Blogger.

Add Slide Out Facebook likebox to Blogger blogs


Live Demo- (here you go)

How to set up:
This like box adding has two step, read on-

Step 1: Install
  • First log in to your Blogger, select your Blog, 
  • Go to 'Layout' tab, select 'add a gadget' 
  • From popup menu select 'Html/javascript' and copy and paste codes into content box
  • And configure

Codes-

<style>/*crawlist.net CSS starts*/
.ks-slide {
  position: fixed;
 top: 200px;
  right: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.ks-box{
  height:270px;
  width:266px;
  border:2px solid #444444;
  border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
  background:#fff;
  position: fixed;
 top: 200px;
  right: -265px;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.ks-slide:hover {
right:265px;
}
.ks-slide:hover .ks-box{
  right: 0;
}/*crawlist.net CSS ends*/</style>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="ks-slide">
  <img src="http://4.bp.blogspot.com/-c-Zay0UPk8c/U4MpbjvmZlI/AAAAAAAAEAs/AQ-VlQNOxQw/s1600/m.png" />
  <div class="ks-box">
<div class="fb-like-box" data-href="http://www.facebook.com/crawlistblog" data-width="265" data-height="265" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="true"></div>
  </div>
</div>


Step 2: Configure
  • Replace http://www.facebook.com/crawlistblog with your Facebook fanpage address.
  • If you want this slide out Facebook fanpage to appear some up or some low, just change this two pixel value (marked in pink) default is 200 px to whatever pixel you want.
  • After configuring is over now save gadget and template. And check your blogger blog out.
Last words: Slide out likebox is very useful, because it doesn't take place in widget area so you can put other widgets or keep widget area clean! It also look good and make your Facebook likebox unique on your Blogger site. And if you have any question about this widget don't forget to ask. Chill....

Popular posts from this blog

Add Cool Social Media Sharing icons below posts in Blogger

Easily Get 50000 free Backlink for your website

13 Best Forum CMS/Script to use

7 best CMS/script for building Social networking website

Read Download Stephen King's Novels ePub & Apk

Read Download ePub Harry Potter Books & Apk

10 Best Free Flash Editor software to use

12 best free Article Rewriter/Spinner you can use

Top 6 Best Alternatives to ZBIGZ

6 Best Local Web Server software