ANHLEVAN.TK chia sẻ đến các bạn cách tạo popup share and like page facebook
Bạn thực hiện theo hướng dẫn dưới đây:
Bước 1. Bạn tải về 2 file .css và .js dưới đây và up lên hosting của bạn
- Xem và tải file .css
css
/* Created by Anhlevan */
#makingdifferentpopup{position:fixed;margin-top:20px;z-index:9999;display:none;padding:0px;right:50%;margin-left:auto;border:10px solid rgba(82, 82, 82, 0.7);-webkit-background-clip: padding-box;background-clip: padding-box;-webkit-border-radius:8px 8px 8px 8px;-moz-border-radius:8px 8px 8px 8px;border-radius:8px 8px 8px 8px;width:400px;height:241px;overflow:hidden;}
#makingdifferentpopup span{font-size:16px !important;font-weight:bold !important;}
#makingdifferentpopup h1{background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAQXmsmDQpCyLvRKtddCGaXkgKYICxSIGbixuxiTLbyU_w_B_8p4rc33XRLZsSiTJroBJtDrwsaJuu9yM0JAa4Rlq1dPMyKN2NWWngZSJWd-5HAkUa96VkliQIsYHlXE_1sqUhrNmJ0u6v/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:150px !important;padding:1px !important;background:#fff !important;border-bottom:2px solid #ddd;overflow:hidden !important;}
#mdfooter{text-align:left;background:#F2F2F2 !important;height: 32px !important;padding: 15px !important;overflow:hidden !important;}
#mdclose{float:right;background-color:#eee !important;border:1px solid #ccc !important;color:red !important;font-weight:bold !important;padding: 6px 15px !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:12px !important;margin-top:-6px !important;}
#mdclose:active{top:1px;left:1px;}
.grabthis{bottom:60px;font:12px "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{color:blue;text-decoration:none;}
- Xem và tải file .js
js
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();});});
Bước 2. Bạn đưa vào cuối bài viết code sau và lưu lại (Chú ý phần màu đỏ):
HTML
<!-- popup share and like Page facebook --> <div id="makingdifferentpopup"> <h1>Join us on Facebook</h1> <div class="htmlarea"> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=LINK PAGE FACEBOOK&width=400&colorscheme=light&show_faces=true&border_color=%23fff&stream=false&header=false&height=250" style="border: none; height: 250px; overflow: hidden; width: 400px;"></iframe> <div class="grabthis">Created by <a href="https://www.anhlevan.tk/" target="_blank">Anhlevan</a></div> </div> <div id="mdfooter">Please wait . . . <span>20</span> seconds<a href="#" id="mdclose" onclick="return false;">Cancel</a></div> </div> <link rel="stylesheet" type="text/css" href="LINK FILE .css"> <script src='LINK FILE .js' type='text/javascript'> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js" type="text/javascript"></script> <!-- End popup -->
Xem demo
☞ Nếu bạn có bất kỳ vấn đề nào với bài viết này hãy comment vào bên dưới, mình sẽ hồi âm sớm nhất có thể.
Tags:
blogspot