Kích hoạt giao diện mobile trên blogspot
Trước tiên, để xem được giao diện blogspot trên mobile, chúng ta cần phải kích hoạt tính năng này bằng cách chọn Mẫu (1) ⇒ Tùy chỉnh mẫu di động (2) ở trang tổng quan Blogspot.
Thực hiện lần lượt theo thứ tự sau :
1. Chọn chức năng Có. Hiển thị mẫu dành cho điện thoại di động trên điện thoại di động.
2. Lựa chọn mẫu giao diện / tempate blogspot trên mobile.
3. Ấn Lưu để kích hoạt tính năng xem giao diện blogspot trên mobile.
Cách tạo menu trên mobile template cho blogspot
Bước 1 : Tìm thẻ <body> rồi chèn vào sau đó đoạn mã:
<b:section id=’navtop’ preferred=’yes’>
<b:widget id=’PageList1′ locked=’true’ mobile=’yes‘ title=’Pages’ type=’PageList’>
<b:includable id=’main’>
<b:if cond=’data:title’><h2><data:title/></h2></b:if>
<div class=’widget-content’>
<b:if cond=’data:mobile’>
<select expr:id=’data:widget.instanceId + "_select"’>
<b:loop values=’data:links’ var=’link’>
<b:if cond=’data:link.isCurrentPage’>
<option expr:value=’data:link.href’><data:link.title/></option>
<b:else/>
<option expr:value=’data:link.href’><data:link.title/></option>
</b:if>
</b:loop>
</select>
<span class=’pagelist-arrow’>&#9660;</span>
<b:else/>
<div/>
</b:if>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>
</b:section>
Sau đó lưu template này lại. Nếu hệ thống báo lỗi trùng ID ở chỗ navtop hoặc PageList1 như mình đã bôi đậm ở trên, bạn chỉ cần đổi tên cho nó là được. Cũng lưu ý luôn chỗ mobile=’yes‘ nhé, tẹo nữa chúng ta sẽ thao tác với thằng này.
Bước 2 : Kiểm tra menu.
Bạn có thể kiểm tra trực tiếp trên điện thoại di dộng hoặc kiểm tra gián tiếp thông qua máy tính cá nhân. Với cách kiêm tra gián tiếp, điền vào thanh địa chỉ trình duyệt web như sau : “URL website” + “/?m=1”
Ví dụ : http://www.123itvn.com/?m=1
Nếu menu hiển thị thành công thì chuyển qua bước tiếp theo còn không, hãy kiểm tra lại đoạn code bạn đang sử dụng.
Bước 3 : Tinh chỉnh menu trên giao diện mobile cho blogspot.
Mặc định, menu này chỉ chứa duy nhất một mục là trang chủ. Để tiến hành bổ sung thêm các mục con, chúng ta cần làm như sau:
– Ở ngay đầu trang, tìm trên màn hình biểu tượng :
– Click vào đó sẽ có cửa sổ mới hiện ra, chọn Thêm liên kết bên ngoài.
– Điền tiêu đề trang và địa chỉ URL tương ứng khi người dùng nhấp chuột vào tiêu đề đó. Sau đó chọn Lưu liên kết.
– Mỗi liên kết bên ngoài sẽ là một chuyên mục trong menu của bạn. Sau khi nhập đủ số liên kết, ấn Lưu để kết thúc quá trình cài đặt menu cho giao diện blogspot trên mobile.
Bước 4 : Quay trở lại bước 1, thay thuộc tính mobile=’yes‘ thành mobile=’only’ để ẩn menu vừa tạo trên giao diện của desktop. Sau đó lưu Template lại là Okie.
Lưu ý:
– Thuộc tính yes cho phép widget nói chung và menu nói riêng hiển thị được trên cả giao diện desktop và mobile.
– Thuộc tính only chỉ cho phép hiển thị trên giao diện mobile.
