Facebook is one of the best ways to get traffic to your website or blog. So In this tutorial i will show you how to add a cool floating Facebook like widget for Blogger that slides to the left on mouseover.

• Go To Blogger >> Layout >> Add a Gadget
• Choose HTML/JavaScript
• Paste The Following Code in Content Box

 <!-- Facebook Popup Widget START --><!-- Brought to you by www.AllBlogger.Tips  -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#Burptech {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#Burp {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSW5hkSNs31lbn3359pEHTZk4fd3R1I1n1FJdqDcLVSmIIZ6wnITqVPgsn4uvMy_IjkAGjnopXVcsiypgkNwrGXk9XMXFvUkB_EJAZZPF8PRnb8ialaJBevXwo6wj0m9vK5CyPQ-jZW8nq/s1600/Burp.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(1000).fadeIn('medium');
$('#Burp, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='Burptech'>
<div id='Burp'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/BloggerTipsPage&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
<span id="linkit">Powered by <a href="http://www.onepennyauctions.com/">Penny Auctions</a> - <a href="http://www.allblogger.tips/2014/07/how-to-add-floating-facebook-like-box.html">Facebook Like Box</a></span></center>
</div>
</div>

Enter your Facebook Page Name

Search for http://www.facebook.com/BloggerTipsPage and replace it with your site’s facebook page URL.

Change the 10 Second Time Delay
The widget pops up 10 seconds after the page finishes loading. Search for the code below and change the number 10000 to a greater or lesser number.
1 second = 1000. 60 seconds = 60000.

.delay(10000)

Popup every time the page loads 
By default, the like box widget only shows up the first time the user visits your page. If you would like the facebook box to popup every time the page loads, then remove this line of code:

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

Display only when user visits your homepage
You can do this by surrounding the widget code with these conditional tags below. Go toTemplate > Edit HTML. Now search for the </body> tag. Place the facebook popup widget right above this body tag.  Make sure to include the conditional tags below. 

REPLACE-WITH-FACEBOOK WIDGET-CODE-HERE

Other Article :