Đố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 == "true"'><!-- nội dung muốn hiển thị trên di động --></b:if>và
<b:if cond='data:blog.isMobileRequest == "false"'><!-- 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 == "false"'><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 == "true"'><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 == "false"'>
<a expr:href='data:post.url + "?m=1"' rel='alternate' style='float:right' title='Giao diện Mobile'><i class='fa fa-expand'/></a>
</b:if>
<b:if cond='data:blog.isMobileRequest == "true"'>
<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
Cho trang chủ: https://www.toilaquantri.com/?m=1
Chúc bạn thành công!
[/tintuc]
Cảm ơn admin, bài viết rất hay, mình đã áp dụng thành công cho trang https://www.giaodien.blog của mình