Hướng dẫn tạo quảng cáo góc bên phải hoặc bên trái cho Blogspot (Blogger)
Cập nhật ngày
Bởi Legend Phim
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 Yingvn 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.
☼ 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="http://m.yingvn.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="http://m.yingvn.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 m.yingvn.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 (-_-)>
Còn bạn muốn Support gì thì cứ để lại
comment :))!
Post a Comment