Thủ thuật tạo Popup quảng cáo hiển thị giữa trang cho website/blogspot

5/5 - (1 bình chọn)

AnbiWeb chia sẻ thủ thuật tạo POPUP quảng cáo hiển thị giữa website, quảng cáo hiển thị giữa trang Blogspot.

chia sẻ Code Popup hiện quảng cáo hoặc thông báo ở giữa trang tại AnbiWeb thì có khá nhiều bạn quan tâm tới loại Code Popup này.

Gần đây khi sử dụng những code Popup làm khó chịu cho người xem khiến tỷ lệ thoát khỏi trang web nhiều đã không còn được ưa chuộng và sử dụng. Mặc dù vậy, người quản trị Web vẫn phải có những hình thức cho thuê quảng cáo hoặc tạo những thông báo khác nhau làm chú ý được ngay với người xem.

Không phiền toái và không khó khăn, Popup hiện quảng cáo giữa trang dưới đây sẽ giúp bạn thực hiện được điều đó.

Rất đơn giản, bạn chỉ cần chèn đoạn code sau dưới <body> hoặc trên </body>

<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: 0;
    background: #fd4747;
    background: -moz-radial-gradient(center, ellipse cover, #fd4747 0%, #cb1515 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fd4747), color-stop(100%,#cb1515));
    background: -webkit-radial-gradient(center, ellipse cover, #fd4747 0%,#cb1515 100%);
    background: -o-radial-gradient(center, ellipse cover, #fd4747 0%,#cb1515 100%);
    background: -ms-radial-gradient(center, ellipse cover, #fd4747 0%,#cb1515 100%);
    background: radial-gradient(ellipse at center, #fd4747 0%,#cb1515 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd4747', endColorstr='#eaeaea',GradientType=1 );
    max-width: 700px;
    width: 100%;
    left: 0;
    right: 0;
    margin: auto;
    max-height: 230px;
    overflow: hidden;
    padding-bottom: 30px;
    bottom: 0;
}
#popup-giua-man-hinh label#label_3, #popup-giua-man-hinh label#label_6, #popup-giua-man-hinh .form-label.form-label-auto {
    display: none !important;
}
.supernova .form-all, .form-all {
    background-color: transparent !important;
    border: 1px solid transparent;
}
.formFooter, .formFooter-heightMask {
    display: none !important;
}
.web5c-tt {
    text-align: center;
    color: #fff;
    padding: 25px;
}
.web5c-tt span {
    font: bold 20px arial;
    margin: 0 0 20px 0;
    float: left;
    width: 100%;
}
.web5c-tt p {
    font: 16px arial;
}
#popup-giua-man-hinh .closeButton {
    color: #333;
    text-decoration: none;
    font-size: 18px;
    background: #fff;
    border-radius: 50px;
    padding: 5px 10px;
    text-align: center;
}
.popUpBannerContent p {
    margin: 0;
    padding: 0;
}
#popup-giua-man-hinh a.closeButton{float:right}
.web5c-form {
    margin: 0 0 0 30px;
}
</style>
<div id="popup-giua-man-hinh">
<div class="popUpBannerBox">
 <div class="popUpBannerInner">
  <div class="popUpBannerContent">
   <p><a href="#" class="closeButton">x</a></p>

   <div class='web5c-tt'>
<span>ĐĂNG KÝ NHẬN THÔNG TIN DỰ ÁN</span>
<p>Tất cả tài liệu dự án bao gồm: Thiết kế, mặt bằng, chính sách mới, pháp lý, bảng giá .... Tất cả trong 1 lần tải.</p>
   </div>
   
   <div class='web5c-form'>
<script type="text/javascript" src="https://form.jotform.me/jsform/71912012246446"></script>
   </div>
   
  </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>

Bài chia sẻ tạo Popup quảng cáo này, web5c chia sẻ Popup tạo form đăng ký nhận thông tin của khách hàng thông qua công cụ Jotform.

Mọi thắc mắc bạn đọc vui lòng để lại Comment phía dưới để cùng nhau trao đổi và học hỏi kinh nghiệm thiết kế Blogspot cũng như cập nhật các thủ thuật Blogspot mới nhất.

Tag: Popup hiện quảng cáo giữa trang, Popup quảng cáo

Zubi

Công ty phần mềm Zubi Cloud là 1 thành viên trực thuộc Công ty Zubi, tự hào là công ty đầu tiên - số 1 tại Việt Nam cung cấp dịch vụ Web đám mây Google Blogspot từ những năm 2010. Zubi Group là đơn vị chủ quản: Zubi Cloud, Zumi Media, Amuni...

All Posts