Overview of Jquery Facebook Popup like a box with timer: Hi Friends ToDay I will tell you That how to Install or Add Jquery Facebook Popup like a box with timer and close option.
In this article help you to the full and simple way to add this popup like box in the blogger domain, let see and follow my step by step instruction, and Also here is a 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.
Important: How To Add Social Content Locker In Blogger? [Complete Guide]
Contents
How to install Facebook Popup like a box with timer into blogger?
1: – First of all Go to 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.
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js”></script>
Note: if you have added already above JQuery Script then never add again. please you need to check it first then take next action
After Adding the above Code on the Above of </head> Tag then
5: – Go to 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 this given Below in this HTML/JavaScript Box,
<!—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%2Fhttps://web.facebook.com/notresponding.us/&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><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=”https://notresponding.us/” target=”_blank”>Not Responding</a>
</div>
<!– How to add JQuery Facebook Like Box with timer into blogger –>
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.