Add Slide out Facebook like Box to blogger

s

Facebook is a very popular social networking website. It has millions of registered users. If you have good number of facebook fans then you can get decent amount of facebook traffic to your blog. Facebook like box widget make this job easy. Using this widget your blog visitor can directly become your fan without even leaving your blog. Thus this facebook like box widget helps in increasing facebook fans which further results in increase in blog traffic. This guide is about adding beautiful and stylish Slide out facebook like box to blogger blog. This widget is created in CSS only without using any scripts.

Method:

• Open your Blogger Dashboard.
• Select your blog.
• Select Layout .
• In the blog Layout Click on Add a Gadget option.
• From the list of the Widgets Select HTML/JavaScript Widget.
• In the HTML/JavaScript widget paste following code and save the widget.

 

Note: In the following code change the green color code with your facebook page url.

Code for Widget

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {$(".wcfbslide").hover(function() {$(this).stop().animate({right: "-5"}, "slow");}, function() {$(this).stop().animate({right: "-300"}, "medium");}, 500);});
</script>
<style type="text/css">
.wcfbslide{background: url("https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn1/t1/q71/s480x480/525399_393896777412564_807453850_n.jpg") no-repeat scroll left center transparent !important;display: block;float: right;height: 250px;padding:0 5px 0 46px;width: 295px;z-index: 99999;position:fixed;right:-300px;top:22%;}
.wcfbslide div{border:none;position:relative;display:block;}


.wc-gplusfollow
{
 position: relative;
 
 padding: 10px;
 
background:#E14C83;
 
 
 border: 1px solid #ccc;
 box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}
</style><div class="wcfbslide">
<div class="wc-gplusfollow"><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fally.naomy&width=295&height=250&show_faces=true&colorscheme=light&stream=false&show_border=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:295px; height:250px;" allowtransparency="true"></iframe>
</div></div>