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ó 1182 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

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!

 

Code chèn quảng cáo popup cố định trong trang web
4.6 (92%) 5 votes
  • Bình luận
Hosting nên dùng cho WordPress tại Việt Nam
Có thể bạn quan tâm
x