Đăng bởi Huy Tập lúc 24/12/2013 5

Hướng dẫn tạo popup quảng cáo giữa màn hình website, blog
Hình thức popup là hình thức quảng cáo banner mà khi người dùng truy cập vào một website nào đó sẽ tự động bật ra website mình muốn quảng cáo, lần trước share123.vn đã giới thiệu một số kiểu popup
, các bạn có thể tham khảo:
Hôm nay share123.vn 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.share123.vn"><img src="https://4.bp.blogspot.com/-YSTc_ORG9jI/V_m5KA6vwhI/AAAAAAAAgCw/XTA1KBK1WacDrkeA9MywmaCWJWJZks-pwCLcB/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.

Tags:

5 nhận xét:

  1. Trả lời
    1. chèn trong thẻ body bạn nhé


      ------
      ---
      chèn code
      ---
      --

      Xóa
  2. trong thẻ body chèn vị trí nào cũng được hả bạn

    Trả lờiXóa
  3. Cảm ơn bạn đã chia sẻ thông tin !
    ......................................
    LAPTOP ĐẠI DƯƠNG
    118/17 Trần Quang Diệu, P.14, Q.3, HCM Hotline: 0906.112.812 - 0909730124 (A MINH)
    Click xem chi tiết:
    laptop xách tay giá rẻ tphcm hoặc laptop xach tay gia re tphcm

    Trả lờiXóa

Lưu ý: Khi để lại Nhận xét bạn nên click vào ô "Thông báo cho tôi" ở dưới để nhận phản hồi từ Admin

Đó chưa phải tất cả ... Chúng tôi còn 100 mẫu blog đẹp khác. View all Mẫu Template Blogger

Hãy nhanh tay gọi điện ngay đến chúng tôi theo số 0988227905 hoặc đặt hàng thiết kế ngay hôm nay theo mẫu form bên dưới.

Chúng tôi sẽ hoàn thành trong thời gian sớm nhất cho quý khách

Hãy truy cập để trải nghiệm dịch vụ của chúng tôi
Đã có
lượt Khách Hàng quan tâm đến dịch vụ của chúng tôi

Sử dụng nội dung ở trang này và dịch vụ tại Share123.vn có nghĩa là bạn đồng ý với Thỏa thuận sử dụng và Chính sách phát triển của chúng tôi.

www.Share123.vn - Website chuyên thiết kế blogspot, zip blogger, thiết kế blog chuẩn seo, blogger responsive, Thủ thuật Blogspot, Free Template Blogspot, kho giao diện blog đẹp, premium template blogger, free template blogger, Với kinh nghiệm nhiều năm trong nghề thiết kế Temple, design skin web chúng tôi cam kết tạo ra những sản phẩm chất lượng, tối ưu đến tay người dùng, thiết kế theo yêu cầu của quý khách, cùng đội ngủ support chuyên nghiệp nhiệt tình, ...

Copyright 2013 © Share123.vn - Blogger Team. All right Reserved - Hotline: 0988.227.905 - 0904.227.905 - Email: nguyenhuytap@gmail.com - website: www.share123.vn
Hoc Wordpress Online