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


người khác đã thích bài này
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
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!
Dẫn nguồn về Toilaquantri.com nếu bạn có xuất bản lại nội dung từ Website này!


ĐĂNG KÍ


Không có nhận xét nào:

Không Spam Link dưới mọi hình thức.

ĐĂNG KÍ RSS

Tiếp tục


Bạn quên địa chỉ email?

Bản tin RSS Feeds sẽ được gởi đến email của bạn.


GIỚI THIỆU


HUỲNH PHỤNG
▪ Là 1 chuyên gia setup SEO Systems : Blogger
▪ Hiện công tác Cty Marketing TM - DichvuSEO.INFO
▪ Dịch vụ SEO tổng thể | Lập kế hoạch SEO | Setup hệ thống SEO chuyên nghiệp.

KẾT NỐI & CHIA SẺ



Liên Hệ
  • Thời gian làm việc từ T2-T7 (9h-21h)
  • Văn Phòng: 98 Nguyễn Văn Lượng, Gò Vấp, TPHCM
  • (+84) 932.913.631
  • Haiphungmarketing@gmail.com
  • Huỳnh Phụng Blogger FanPage

  • TÀI KHOẢN

    Số Tài Khoản ACB

    Số TK: 214 081 769
    Họ Tên: Huynh Hai Phung
    Ngân hàng ACB Tân Bình (Ngân hàng Á Châu Tân Bình)
    Thông tin chuyển khoản: (Tên KH + Số tiền chuyển + Nội dung dịch vụ)

    STK VietComBank

    Số TK: 0721 0006 096 05
    Họ Tên: Huynh Hai Phung
    Ngân hàng VCB Bình Thạnh TPHCM
    Thông tin chuyển khoản: (Tên KH + Số tiền chuyển + Nội dung dịch vụ)