Thủ thuật này bắt đầu từ nhu cầu là các ae đang chơi Google Adsense muốn hiển thị quảng cáo 320×100 trượt dưới chân màn hình mobile di động, nhưng lại muốn ẩn trên giao diện desktop.
Với diện tích nhỏ như màn hình mobile người dùng rất dễ click vào các quảng cáo như thế này, điều đó bạn sẽ có thêm những lượt click chất lượng từ người dùng mobile.
 |
| Hiện quảng cáo trên Mobile nhưng ẩn trên Desktop |
Quảng cáo nhỏ dưới chân màn hình sẽ chỉ xuất hiện trên Mobile
 |
| Quảng cáo nhỏ dưới màn hình chỉ xuất hiện trên mobile |
Quảng cáo sẽ được ẩn khi dùng trên Desktop
 |
| Quảng cáo đã được ẩn trên Desktop |
Ý tưởng thực hiện mình sẽ lấy trong bài viết này THIẾT KẾ GIAO DIỆN RESPONSIVE CHO BLOGGER.
Mình sẽ lấy id của thẻ <div chứa quảng cáo đấy dùng thuộc tính display:none để ẩn khi kích thước màn hình lớn hơn 480px trở lên, khi dưới 480px mình sẽ dùng thuộc tính display:block!important để cho nó hiển thị trở lại, đơn giản thế thôi. Với cách này bạn có thể tùy chỉnh dựa vào kích thước màn hình khác nhau.
Ý tưởng thứ 2 lấy từ bài viết này THẺ ĐIỀU KIỆN ẨN HIỆN TRONG BLOGGER.
Và dùng điều kiện ẩn hiện trên Mobile
Cách thực hiện hiện/ẩn quảng cáo trên Mobile và Desktop
Cách 1: Sử dụng Responsive
<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()”>[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; left: 0px; bottom: 0px; z-index: 9000}
#float_content_left {padding: 0;margin: 0;height: 50px;}
#hide_float_left {text-align:right; font-size: 11px;}
#hide_float_left a {font-size: 12px;
font-family: cursive;
background: #CDCCCC;
padding: 0px 0px 2px 0px;
color: #10B0CD;}
.float-ck{display:none!important}
@media screen and (max-width:480px){
.float-ck{display: block!important}
}
</style>
<div class=”float-ck” >
<div id=”hide_float_left”>
<a href=”javascript:hide_float_left()”>[X]</a></div>
<div id=”float_content_left”>
<!– Start quang cao–>
Chèn code quảng cáo Google AdSense của bạn vào đây<!– End quang cao –>
</div>
</div>
Cách 2: Sử dụng thẻ Điều điện (Khuyến khích dùng)
Với cách này sẽ dùng điều kiện <b:if cond=’data:blog.pageType == “data:blog.isMobile”‘> – Đây là kiện xuất hiện trên Mobile như vậy ta sẽ có đoạn code sau:
<b:if cond=’data:blog.pageType == “data:blog.isMobile”‘>
<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()”>[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; left: 0px; bottom: 0px; z-index: 9000}
#float_content_left {padding: 0;margin: 0;height: 50px;}
#hide_float_left {text-align:right; font-size: 11px;}
#hide_float_left a {font-size: 12px;
font-family: cursive;
background: #CDCCCC;
padding: 0px 0px 2px 0px;
color: #10B0CD;}
</style>
<div class=”float-ck” >
<div id=”hide_float_left”>
<a href=”javascript:hide_float_left()”>[X]</a></div>
<div id=”float_content_left”>
<!– Start quang cao–>
Chèn code quảng cáo Google AdSense của bạn vào đây<!– End quang cao –>
</div>
</div>
</b:if>
Tương tự bạn cũng thay mã quảng cáo của bạn vào dòng đã vô vàng
DienDan.Edu.Vn Cám ơn bạn đã quan tâm và rất vui vì bài viết đã đem lại thông tin hữu ích cho bạn.DienDan.Edu.Vn! là một website với tiêu chí chia sẻ thông tin,... Bạn có thể nhận xét, bổ sung hay yêu cầu hướng dẫn liên quan đến bài viết. Vậy nên đề nghị các bạn cũng không quảng cáo trong comment này ngoại trừ trong chính phần tên của bạn.Cám ơn.
