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

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.

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:

Kho plugin của tôi

DevVN Woocommerce Reviews

Plugin mua hàng nhanh cho woocommerce – Woocommerce Quick buy

Plugin kết nối giao hàng tiết kiệm với Woocommerce – GHTK vs Woocommerce

Plugin Kết nối Zalo OA với WordPress

<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!