Cách detect giao diện mobile trên blogger để chỉnh giao diện, đặt banner hay nội dung bất kì

Admin , , , , No Comments
Bạn đang sử dụng Blogger và không muốn hiển thị một số nội dung của giao diện PC trên mobile hoặc ngược lại? Hướng dẫn sau sẽ giúp bạn biết cách detect giao diện mobile trên blogger để chỉnh giao diện hoặc đặt banner hay nội dung bất kì.


1 Sử dụng thuộc tính của widget:

Ví dụ ta có một widget BlogArchive như sau:

<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>
 
Để nó có thể hiển thị trên mobile ta đặt thêm thuộc tính: mobile='yes':

<b:widget id='BlogArchive1' mobile='yes' title='Blog Archive' type='BlogArchive'>
 
Ngược lại để không hiển thị trên mobile ta đặt thuộc tính mobile='no' :

 
<b:widget id='Attribution1' mobile='no' title='Attribution' type='Attribution'>
 
Hoặc bạn cũng có thể đặt thuộc tính  mobile='only' để widget chỉ hiển thị trên mobile:

<b:widget id='BlogArchive1' mobile='only' title='Blog Archive' type='BlogArchive'>

2 Sử dụng biến điều kiện boolean: data:blog.isMobile

Ví dụ:
  <b:if cond="data:blog.isMobile">
    <!-- Hiển thị text trên mobile -->
    <a href="http://www.obinb.com">
      Copyright www.obinb.com
    </a>
  <b:else/>
    <!-- Hiển thị hình ảnh trên desktop pc -->
    <a href="http://www.obinb.com">
      <img expr:src="data:fullButton" alt="Copyright www.obinb.com"/>
    </a>
  </b:if>
Lưu ý: Nếu bạn tắt giao diện mobile để sử dụng giao diện custom hoặc responsive thì bạn dùng code sau:

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<!-- Đặt nội dung muốn hiển thị trên mobile tại đây -->
<b:else/>
<!-- Đặt nội dung muốn hiển thị trên Pc tại đây -->
</b:if>

3 Sử dụng Class Css mobile mặc định:

Ví dụ ta đặt trong thẻ body như sau:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
 
Sau đó ta sử dụng css để ẩn hoặc hiển thị một nội dung bất kì với từng giao diện:
/* Cho desktop pc */
.date-posts {
  display:none;
}

/* Cho mobile*/
.mobile .date-posts {
  display:block;
}

Vậy là bạn đã tham khảo xong 3 cách làm, chúc các bạn thành công!


Xem thêm:
- Tạo widget Bài Viết Mới Nhất (Recent Post) có ảnh thumbnail cho Blogger
- Hướng dẫn upload file js, css hay images lên Google Drive sử dụng cho Blogger hoặc website
- Ebook hướng dẫn cách tạo và chỉnh sửa một Blogger Templates
- Cách gắn breadcrumbs cho blogger
- Hướng dẫn tạo trang liên hệ cho Blogger
- Hướng dẫn gắn các thẻ meta OpenGraph vào blogger
- Hướng dẫn sửa lỗi cấu trúc dữ liệu (Structured Data) trong Blogger 

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)