Saturday , February 25 2017
Home / SEO Tools / Blogger Tricks / Add JQuery Facebook Popup like box with timer and close

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.

<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 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,

<!—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 –>

 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.

Check Also

High PR Auto Approve Blog Commenting Sites List

Auto Approve Dofollow Blog Commenting Sites for Backlinks

Auto Approve Dofollow Blog Commenting Sites for BacklinksOverview of auto approve comments Dofollow list: Download free …

Leave a Reply

Your email address will not be published. Required fields are marked *

eleven + 5 =