Add JQuery Facebook Popup like box with timer and close

Overview of Jquery Facebook Popup like box with timer:

Hi Friend To Day I will be tell you That how to Install or Add Jquery Facebook Popup like box with timer and close option, In this Article help you to full and simply way to adding this popup like box in blogger domain, let see and follow my step by step instruction, and Also here is video that provides how to add Jquery popup facebook like box in blogger with two method first is Auto and 2nd is Manually so Let see this video and add this .

Popup like box with timer
how to add facebook like box into blogger with time

How to installed facebook Popup like box with timer into blogger:-

1: – First of all Goto your Blogger Dashboard,
2: – Select your Blog and Navigate your mouse to Template,
3: – After Clicking on Template now click on Edit HTML,
4: – Let Search or Find by Pressing CTRL+F the Tag Closing Head as like </head> and paste these code that is Give blow on the Closing Head means </head> to above.

 [stextbox id=”grey”]<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js”></script>[/stextbox]

 [stextbox id=”warning”]Note: if you have added already above JQuery Script then never add again. please you need to check it first then take next action[/stextbox].

After adding above code on the above of </head> Tag then

5: – Goto your Blogger Dashboard and  Navigate your Mouse on Click Layout
6: – Add New Gadget then a popup will be appear
7:- Select HTML/JavaScript there
8: are- Now Paste these code thisGiven Below in this HTML/JavaScript Box,

 [stextbox id=”grey”]<!—How to add JQuery Facebook Like Box with timer into blogger->
<style type=’text/css’>
#makingdifferentpopup{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;
}
#makingdifferentpopup span{
font-size:20px !important;
font-weight:bold !important;
}
#makingdifferentpopup h1{
background:#6d84b4 url(http://4.bp.blogspot.com/-rNUTIpDQ21s/T0NqE_vv6GI/AAAAAAAACps/GSoWE2n9Oy8/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;
}
#mdfooter{
text-align:left;
background:#F2F2F2 !important;
height:56px !important;
padding:10px 10px 10px 10px !important;
overflow:hidden !important;
}
#mdclose{
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;
}
#mdclose: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 makingdifferent_ppopup()  {
var sec = 20
var timer = setInterval(function() {
$(“#mdfooter span”).text(sec–);
if (sec == 0) {
$(“#makingdifferentpopup”).fadeOut(“slow”);
clearInterval(timer);
}
},1000);
var mdwh = jQuery(window).height();
var mdpph = jQuery(“#makingdifferentpopup”).height();
var mdfromTop = jQuery(window).scrollTop()+50;
jQuery(“#makingdifferentpopup”).css({“top”:mdfromTop});}
jQuery(window).fadeIn(makingdifferent_ppopup).resize(makingdifferent_ppopup)
//alert(jQuery.cookie(‘sreqshown’));
//var mdww = jQuery(window).width();
//var mdppw = jQuery(“#makingdifferentpopup”).width();
//var mdleftm = (mdww-mdppw)/2;
var mdleftm = 500;
//var mdwh = jQuery(window).height();
//var mdpph = jQuery(“#makingdifferentpopup”).height();
//var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
jQuery(“#makingdifferentpopup”).animate({opacity: “1”, left: “0” , left:  mdleftm}, 0).show();
jQuery(“#mdclose”).click(function() {
jQuery(“#makingdifferentpopup”).animate({opacity: “0”, left: “-5000000″}, 1000).show();});});
</script>
<div id=”makingdifferentpopup”>
<h1>Join us on Facebook</h1>
<div class=”htmlarea”>
<iframe src=”//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com/fullversionforever&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250″ scrolling=”no” frameborder=”0″ style=”border:none;overflow:hidden; width:400px; height:250px;” allowtransparency=”true”></iframe></div><div id=”mdfooter”>
Please wait..<span>20</span> Seconds
<a href=”#” id=”mdclose” onclick=”return false;”>Skip it</a>
</div>
</div>
<div class=”grabthis”>
By <a href=”http://www.fullversionforever.com/” target=”_blank”>Full Version Software</a>
</div>
<!– How to add JQuery Facebook Like Box with timer into blogger –>[/stextbox]

 Additional Customization for your own username in Popup like box with timer:-

Change your Facebook Like page username where is line colored Red and gave on your own like Page Username

Thanks if you have facing problem then share with me.

Next Post
Previous Post

Leave a Reply

seven + 6 =