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
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....
