Facebook Popup Like Box for Blogger with new features

Hey! Bloggers. Now I want to share with you a Facebook Popup Like Box Widget with new features. One of the best feature is dark-light effect. Yes! This box will show a dark/black background around Facebook like box because of this your visitor will definitely click on like button. This is a one time Popup box - means this will don't annoy your blog visitors by showing again and again. This will show FB like box once to a new visitor of your blog. Amazing? As you can see we are also using this widget for getting more likes to our fan-page. Now read below for knowing how to add Facebook Popup Like Box to Blogger with new features.

Features of Facebook Popup Like Box

• Light box effect - This will show a dark/black background around FB popup box
• Cookies enabled - Using cookies option this widget will popup once to new visitor
• Exit button - If any visitor already have liked your fan-page then the visitor can close this box
• No customization required - Yes! You don't have to customize it, just you have to replace URL

Adding Facebook Popup Like Box to Blogger blog

1. Just go to Blogger Dashboard
2. Select your desired Blog and go to its Layout section
3. Click on Add a gadget button and select HTML/JavaScript from options
4. Copy and paste below coding

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fansback {
display:none;
background:rgba(0,0,0,0.9);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fans-exit {
width:100%;
height:100%;
}
#fansbox {
background:white;
width:422.1px;
height:272.1px;
position:absolute;
top:59%;
left:64%;
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: 5.1px;
-moz-border-radius: 5.1px;
border-radius: 5.1px;
margin: -221px 0 0 -375px;
}
#fansclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9bobdTYXNNVap4l08KrWaMyypjrxOFVTNKBbBLZ48B1nH_hAKpchzHnstaKqopVzfWQw-cmXy-l6R6ORaQx1AhIiC-GTTqy_P38-iXr8krCDl8XivYGhn5hq70eC-7d4ns3miN3Y8s1nC/s1600/fansclose.PNG) no-repeat;
height:15px;
padding:20.1px;
position:relative;
padding-right:40.1px;
margin-top:-20.1px;
margin-right:-22.1px;
}
</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'){
$('#fansback').delay(100).fadeIn('medium');
$('#fansclose, #fans-exit').click(function(){
$('#fansback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>

<div id='fansback'><div id='fans-exit'></div><div id='fansbox'><div id='fansclose'></div><div class='remove-border'></div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/AllBlogThings&width=401&height=254&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false'

style='border: no; overflow: hidden; margin-top: -20px; width: 403px; height: 231px;'></iframe>
</div></div>

5. Just replace http://www.facebook.com/AllBlogThings with your Facebook fan-page URL and click on Save button.
Congratulations:  Facebook Popup Like Box for Blogger with new features is added to your blog.

Final words

I love to help my fellows therefore I shared this trick with you all. Make me happy by sharing this post with other bloggers and social media users. If you want some more tricks or widgets then please drop a comment below I will do my best for you. Happy Blogging!