Trần Bá Đạt Blog
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja
Không có kết quả
Tất cả kết quả
Trần Bá Đạt Blog
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja
Không có kết quả
Tất cả kết quả
Trần Bá Đạt Blog
Không có kết quả
Tất cả kết quả
Trang chủ Blogspot

Cách tùy chỉnh quảng cáo Adsense trên giao diện mobile

Trần Bá Đạt bởi Trần Bá Đạt
27/04/2018
trong Blogspot, Google Adsense, Thủ thuật Blogspot
0
CHIA SẺ
953
LƯỢT XEM
Chia sẻTweetPinChia sẻ

Cách tùy chỉnh hiển thị quảng cáo trên giao diện Mobile trên Blogspot? là câu hỏi được rất nhiều bạn giúp mình giải đáp. Do thời gian gần đây hơi bận nên chưa viết hướng dẫn được, hôm nay có rảnh tí nên viết bài này để hướng dẫn các bạn tối ưu quảng cáo Google Adsense trên cả giao diện Mobile.

Vì sao phải tùy chỉnh hiển thị quảng cáo Adsense trên Mobile cho Blogspot?

Nếu bạn đang sở hữu tài khoản Google Adsense, bạn sẽ thấy rằng các kích thước quảng cáo nội dung của Google Adsense phần lớn cố định ở các kích thước, như 326×280, 720×90… Tuy nhiên, những kích thước quảng cáo này nếu được đặt lên 1 website có giao diện responsive, thì khi với những điện thoại hay màn hình có kích thước nhỏ dưới 6 inch, các kích thước quảng cáo trên sẽ bị tràn ra ngoài màn hình hay bị các thành phần khác che mất, đây là lại 1 điều cấm kỵ trong chính sách của Google Adsense. Mà đặt như thế này cũng không hề hiệu quả, mà lại làm xấu cả giao diện nữa.

Google Adsense cũng có quảng cáo Responsive, tương thích cho tất cả các kích thước màn hình. Tuy nhiên, thật sự quảng cáo này được mình sử dụng không thấy có sự hữu dụng lắm. Ví dụ như sau: Nếu mình đặt quảng cáo Responsive vào một vị trí có chiều rộng lớn nhất là 720px, thì thay vì tự động chọn kích thước hiển thị (lúc trên các màn hình máy tính) là 720×90 cho các quảng cáo, thì quảng cáo responsive này lại thường xuyên là 300×600, nhìn thật tồi tệ. Thậm chí bạn đặt 1 quảng cáo responsive lên 1 thanh sidebar có chiều rộng khoảng 300px, thì không bao giờ bạn được nhìn thấy một kích thước là 300x250px trên các màn hình máy tính, luôn là 300×600. Đó chính là những lý do mình gần như không sử dụng quảng cáo responsive.

Chính vì những lý do trên, mình luôn phải sử dụng các kích thước có sẵn của Google Adsense, nhưng sử dụng các thủ thuật blogspot để tùy chỉnh hiển thị quảng cáo trên cả máy tính và di động, để đảm bảo giao diện nhìn tốt nhất, lại không vượt quá 3 quảng cáo trên 1 trang hay bị lỗi đè giao diện.

Cách tùy chỉnh quảng cáo Adsense trên giao diện mobile cho Blogspot

Mình muốn hướng dẫn 1 bài đầy đủ, nhưng có vấn đề là mình viết ra rất khó hiểu, đến mình đọc lại cũng không dám chắc các bạn sẽ hiểu mình đang nói về gì. Chính vì thế trong bài viết mình chỉ đưa ra code và công dụng, còn làm thế nào thì là do ý tưởng của mỗi bạn nhé.

– Với các quảng cáo bị đè hay bị tràn khỏi màn hình ở giao diện mobile, cách tốt nhất là không cho quảng cáo hiển thị ở giao diện mobile. Hãy sử dụng code này để ẩn.

NÊNĐỌC THÊM

Người chơi không nạp làm thế nào mạnh hơn người chơi nạp?

Kinh nghiệm sử dụng kim cương hợp lý trong Pocket Ninja

Những tính năng cơ bản của game Pocket Ninja

.HTMLxxx {display:none;}

Trong đó, .HTMLxxx là class chứa quảng cáo của các bạn. Chèn code này vào code css responsive có max-width khoảng 479px của các bạn, sẽ làm ẩn quảng cáo trên các giao diện có kích thước dưới 479px.

– Còn trường hợp lên giao diện mobile, quảng cáo xuất hiện không đúng ý (Như tụt xuống gần cuối website, quảng cáo ở header thì biến mất, hay nói chung là chẳng có tác dụng quảng cáo gì mấy). Thì các bạn có thể chèn quảng cáo vào những vị trí hiển thị tốt nhất, ví dụ ngay dưới header, trên phần body. Và chỉ cho hiển thị trên mobile. Thì sử dụng code sau:

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- quang_cao_test_mobile_tranbadat -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-xxxxxxxxxxxxx"
data-ad-slot="4283379704"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:if>

Trong đó, đoạn code màu xanh là code quảng cáo Adsense có kích thước tốt với giao diện mobile (Ở trên là 300×250), còn đoạn code if bên ngoài, là code chỉ hiển thị trên giao diện Mobile, đổi true thành false thì hiển thị trên tất cả các giao diện, trừ mobile.

Ví dụ: Đoạn code quảng cáo trên mình đặt ngay bên dưới Bài đăng mới của tranbadat.info. Vậy thì…

Đây là trang chủ trên máy tính, chẳng có gì cả.

quảng cáo adsense tren máy tính

Tuy nhiên, đây là trang chủ trên điện thoại, đấy, nó nằm ngay bên dưới đấy ^_^

quang cao google adsense tren mobile

Hy vọng với bài hướng dẫn đơn giản như thế này, sẽ giúp các bạn tùy chỉnh tốt hơn cho quảng cáo Adsense trên website của các bạn. Chúc các bạn thành công. Nếu có cơ hội thì mình sẽ làm 1 video hướng dẫn cặn kẽ hơn nhé. Còn tạm thời nếu có thắc mắc thì cứ cmt bên dưới, mình sẽ trả lời nhé.

Chia sẻTweetPinChia sẻ

Nhận thông báo khi bài viết này được cập nhật. Đăng ký ngay!

Hủy đăng ký
Trần Bá Đạt

Trần Bá Đạt

Là một người yêu thích công nghệ thông tin và hiện đang là một SEOer, một Marketer. Trong đó tranbadat.com là một trong những dự án của mình nhằm cung cấp nhiều kiến thức hơn cho mọi người về Internet, SEO, Blogspot, Wordpress và Windows

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận 16

  1. khoi says:
    6 năm trước

    ad cho mình hỏi chút làm thế nào để tạo được
    CÓ THỂ BẠN THÍCH (quảng cáo google) giống của bạn vậy

    Trả lời
    • Trần Bá Đạt says:
      6 năm trước

      Cái đó là quảng cáo Nội dung phù hợp của Adsense đó bạn. Chỉ có các website có traffic cao thì mới có được cái này. Muốn biết rõ thì bạn cứ vào Trang web -> Nội dung phù hợp. Nếu có domain trong đó thì domain đó được sử dụng quảng cáo này.

      Trả lời
  2. Nguyễn Văn says:
    7 năm trước

    Mình chưa từng có khái niệm tùy chỉnh Adsense nhưng khi đọc bài của bạn thì mình bắt đầu có sự chú ý.
    Blog thiết kế rất đẹp, code chạy nhẹ nhàng!

    Trả lời
    • Trần Bá Đạt says:
      7 năm trước

      Cảm ơn bạn, hy vọng sẽ giúp ích được cho bạn

      Trả lời
  3. Nguyễn Nhật Thiên says:
    9 năm trước

    Đó là quảng cáo của adsoptimal, thu nhập nó dựa trên số lượt hiện thị 10000 lượt view = 0.1$, truy cập trang http://www.nhatthienkt.net vào mục kiếm tiền online mình đã chia sẻ và hướng dẫn đăng ký thành công tài khoản adsoptimal cao cấp để hiện thị QC GA.

    Trả lời
  4. Trần Bá Đạt _CTPG_ says:
    9 năm trước

    Cái đó mình không rõ lắm, chưa thấy hoặc chưa hình dung ra. laugh
    Bạn thay đổi thông tin người nhận thì phải có người đó đi cùng ra nhận nha, chứ cầm chứng minh thôi thì không đủ đâu laugh

    Trả lời
  5. Minh Nguyễn says:
    9 năm trước

    Nó vẫn có dấu quảng cáo adsense bình thường.nhưng có thêm biểu tưởng $ màu xanh lá bên dưới nữa bạn,chắn adsense đăng ký qua đối tác nào đó. Cho minh hỏi thêm xíu. CMND của mình hết hạn rồi, giời mình thay đổi thông tin người nhận thanh tóan là người thân, rồi mình cầm CMND người thân ra nhận thanh toán adsense qua western được không bạn? hay phải nhờ người thân đi luôn mới được nhỉ?

    Trả lời
  6. Trần Bá Đạt _CTPG_ says:
    9 năm trước

    Đó không hẳn là quảng cáo Adsense đâu bạn, Adsense bạn sẽ thấy cái vòng tròn với chấm than màu xanh hoặc dấu tam giác xanh (Adchoices), còn các cái khác là đối tác của Google hoặc là 1 mạng hiển thị khác thôi laugh

    Trả lời
  7. Minh Nguyễn says:
    9 năm trước

    Ad cho mình thắc mắc xíu nhé! Cũng là quảng cáo adsense chạy trên web những mình thấy có trang có biểu tượng $ màu xanh lá bên dưới gốc phải quảng cáo adsense là là gì nhỉ?

    Trả lời
  8. Cần là có says:
    10 năm trước

    Mình phải thiết kế lại giao diện reponsive mới hiển thị trên mobile hả bạn?

    Trả lời
  9. Trần Bá Đạt _CTPG_ says:
    10 năm trước

    b:if …mobile…true… đó

    Trả lời
  10. Trần Bá Đạt _CTPG_ says:
    10 năm trước

    Để biết có hiển thị chính xác hay không thì bạn cứ chèn code vô nhưng bỏ cái đoạn:

    …

    này đi. Để xem trên desktop hiển thị đúng vị trí chưa đã.

    Còn cái vụ xài giao diện mobile mặc định của blogspot thì mình chịu đó [-(

    Trả lời
  11. Cần là có says:
    10 năm trước

    Mình làm không hiện ra được. Mình đặt đúng code như bạn demo, sau đó chèn ngay phía dưới đoạn code của giao diện destop vẫn không hiện ra. Giao diện mobile mình sử dụng sẵn có của blogspot. không làm thêm cái @media nào.

    Trả lời
  12. Trần Bá Đạt _CTPG_ says:
    10 năm trước

    Trước tiên xin chào bạn

    Sau đó, tranbadat.info xin lỗi, vì hiện không còn trao đổi liên kết với website nào nữa.

    Mong bạn thông cảm nhé!

    Trả lời
  13. Trần Bá Đạt _CTPG_ says:
    10 năm trước

    This comment has been removed by the author.

    Trả lời
  14. Linh Truong says:
    10 năm trước

    Chào bạn, cho phép mình được liên kết với blog bạn nhé :v
    Mình đã add liên kết của bạn bên mình, phiền bạn add lại thông tin bên mình nhé :v
    Thông tin blog mình:
    1. Tên blog: Blog Tự Học Tiếng Anh
    2. URL blog: http://www.blogtuhoctienganh.com/
    3. Favicon : http://www.blogtuhoctienganh.com/favicon.ico
    Hay bạn có thể vào địa chỉ LIÊN KẾT bên mình để xem chi tiết hơn nhé. cám ơn bạn

    Trả lời

ĐƯỢC YÊU THÍCH

  • Cách gỡ bỏ Microsoft Office tận gốc

    Cách gỡ bỏ Microsoft Office hoàn toàn khỏi máy tính khi bị lỗi

    62 chia sẻ
    Chia sẻ 60 Tweet 0
  • Tổng hợp 1069 icon Facebook – biểu tượng cảm xúc FB 2020

    104 chia sẻ
    Chia sẻ 103 Tweet 0
  • Cách bỏ gạch đỏ trong Word/Excel/PowerPoint

    1 chia sẻ
    Chia sẻ 1 Tweet 0
  • SEOer những lúc mệt mỏi nên làm gì?

    1 chia sẻ
    Chia sẻ 1 Tweet 0
  • Template MagNews bản quyền – Chia sẻ hoàn toàn miễn phí

    14 chia sẻ
    Chia sẻ 11 Tweet 0

VPS NÊN DÙNG

Trần Bá Đạt Blog
Trần Bá Đạt Blog hình thành với mục đích chia sẻ, hướng dẫn và đồng hành cùng bạn tiếp cận và giải quyết các vấn đề về Internet, Windows, Wordpress và SEO.

Email: [email protected]
Fanpage: Trần Bá Đạt Blog

DMCA.com Protection Status

EXTERNAL LINKS

  • Technology Knowledge

TAGS THÔNG DỤNG

  • Tìm hiểu Gmail
  • Tìm hiểu theme Newspaper
  • Kiến thức Wordpress

INTERNAL LINKS

  • Biểu tượng Facebook
  • Key Win 10
  • Key Office 2016
  • Cách vào Facebook
  • SEO Blogspot
  • Thủ thuật Blogspot
  • Lập Gmail
  • Ứng dụng học tiếng Anh
  • Key Office 2019
  • Liên hệ
  • Sitemap

© Copyright 2017 Trần Bá Đạt Blog. Hosted by Vultr.

Không có kết quả
Tất cả kết quả
  • Học SEO
    • SEO Local
    • SEO Onpage
    • Tài liệu SEO
  • Windows
  • Thủ thuật CNTT
  • WordPress
    • Thủ thuật WordPress
    • Theme WordPress
    • Plugin WordPress
  • Học Blogspot
    • Thủ thuật Blogspot
    • Template Blogspot
    • SEO Blogspot
  • Pocket Ninja

© Copyright 2017 Trần Bá Đạt Blog. Hosted by Vultr.