Tạo Banner quảng cáo có nút tắt (x) cho blogspot

Việc tạo banner quảng cáo để phục vụ các hoạt động quảng cáo tìm kiếm lợi nhuận là điều mà nhiều Webmaster/Blogger mong muốn.

Và dưới thủ thuật sau đây sẽ giúp bạn tạo 1 banner đồng thời có nút button (x) để người dùng có thể tắt để ngừng xem quảng cáo để tránh ảnh hưởng đến trãi nghiệm trên website/blog chúng ta.

Qua thủ thuật tạo banner quảng cáo này chúng ta cũng sẽ học về 1 chút javascript rất hữu ích.

Banner được trên menu và nó button tắt (x)
Hướng dẫn cài đặt

1. Đăng nhập vào Blogger

2. Giao diện > chèn code sao vào vị trí muốn hiện

<style>
#prova span{cursor:pointer;color:#cbcbcb;display:inline-block;font-size:20px;font-weight:700;line-height:65px;position:absolute;right:0;text-align:center;top:0;width:80px}
 .hide {display: none}
.show {display:block}
#lower-wrapper{max-width:1200px}
</style>
<div id='lower-wrapper'>
<div class='show' id='prova'><span>X</span>
<a href='http://xenanghcm.com/' target='_blank'><img alt='' src='https://3.bp.blogspot.com/-5jBNgv1TLYw/WpepMVPRE2I/AAAAAAAAMkg/iEPHVWE_idMYZ9bQLDRwp8RC_N6KZ-b9gCLcBGAs/s1600/xenangeps.jpg'/></a>
</div>
</div>
Nhớ thay lại banner quảng cáo của bạn và đường dẫn

 3. Chèn Javascript cài tính năng tắt Banner quảng cáo

Chèn trước /body hoặc /head nhé. Đặc biệt nên chèn sau thư viện jquery.
<script type='text/javascript'>
$(&quot;#prova&quot;).click(function () {
    $(this).toggleClass(&#39;show hide&#39;);
});
</script>

Giải thích cách hoạt động:

Ban đầu Banner quảng cáo sẽ sử dụng #prova{...}class có thuộc tính .show{display:block}
Khi click vào sự kiện #prova lúc này là nút (x) thì javascript sẽ đổi thuộc tính .show{display:block} thành .hide{display:none} từ đó sẽ ẩn đi quảng cáo.

Vậy là chúng ta đã tìm hiển tính năng thú vị của javascript là Click để thay class rồi đó. Về sau khi tìm hiểu thêm nhiều javascript khác mình sẽ chia sẻ thêm cho các bạn.

Hãy áp dùng và comment website mà bạn đã thực hiện thành công dưới comment nhé. Riêng bài viết này mình cho phép.

Chúc bạn thành công!
Điểm 4.6/5 dựa vào 87 đánh giá

Không có nhận xét nào:

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước .

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Khi xuất bản bài viết chắc chắn không tránh khỏi lỗi về chính tả, cú pháp.