Hiện quảng cáo trên Mobile nhưng ẩn trên Desktop

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 320x100 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

1. Đăng nhập vào Blogger.com -> Bố cục -> tạo HTML/JAVASCRIPT mới -> và dán đoạn dưới đây vào.

<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>

2. Thay dòng chữ tô vàng thành code Adsense của bạn. Save!

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

Chúc bạn thành công!