I
have published Version1 of Facebook type jQuery popup with facebook likebox and today im sharing version2 with much more control options. This one includes a time counter and instead of likebox it displays facebook like box. It also includes a close option. You can also specify whether it to show immediately as soon as a visitor enters your site or after a specified time. The JavaScript code for this widget is created by me HITESH KATARA The installation is extremely easy just follow these steps. This one comparatively loads faster compared to the previous facebook blogger widgets i published so far, and also will worked with all browsers like IE-7+ and other major browsers.How To Install This Widget To Blogger?
As always, it is jQuery based widget, and your blog must have the jQuery plugin. if your blog already have a latest jQuery plugin, then Ignore this step and directly follow the Second step.
If not add the below snippet code before </head> tag
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
Next?
- Customize your settings as you need
- Go to Your Blogger Layaout
- Add Gadget > HTML/JAVASCRPT> Paste Following Code
<!-- jquery popup facebook like box with timer by all-coder @ www.all-coder.blogspot.com -->
<style type='text/css'>
#allcoderpopup{
position: fixed;
top:100px;
z-index:9999;
display:none;
padding:0px;
right:600px;
border:10px solid rgba(82, 82, 82, 0.7);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
border-radius:8px 8px 8px 8px;
width:400px;
height:360px;
overflow:hidden;
}
#allcoderpopup span{
font-size:20px !important;
font-weight:bold !important;
}
#allcoderpopup h1{
background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgduFuVDlmEinti-kmkKCwHlZlrFjqKVR5Ucdvl1gDAtue06JgFb0wCiMnoimTlIVnpzIanYeeXrAS6pDOPYAR8cQYUkZrQ4U98ft54QXemv5WK5XevFDn_TgQ1SY2-enrzfoUlK1CQk1E1/s1600/%255Bwww.gj37765.blogspot.com%255Dh1.png) 98% no-repeat;
border:1px solid #3b5998 !important;
color:#FFFFFF !important;
font-size:20px !important;
font-weight:700 !important;
padding:5px !important;
margin:0 !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
overflow:hidden !important;
}
.htmlarea{
font-size:12px !important;
font-weight:normal !important;
height:265px !important;
padding:1px !important;
background:#fff !important;
border-bottom:2px solid #ddd;
overflow:hidden !important;
}
#acfooter{
text-align:left;
background:#F2F2F2 !important;
height:56px !important;
padding:10px 10px 10px 10px !important;
overflow:hidden !important;
}
#acclose{
float:right;
background-color:#eee !important;
border:1px solid #ccc !important;
color:#111 !important;
font-weight:bold !important;
padding:5px 8px 5px 8px !important;
text-decoration:none !important;
display:inline-block !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
outline:none !important;
position:relative !important;
font-size:18px !important;
margin:1px !important;
}
#acclose:active{
top:1px;
left:1px;
}
.grabthis{
bottom:80px;
font:8px "lucida grande",tahoma,verdana,arial,sans-serif;
position:absolute;
right:6px;
text-align:right;
z-index: 99999;
}
.grabthis a{
color: #000;
text-decoration:none;
}
.grabthis a:hover{
text-decoration:underline;
}
</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function allcoder_ppopup() {
var sec = 10
var timer = setInterval(function() {
$("#acfooter span").text(sec--);
if (sec == 0) {
$("#allcoderpopup").fadeOut("slow");
clearInterval(timer);
}
},1000);
var acwh = jQuery(window).height();
var acpph = jQuery("#allcoderpopup").height();
var acfromTop = jQuery(window).scrollTop()+50;
jQuery("#allcoderpopup").css({"top":acfromTop});}
jQuery(window).fadeIn(allcoder_ppopup).resize(allcoder_ppopup)
//alert(jQuery.cookie('sreqshown'));
//var acww = jQuery(window).width();
//var acppw = jQuery("#allcoderpopup").width();
//var acleftm = (acww-acppw)/2;
var acleftm = 500;
//var acwh = jQuery(window).height();
//var acpph = jQuery("#allcoderpopup").height();
//var acfromTop = (jQuery(window).scrollTop()+acwh-acpph) / 2;
jQuery("#allcoderpopup").animate({opacity: "1", left: "0" , left: acleftm}, 0).show();
jQuery("#acclose").click(function() {
jQuery("#allcoderpopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>
<div id="allcoderpopup">
<h1>Join us on Facebook</h1>
<div class="htmlarea">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fkatarahitu&width=400&colorscheme=light&show_faces=true&border_color=%23fff&stream=false&header=false&height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe>
<div class="grabthis">
By <a href="http://www.allcoder.blogspot.com/" target="_blank">All-coder</a> / <a href="http://all-coder.blogspot.in/2013/02/new-version-of-jquery-popup-facebook_16.html" target="_blank">+Get This!</a>
</div>
</div>
<div id="acfooter">
Please wait..<span>10</span> Seconds
<a href="#" id="acclose" onclick="return false;">Cancel</a>
</div>
</div>
<!-- End popup -->
- Change Facebook Username "KataraHitu" to Yours Facebook Username
- Change Your Timing as given there '10'
- You Can Add your text toward Cancel Anything Like Skip,Not now etc
If Any Problem Ask Freely :)
Post A Comment: