TẠO BANNER QUẢNG CÁO CÓ NÚT TẮT (X) CHO BLOGGER

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à thủ thuật nà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ừng xem quảng cáo tránh ảnh hưởng đến việc trãi nghiệm trên website/blog chúng ta.

đầu tiên đăng nhập vào blogger vào chủ đề chọn sao lưu/khôi phục lưu lại đề phòng lỗi để khôi phục lại sau này, tiếp theo chọn chỉnh sửa HTML và chèn code sau vào vị chí mà bạn muốn hiển thị banner:

<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://blogquocbinh.blogspot.com' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYw2uSAFcmRu3Ku0eew8aDm8iLrsPu4DiCfpxfT2XLvOYZ0y65Wj5QpZxTVU6uI6yGCaXjuXWPcSdzHbftQWULYbw2SiCwdaY1NQZeiVYSjoc01d528gTHQ7n0_kSgrvXl2ocETk2LyiM/s1600/xenangeps.jpg'/></a>
</div>
</div>

Nhớ thay lại banner quảng cáo của bạn và đường dẫn. Tiếp theo ta cần chèn thêm Javascript cho tính năng tắt Banner quảng cáo. Chèn đoạn code sau trước thẻ </body> hoặc </head> nhé. Tốt nhất là 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>

Cách hoạt động của code javascript tắt banner là:

Ban đầu Banner quảng cáo sẽ sử dụng id #prova{...} và 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 banner quảng cáo.

Nguồn: toilaquantri.com

N LinkPro