Most of people facing problem with previous facebook pop up like box widget so I'm gonna post to "New Mini Facebook Pop Up Light Like Box Widget for Blogger ".It's very fast loading and light widget box. This widget Box easily customise and use into blogger blog.
How to Add Mini Facebook Pop Up LikeBox to Blogger →
First Method :
1 - Go to your blog dashboard and click the model.
2 - Then click on Edit HTML.
3 - Hold the CTRL + F and search for:
</head>
4 - And, above it, paste the following code:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=3.3.1' type='text/javascript'/> <script src='http://dl.dropbox.com/u/73386157/codigos/minipopup/jquery.cookie.js' type='text/javascript'/> <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>
5 - Then again hold the CTRL + F and search for:
]]></b:skin>
6 - And, above it, paste the following code:
#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%;-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/AVvXsEhi9HfMN2Kv6_Y0hUzcKftfMoIiJNkdWIaxjgk-fqahz6y8a6nobPDcdDJkrj4xqEJMpGPMB1yymXdKUB2jSveFmMSHHdDUkBdE1Pvm13ind94QlUCLa_gTZhyw6OgOdGxirEGyYNSCFK_P/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;}
7 - And, last, hold the CTRL + F and search for:
<body>
8 - And below it paste the following code:
<div id='fanback'><div id='fan-exit'/><div id='fanbox'><div id='fanclose'/><div class='remove-borda'/> <iframe src="//www.facebook.com/plugins/likebox.php?href= http://facebook.com/Digitalhubinc&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false&appId=329902783740649" scrolling="no" frameborder="0" style="border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;" allowTransparency="true"></iframe> </div></div>
9 - Save All and Exit.
Second Method :
Step 1. Add Facebook Lightbox Widget
- Go to Blogger>> Your Blog >> Layout >> “Add a Gadget’. If you are new, follow the link below to add HTML and Javascript widget into your Blogger blog.
- Now add the following codes given below as a widget to your Blog.
<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%;
}
#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 #3b60aa;
-moz-box-shadow: inset 0 0 50px 0 #3b60aa;
box-shadow: inset 0 0 50px 0 #3b60aa;
-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/AVvXsEjWXOPD8AxvoFJn6BfdvFSi2T-AooFWQR6VaysAjXkLarlXSD8BgTZPHnHM2fspNniW1cOxwZkcjEMIGHSGQXDfz8bRPlUGdT-rxsSfcFkwfTLtBo8h3eHnyhbNEgaK764E9hHPBIY7o93s/s1600/popup_exit.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/digitalhubinc&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>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
- If you have added the above code, Save your widget.
- You have done. Now if you want to customize it proceed to further steps given below.
Step 2. Customize Facebook Lightbox Widget
- Now expires 7 will place the number of days it took to reappear again the Popup user. By default this in 7 days.
- In digitalhubinc the user name of your facebook fan page.
If the user of your page on facebook is in this format: https://www.facebook.com/pages/your-Blogger/ 161,470,857,350,835.The code highlighted in blue is Jquery, if you already have in your template then remove.
Therefore, you should replace digitalhubinc is only your product, ie in this case: 161470857350835
I hope you enjoy this facebook fan popup widget. If you like this widget then comment below and share on social media.
![Pin It](http://pinterest.com/pin/create/button/?url=https://digitalhubinc.blogspot.com/2013/05/New-Mini-Facebook-Pop-Up-Light-Like-Box-Widget-for-Blogger.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7nX0uFzAwVdE5DAr6MykhDYpfzZae3ihrTtFVIZFYC4jZfGgxW04ux_U3Qexf2I-h1mZDznJijlhrHxsbB0au-_ZsDopjbyj2lOh0SkfH6HT7YKKFN2LEuDTu8k79HinykC_rgd5p3-td/s72-c/facebook+Pop+Up+like+Box.png&description= Most of people facing problem with previous facebook pop up like box widget so I'm gonna post to " New Mini Facebook Pop Up L...){kind=link}
0 comments:
Post a Comment