0 bình luận · lượt xem
,

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!

,

Có thể bạn thích

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

NỘI QUY:
  • Mọi bình luận sai điều khoản sử dụng sẽ bị xóa mà không cần báo trước.
  • Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi Admin phản hồi.
  • Khi xuất bản bài viết chắc chắn không tránh khỏi lỗi về chính tả, cú pháp.

Hãy cùng tham gia bình luận về bài viết này nhé!