Blog của bạn có một lượng truy cập quá khủng, tất cả ví trị trên Blog đều đã đặt hết quảng cáo: Đặt trực tiếp vào bài viết, các cột sitebar hay đặt quảng cáo trượt dọc hai bên Blog …
Chính vì đều này, hôm nay Windows2it sẽ hướng dẫn các bạn đặt quảng cáo ở góc bên phải hoặc bên trái Blog nhằm tiết kiệm không gian kiềm theo nút tắt/mở quảng cáo, tránh sự khó chịu và tăng trải nghiệm của người dùng khi vào Blog của bạn.
Đọc thêm:
☼ Bắt đầu thủ thuật _ Chỉ cần chèn đoạn Code sau đây một Widget HTML/Javascript
Đầu tiên bạn vào Blog => Bố cục => Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu lại.
>> Code quảng cáo góc Bên phải
<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; width: 300px; height: 250px;} #hide_float_right {text-align:right; font-size: 11px;} #hide_float_right a {background: #01AEF0; padding: 2px 4px; color: #FFF;} </style> <br /> <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"> <!-- Start quang cao--> <a href="https://www.windows2it.com/" taget="_blank"><img alt="Quảng cáo trên windows2it.com" src="https://cdn.adf.ly/images/banners/adfly.300x250.1.gif"/></a> <!-- End quang cao --> </div> </div>
>> Code quảng cáo góc Bên trái
<script type="text/javascript"> function hide_float_left() { var content = document.getElementById('float_content_left'); var hide = document.getElementById('hide_float_left'); if (content.style.display == "none") {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_left()">Tắt quảng cáo [X]</a>'; } else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_left()">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_left {border: 1px solid #01AEF0; width: 300px; height: 250px;} #hide_float_left {text-align:left; font-size: 11px;} #hide_float_left a {background: #01AEF0; padding: 2px 4px; color: #FFF;} </style> <div class="float-ck" style="left: 0px" > <div id="hide_float_left"> <a href="javascript:hide_float_left()">Tắt Quảng Cáo [X]</a></div> <div id="float_content_left"> <!-- Start quang cao--> <a href="https://www.windows2it.com" taget="_blank" ><img alt="Quảng cáo trên windows2it.com" src="https://ouo.io/images/banners/r4.jpg"/></a> <!-- End quang cao --> </div> </div>
☼ Tùy chỉnh
· 300px và 250px lần lượt là chiều rộng và chiều cao khung bao ngoài.
· Thay link ảnh màu xanh thành link ảnh của bạn.
· Thay windows2it.com thành link bạn muốn dẫn về.
☼ Kết luận:
· Sử dụng 1 đoạn CSS và đoạn Scipts mở (chưa mã hóa - endcode) nên việc tùy biến rất dễ dàng. <Thủ thuật này quá đơn giản nên mình không để DEMO ngoài chỉ để DEMO trực tiếp ở bài viết>
· 2 Code quảng cáo trên các bạn có thể chèn trực tiếp vô template <theo mình nghĩ các bạn nên chèn ở HTML/JavaScript để tránh lỗi template không cần thiết (-_-)>