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ụ:
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.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>
<b:if cond='data:blog.isMobileRequest == "true"'> <!-- Đặ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='"loading" + 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 nhận xét:
Post a Comment