Facebook Like Popup box for blogger it is easy to add in blog you need to just some java script for it. Add this enticing widget to your site and a facebook like box will pop up with the lightbox effect when a user visits your page. The facebook widget will show up on your page about 30 seconds after the page loads (but can be customized).

How To add Facebook Like Popup Widget in Blog?

You can easily add or customize this Facebook Like Popup Box Widget just follow My way.

1. Go to blogger dashboard > Layout

2. Now click on > Add a gadget

3. A box will appear select > HTML/Java Script box by scrolling until you find it

4. Now copy All code bellow shown.

#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/AVvXsEixrwIBi19zQYXjcYB-G2WKLifzV1iWtASlSY5nR5UWs9_9FWnHtaXt6Yle8Rr3tSfFsfTVzRoL-0prVD4j5mfeveiATqumY8bG0j6_A519g946RCY7FwMBi33_PdNlAO8HLzBmVOnRjfA/s1600/Close.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 a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}

//<![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;
};
//]]>

jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(30000).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});

4. Now paste this code into the box and click on >  Save > Save arrangement.

How To customize this code?

1. Change www.facebook.com/worldfreeandroidapps > worldfreeandroidapps with your facebook fan page username.

2. Change ($.cookie('popup_user_login') != 'yes')  > 'yes' to 'no' If you want show this Facebook Like Box Widget in every time when page load.

3.Change .delay(30000)   > (30000) to as you want to show delay (Note: 30000 means 30 seconds if you want to change delay time jut put 000 after second eg : 60000 means 60 sec)

Flims4fun

Thursday, December 4, 2014

How To Add Facebook Popup Like Box with Delay Time Blogger Tricks

No comments:

Post a Comment