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) |
1. Đăng nhập vào Blogger
2. Giao diện > chèn code sao vào vị trí muốn hiện
<style>Nhớ thay lại banner quảng cáo của bạn và đường dẫn
#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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjy6ZMYjnednDSStBAsuKJlPtOtn1tBXf-yXtxHAQqaimuu_RHmXPuwGW5rCTwu1GbghCFhc4g3r-RLFc85fPAV4ZaHM1-5B8o5_wPbdV25AlcXU_086dR_PHYZrwj5Hwi0JEUuafd1zE/s1600/xenangeps.jpg'/></a>
</div>
</div>
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'>
$("#prova").click(function () {
$(this).toggleClass('show hide');
});
</script>
Giải thích cách hoạt động:
Ban đầu Banner quảng cáo sẽ sử dụng #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 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![/tintuc]
