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ó 3999 Views

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

Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.

Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều

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!

 

4.1/5 - (7 votes)
  • Bình luận
Sản phẩm nổi bật của Toản
x