Hướng dẫn tạo popup quảng cáo giữa màn hình website, blog

Thích Công Nghệ.Com - Hôm nay Thích Công Nghệ chia sẻ một code popup nữa là  popup quảng cáo giữa màn hình website, blog, một loại popup được sử dụng khá phổ biến trong các site phim, website game.

Cách làm:
Để thêm popup này vào blog các bạn có thể chèn code dưới đây vào trước thẻ </body> hoặc tạo 1 tiện ích HTML/Javacript trong Bố cục blog.

Code: 

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
#popup-giua-man-hinh .headerContainer,#popup-giua-man-hinh .bodyContainer,#popup-giua-man-hinh .footerContainer{max-width:960px;margin:0 auto;background:#FFF}
#popup-giua-man-hinh .padding{padding:20px}
#popup-giua-man-hinh .bodyContainer{min-height:500px}
#popup-giua-man-hinh .popUpBannerBox{position:fixed;background:rgba(0,0,0,0.9);width:100%;height:100%;top:0;left:0;color:#FFF;z-index:999999;display:none}
#popup-giua-man-hinh .popUpBannerInner{max-width:300px;margin:0 auto}
#popup-giua-man-hinh .popUpBannerContent{position:fixed;top:150px}
#popup-giua-man-hinh .closeButton{color:red;text-decoration:none;font-size:18px}
#popup-giua-man-hinh a.closeButton{float:right}
</style>
<div id="popup-giua-man-hinh">
<div class="popUpBannerBox">
<div class="popUpBannerInner">
<div class="popUpBannerContent">
<p><a href="#" class="closeButton">Close</a></p>

<!-- ==================== CODE HIỂN THỊ QUẢNG CÁO ====================-->

<a href="http://www.thichcongnghe.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxye9rV9knn4mZ8hFgqVlIRuhjL1qOIa1fkBiY3vO9IdXPSMU34hvRwCQfiLQGG_KY1P_Gm1OtAo9dKvChaPOI-AUz2VE7TBYth1CMG6-djXgqt4bHMlCDNTzcTDuyHqJDMvvyu-VscpE/s1600/ads-demo.gif"/></a>

<!-- ==================== END HIỂN THỊ QUẢNG CÁO ====================-->
</div>
</div>
</div>
<script type="text/javascript">
function showPopUpBanner() {
$('.popUpBannerBox').fadeIn("2000");
}
setTimeout(showPopUpBanner, 1000); //thời gian popup bắt đầu hiển thị

$('.popUpBannerBox').click(function(e) {
if ( !$(e.target).is('.popUpBannerContent, .popUpBannerContent *' ) ) {
$('.popUpBannerBox').fadeOut("2000");
return false;
}
});
$('.closeButton').click(function() {
$('.popUpBannerBox').fadeOut("2000");
return false;
});
</script>
</div>

Các bạn chèn code muốn hiển thị Popup vào trong đoạn code màu đỏ, các bạn cũng có thể thêm các điều kiện if hiển thị trong blogspot, trong trang chủ hoặc trang bài viết blog. Chúc các bạn thành công.

theo www.share123.vn