Hướng dẫn thiết kế 2 giao diện (Mobile/Desktop) cho Blogger

Đối với Blogger khi truy cập trên thiết bị có độ phân giải màn hình từ 600px trở xuống sẽ chuyển ngay sang truy cập link trên mobile có dạng url.html?m=1

Đối với giao diện này các điều kiện trên mobile bắt đầu hoạt động.
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'><!-- nội dung muốn hiển thị trên di động --></b:if>

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'><!-- Nội dung không muốn hiển thị trên di động --></b:if>

Do vậy khi khi xem trên máy tính với kích thước màn hình lớn thì không thể nào tự chuyển sang url?m=1 được mà ta phải có button cho chuyển 2 chế độ. Sẽ được thêm ?m=1 vào cuối url.


Như cách mình làm thì ở chế độ Mobile sẽ tự động ẩn Sidebar-wrapper đi và để #main-wrapper{width:100%!important}

Khi đó ta thực hiện như sau:

Bước 1: Đặt điều kiện để Sidebar không hiển thị trên di động

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'><div id='sidebar-wrapper'>Code bên trong Sidebar sẽ không hiển thị trên di động</div></b:if>

Ở đây mình dùng điều kiện kết hợp cho nhiều trang khác nữa nên mới nhiều như thế.

Bước 2: Cho Main-wrapper hiển thị ở độ rộng Width:100%

  • Ta có css như sau:
  • Đặt vào dưới cặp thẻ skin nhé

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'><style type='text/css'>
@media all and (min-width: 601px) {#main-wrapper{width:100%!important}}</style></b:if>

P/s: CSS này sẽ hoạt động khi kích thước hiển thị của màn hình từ 601px trở lên. Bạn có thể tùy chỉnh lại 801px hoặc 970px

Bước 3: Chèn button chuyển đổi 2 chế độ Mobile Desktop

  • Như ảnh ở đầu bài, thường thì ta chèn ở trên bài viết
  • Như cách mình làm sẽ làm ở phần Breadcrumbs và canh float:right cho nó
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<a expr:href='data:post.url + &quot;?m=1&quot;' rel='alternate' style='float:right' title='Giao diện Mobile'><i class='fa fa-expand'/></a>
</b:if>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<a expr:href='data:post.url' rel='canonical' style='float:right' title='Giao diện Đầy đủ'><i class='fas fa-solar-panel'/></a>
</b:if>

Bạn viết thêm CSS cho button này nhé!

Bước 4: Chèn thư viện Font Awesome

Font Awesome là thư viện cho phép sử dụng icon trong website rất phổ biến, nếu website bạn chưa có thư viện này thì hãy làm ở bước 4.

Mình đang dùng version mới nhất 5.1 các version 4.7 trở về trước có thể bị lỗi

Chèn trước </head>

<script type='text/javascript'>//<![CDATA[function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("https://use.fontawesome.com/releases/v5.1.0/css/all.css")//]]></script>

Tương tự như các trang khác ta chỉ thực hiện từ bước 1 đến bước 3 là hoàn thành!

Kết quả:

Cho trang bài viết thì nằm ở đầu bài

Chúc bạn thành công!
ĐĂNG KÍ
Huỳnh Phụng Blogger

Huỳnh Hải Phụng

ADMIN : TÔI LÀ QUẢN TRỊ BLOG