Tạo Popup Quảng cáo dưới góc màn hình đơn giản cho Blogspot

Popup là một cửa sổ tự động nhảy ra mà bạn ko hề bấm chuột khi bạn đang lướt web. Nội dung của Popup thường là quảng cáo, nhưng cũng có thể là nội dung khác. Pop-up đơn giản chỉ là một bảng quảng cáo về một vấn đề gì đó của một trang web nào đó khi bạn vào và nó tự động bật ra thôi.

Ở bài trước mình đã chia sẻ cho các bạn tổng hợp các code popup quảng cáo thông dụng mà mình tổng hợp lại được. Bài này mình tiếp tục chia sẻ một dạng popup nữa hiển thị ngay dưới góc màn hình. 

*Lưu ý: Popup này có thể gây khó chịu với người đọc bài viết vì nó sẽ hiện lại sau khoảng 15 giây khi người đọc tắt quảng cáo.
Xem thêm: Tổng hợp code Popup quảng cáo cho Blogger/Blogspot

Các bước thực hiện

Bước 1: Dán đoạn CSS dưới đây bên trong cặp thẻ <b:skin>...</b:skin>

Copy
.sticky_ads{position:fixed;left:0;bottom:0;z-index:9999999}
.sticky_ads .ads_wrapper{position:relative}
.sticky_ads .ads_close{position:absolute;z-index:999999;top:-10px;right:-10px;background:#7577a9;display:block;width:20px;height:20px;border-radius:50px;text-align:center;color:#fff;font-size:14px;line-height:19px;cursor:pointer}
.sticky_ads p{text-align:center;margin-bottom:0;padding:5px 0;background:ddd}
.sticky_ads .ads_content{padding:0;font-size:16px}
.sticky_ads .one-ads{background:#fff;-webkit-box-shadow:0 0 13px -1px #7577a9;-moz-box-shadow:0 0 13px -1px #7577a9;box-shadow:0 0 13px -1px #7577a9;border:solid 2px #7577a9}
.ads_lot { display:inline-block; width: 336px; height: 280px; } 
@media (min-device-width:970px) {.ads_lot{ width: 300px; height: 250px;}}

Bước 2: Chèn đoạn code dưới đây phía trên thẻ đóng </head>

Copy
<div class='sticky_ads'>
</div>
<script language='javascript'>
var stickyAd = []; 
stickyAd.push({
title: "title_cua_ads",
image : "",
link : "",
summary : "<div class='ads_lot'><!-- chèn quảng cáo vào đây--></div>"
});
</script>
<script>
if (stickyAd !== "undefined" && stickyAd.length > 0 && jQuery(window).width() > 350)
{

jQuery(document).on("click", ".sticky_ads .ads_close", function(){
jQuery('.sticky_ads').hide();
current_sticky_ads = getRandomInt(stickyAd.length);
show_timer(current_sticky_ads, 60000);
}); 
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
} 
current_sticky_ads = getRandomInt(stickyAd.length); 
show_timer(current_sticky_ads, 15000);
} 
function show_timer(current_sticky_ads, timer)
{
var item = stickyAd[current_sticky_ads];
setTimeout(function(){
var html = '<div class="one-ads">';
html += '<div class="ads_wrapper">';
html += '<span class="ads_close"><i class="fa fa-times"></i></span>';
html += '<div class="ads_content">';
html += "{content}";
html += '</div>';
html += '</div>';
html += '</div>'; 
if (item.summary !== ''){
var html_content = item.summary;
}
else {
var html_content = '<a href="{link}" target="_blank" rel="nofollow"><img src="{image}" /></a>';
html_content = html_content.replace('{image}', item.image);
html_content = html_content.replace('{link}', item.link);
}
html = html.replace('{title}', item.title);
html = html.replace('{content}', html_content); jQuery('.sticky_ads').html('').fadeIn('slow').append(html);
}, timer);
}
</script>

Bước 3: Chỉnh sửa thay mã quảng cáo và lưu mẫu.

Lời kết

Như phần lưu ý mình đã nói nó có thể gây khó chịu cho người đọc lên mình không khuyến khích các bạn dùng quảng cáo popup này cho lắm.

Source: sibenit.net

Admin: Lê Quốc Dũng

Chào mừng bạn đã đến với Blog của tôi. Website chia sẻ Thủ Thuật - Phần Mềm - Ảnh Đẹp - PSD tổng hợp, ... được cập nhật liên tục. Mong được mọi người quan tâm.