Tuesday , December 12 2017
Home / SEO Tools / JQuery Popup For Facebook Like Box With Timer

JQuery Popup For Facebook Like Box With Timer


JQuery Popup For Facebook Like Box With Timer

Overview Of JQuery Facebook Popup Like Box With Timer:

Hello friends, How are you? today am going to share with you a basic and important method of Install and Add JQuery Facebook Popup like a box with timer and a close option. Here today I will tell you the full and easy method of installing the Pop Up like box in the blogger domain. You need to take much care and follow my step by step method. There is also a video that helps to how to add Jquery popup facebook like box in blogger. There are two methods one of them is auto and second one is manual. Facebook LikeBox JQuery Popup with Timer

How to Install Facebook Popup Like Box With Timer Into Blogger:

  • First of all, you need to go to the dashboard of your blogger.
  • Select the blog and then Navigate the blog template.
  • After that click on the “Edit Template”
  • Now search by your keyboard by pressing “Ctrl+F” key.
  • search there a tag closing head that looks like “</head> and paste the code that is given below.
[stextbox id=”grey”]<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js”></script>[/stextbox]

Note: If you have already added then you need to never again add.First, check and then add.

After adding above code in the “head” tag then,

  • You need to go to blog dashboard.
  • Navigate the Layout with your mouse.
  • Add there a gadget then Pop Up will appear there.
  • Now, after all, paste the given below code in the HTML/JavaScript Box.

Code:

[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 the username of your facebook page with the Red color and include your own user name of like pagge.

If you face any problem then contact me soon.


JQuery Popup For Facebook Like Box With Timer

Check Also

Social Robot Pro + Crack Latest Full Version

Social Robot Pro + Crack Latest Full VersionOverview Of Social Robot Pro Crack: Hello friends …

Leave a Reply

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