How to Add Facebook PopUp LightBox Widget to Blogger

Adding a facebook pop up is seen in many blogs on your way in internet. This is going to be massive thing to get traffic to your blog. Getting likes to your facebook fan page is so important, because the person who likes the page get the updates, so indirectly the traffic. You might have seen many facebook pop up for blogger article in many blogs. But this tutorial is quite different as the title itself shows that facebook pop up for blogger with lightbox effect. If that’s the thing, I know you want to check this.

NOTE : 

Before getting into the tutorial, I would like to say that this works in the first visit of your site only.

1. Login into blogger.com
2. Select your blog if you have many
3. Then migrate to Layout –> Click on “Add A Gadget“
4. You get a windows open then find for HTML / JAVASCRIPT and click “+” button
5. Then copy the below code and paste it there and make your editing.
6. Also note you need not to mention any name of the widget.
7. Then click on save.
8. You may now visit your blog and have fun.

<style>
/*** Facebook Light Box Script By www.bloggerbulk.com ***/
#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%;
}
#fanbox {
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;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFO5A4OFbX0Qz8TQQ22rsaFEz59WgJw_Z8eru_1LiygFmkjZarwKOHM_Xa7QoTgrFUrnMYY-B0H2bZVk8Ix3S6EH9qrTRfSNvkM4lV7LaIAXhklJZrGlYFYRDMt6HPI-GMnaOJs13pWQP5/s1600/fanclose.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;
}
</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(100).fadeIn(‘medium’);
$(‘#fanclose, #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=’fanbox’><div id=’fanclose’></div><div class=’remove-borda’></div>

<iframe allowtransparency=’true’ frameborder=’0′ scrolling=’no’ src=’//www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/bloggerbulk&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false’

style=’border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;’></iframe>

</div></div>