Code quảng cáo hiện thị ở góc phải của website

Học Javascript Online – Khi các bạn vào một trang web thì có các bạn sẽ thấy có rất nhiều vị trí hiển thị banner quảng cáo. Như trên top hay bên trái bên phải hoặc là dọc hai bên website. …

Học Javascript Online – Khi các bạn vào một trang web thì có các bạn sẽ thấy có rất nhiều vị trí hiển thị banner quảng cáo. Như trên top hay bên trái bên phải hoặc là dọc hai bên website. Đặc biệt có một ví trí mà các khách hàng quảng cáo luôn muốn đặt banner đó là Banner quảng cáo ở góc phải của màn hình hiển thị.

Như vậy thì lượng khách hàng vào website sẽ nhìn thấy quảng cáo ở vị trí này đầy tiên. Nhưng nếu đặt cố định một chổ ở góc vậy thì rất bất tiền và sẽ làm cho khác hàng khó chịu vì nhiều lúc quảng cáo nó che một phần nội dung của website. Vậy nên để khác phục điều đó cách đơn giản là chúng ta cho phép người dùng có thể tắt quảng cáo đi hoặc bật quảng cáo lên khi đang lượt web. Tất nhiên ! Khi người dùng load lại web thì quảng cáo nó sẽ hiển thì ra.

code-quang-cao-hien-thi-o-goc-phai-cua-website

Các bạn nhìn hình trên sẽ thấy vị trí cụ thế mà baner quảng cáo sẽ hiện thị. Để làm được điều này chúng ta sẽ kết hợp giữa Javascript và HTLM/CSS.

Để sử dụng code này các bạn copy về đặt ở cuối website thông thường là file footer. Nhưng lưu ý là nhớ đặt trước thẻ đóng </body> nhé. (Các bạn cũng có thế page code này vào thẻ <head> nhưng mình khuyên các bạn để cuối trang để tối ưu cho việc seo website)

Dưới đây là code quảng cáo hiển thi bên góc phải của website:

<script type=”text/javascript”>
function hide_float_right() {
    var content = document.getElementById(‘float_content_right’);
    var hide = document.getElementById(‘hide_float_right’);
    if (content.style.display == “none”)
    {content.style.display = “block”; hide.innerHTML = ‘<a href=”javascript:hide_float_right()”>Tắt Quảng Cáo [X]</a>’; }
        else { content.style.display = “none”; hide.innerHTML = ‘<a href=”javascript:hide_float_right()”>Xem Quảng Cáo</a>’;
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_right {border: 1px solid #01AEF0;}
#hide_float_right {text-align:right; font-size: 11px;}
#hide_float_right a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class=”float-ck” style=”right: 0px” >
<div id=”hide_float_right”>
<a href=”javascript:hide_float_right()”>Tắt Quảng Cáo [X]</a></div>
<div id=”float_content_right”>
<a href=”http://giaotrinhhay.com/” target=”_blank”><img src=”http://giaotrinhhay.com/images/phan-mem-seo-ninja.jpg” title=”138 Asia Casino” /></a>
</div>
</div>

Các bạn nhớ thay đổi các thông số phù hợp và đường dẫn link ảnh cho đúng trước khi chạy. Chúc các bạn thành công !

Nguyễn Tấn Tài

Nguyễn Tấn Tài Founder/ CEO Giaotrinhhay.com - Giáo Trình Hay Chia Sẻ: Tài liệu SEO website, DIGITAL MARKETING, Ebook CNTT, Mẹo vặt, Phần mềm, Thủ thuật PC và kho tài liệu học tập hữu ích miễn phí.

Bài viết liên quan

DEVOPS LÀ GÌ?

DEVOPS LÀ GÌ? Devops là gì Theo Wikipedia Devops là thuật ngữ chỉ tập hợp các hoạt [...]

Database là gì?

Database là gì? Database được gọi là Cơ sở dữ liệu, là một bộ sưu tập dữ liệu có [...]

Tạo Responsive và Mobile-Friendly Tooltip bằng jQuery

Việc tìm kiếm một chức năng Tooltip phù hợp với website hay blog thì không [...]

Code tự động lưu ảnh vào host khi copy bài từ nguồn khác

Như tiêu tiêu đề thôi hôm nay mình sẽ share đoạn code tự động lưu [...]

Tài liệu lập trình về Yii framework

Tài liệu lập trình về Yii framework Yii không phải là cái gì đó mới [...]

Sypex Dumper: Upload và backup dữ liệu lớn – hướng dẫn sử dụng Sypex Dumper

Xin chào các bạn, lần trước tôi có đăng bài viết làm thế nào để [...]

Trả lời