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

Share

Tweet

Google+

Email

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

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

<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

ĐIỀU KHOẢN SỬ DỤNG

1. Blog chúng tôi hoạt động hoàn toàn tự nguyện nhằm mang đến cho các bạn sự trải nghiệm tốt nhất.
2. Các tập tin được cung cấp link tải miễn phí.
3. Mọi người có thể chia link tải từ Blog chúng tôi qua các trang hoặc diễn đàn khác mà không phải xin phép tác giả hoặc ghi nguồn.
4. Chúng tôi không chịu trách nhiệm với lỗi phát sinh trong quá trình sử dụng tập tin.
5. Nếu các bạn gặp khăn có thể liên hệ trực tiếp với chúng tôi.

Bài đăng mới hơn Bài đăng cũ hơn