Code chèn quảng cáo popup cố định trong trang web

Cập nhật lần cuối 06/05/2017 by trong HTML&CSS vào 27/04/2016 có 1650 Views
Các bạn ơi! TINO HOST đang giảm 51% Unlimited Hosting chỉ còn 39k/tháng thôi nha. Hosting KHÔNG GIỚI HẠN nha
Chi tiết Về Tino Host tại đây
Chi tiết giá Hosting tại đây

Dưới đây là code chèn quảng cáo dạng popup cố định trong trang web.

Chức năng: Hiển thị quảng cáo cố định kiểu popup, góc dưới, bên phải  của trình duyệt.
Tính năng:
– Thu nhỏ quảng cáo (Có tác dụng trên tất cả các trang con của web).
– Tắt quảng cáo không hiển thị lại trong vòng 1 ngày (Có tác dụng trên tất cả các trang con của web).
– Cookie ghi nhớ thao tác của khách truy cập: thu nhỏ, tắt trong vòng 1 ngày.

quang_cao_popup_co_dinh

DEMO ONLINEDOWNLOAD CODE

Trong code này mình cần tới thư viện Font-Awesome lên nhớ cho vào nhé.

HTML:

<div class="svl_ads_right">
 <div class="ads_right_content"><img src="ads.png" alt=""></div>
 <div class="ads_right_title">Hotline Tư Vấn</div>
 <div class="ads_right_controls">
 <span class="ads_right_close_button"><i class="fa fa-close"></i></span>
 <span class="ads_right_ex_button"><i class="fa fa-chevron-down"></i></span>
 </div>
 </div>

CSS Inline:

/*ADS*/
 .svl_ads_right *,.svl_ads_right {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
 }
 .svl_ads_right{
    position: fixed;
    bottom: 0;
    right: 0;
    display: none;
    z-index: 9999;
 }
 .ads_right_title {
    position: relative;
    background: rgb(75, 79, 85);
    color: #fff;
    height: 38px;
    padding: 10px;
    font-family: Arial;
    min-width: 180px;
    cursor: pointer;
    font-size: 13px;
 }
 .ads_right_content {
    line-height: 0;
 }
 .ads_right_controls {
    position: absolute;
    bottom: 5px;
    right: 5px;
 }
 .ads_right_controls span {
    display: block;
    float: right;
    margin-left: 5px;
    cursor: pointer;
    color: #fff;
    line-height: 29px;
 }
 .ads_right_controls span:hover {
    color: #1DCAFF;
 }
 .hidden_ads_right{
    display: none !important;
 }

Script Inline:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $(window).load(function(){
 //Cookies
 var Cookie =
 {
 set: function(name, value, days)
 {
 var domain, domainParts, date, expires, host;

 if (days)
 {
 date = new Date();
 date.setTime(date.getTime()+(days*24*60*60*1000));
 expires = "; expires="+date.toGMTString();
 }
 else
 {
 expires = "";
 }

 host = location.host;
 if (host.split('.').length === 1)
 {
 document.cookie = name+"="+value+expires+"; path=/";
 }
 else
 {
 domainParts = host.split('.');
 domainParts.shift();
 domain = '.'+domainParts.join('.');

 document.cookie = name+"="+value+expires+"; path=/; domain="+domain;
 if (Cookie.get(name) == null || Cookie.get(name) != value)
 {
 domain = '.'+host;
 document.cookie = name+"="+value+expires+"; path=/; domain="+domain;
 }
 }
 },

 get: function(name)
 {
 var nameEQ = name + "=";
 var ca = document.cookie.split(';');
 for (var i=0; i < ca.length; i++)
 {
 var c = ca[i];
 while (c.charAt(0)==' ')
 {
 c = c.substring(1,c.length);
 }

 if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
 }
 return null;
 },

 erase: function(name)
 {
 Cookie.set(name, '', -1);
 }
 };
 if(Cookie.get('close_ads_right')){
 $('.svl_ads_right').addClass('hidden_ads_right');
 }
 if(Cookie.get('ex_ads_right')){
 $('.ads_right_content').slideToggle('slow',function(){
 if($('.svl_ads_right').hasClass('ex_ads_right')){
 $('.svl_ads_right').removeClass('ex_ads_right');
 $('.ads_right_ex_button i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
 Cookie.erase('ex_ads_right');
 }else{
 $('.svl_ads_right').addClass('ex_ads_right');
 $('.ads_right_ex_button i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
 Cookie.set('ex_ads_right',1);
 }
 });
 }
 $('.svl_ads_right').css('display','block');
 $('.ads_right_ex_button,.ads_right_title').click(function(){
 $('.ads_right_content').slideToggle('slow',function(){
 if($('.svl_ads_right').hasClass('ex_ads_right')){
 $('.svl_ads_right').removeClass('ex_ads_right');
 $('.ads_right_ex_button i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
 Cookie.erase('ex_ads_right');
 }else{
 $('.svl_ads_right').addClass('ex_ads_right');
 $('.ads_right_ex_button i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
 Cookie.set('ex_ads_right',1);
 }
 });
 });
 $('.ads_right_close_button').on('click',function(){
 $('.svl_ads_right').addClass('hidden_ads_right');
 Cookie.set('close_ads_right',1,1);
 });
 });
});
</script>

Chúc các bạn thành công!

 

Các bạn ơi! TINO HOST đang giảm 51% Unlimited Hosting chỉ còn 39k/tháng thôi nha. Hosting KHÔNG GIỚI HẠN nha
Chi tiết Về Tino Host tại đây
Chi tiết giá Hosting tại đây
  • Bình luận
Hosting nên dùng cho WordPress tại Việt Nam
Nhắn tin cho tôi 0965.419.096
Sản phẩm nổi bật của Toản
x