Cách tạo menu trên giao diện mobile cho blogspot 2014

Thảo luận trong 'Blogspot' bắt đầu bởi hoangtrieumanhn, 20/1/15.

Bạn đang xem:

Cách tạo menu trên giao diện mobile cho blogspot 2014

Coppy cùng chia sẻ nhé bạn!
  1. hoangtrieumanhn

    hoangtrieumanhn NO SPAM - SPAM LÀ ĐI LIỀN

    Tham gia ngày:
    28/12/14
    Bài viết:
    533

    Những Cảnh Đẹp Của Việt Nam Qua Góc Nhìn Từ FlyCam PhanTom 3 Professional (Video 4K)

    Bấm Youtube để đăng ký xem video nhé!


    Menu là công cụ điều hướng cực kỳ quan trọng mà website nào cũng cần phải có. Tuy nhiên, mặc định với giao diện blogspot trên mobile thì phần menu đã bị bỏ đi. Để khắc phục điều này, mình sẽ hướng dẫn các bạn cách tạo menu nhanh chóng trên giao diện mobile cho blogspot 2014.

    [​IMG]
    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.

    [​IMG]

    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.

    [​IMG]

    Cách tạo menu trên mobile template cho blogspot 2014

    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 + &quot;_select&quot;'>
    <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'>&amp;#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 : [​IMG] và click vào đó.
    - Cửa sổ mới hiện ra, chọn Thêm liên kết bên ngoài.

    [​IMG]

    - Đ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.

    [​IMG]

    - 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.

    [​IMG]
    Giao diện mobile của blog kiếm tiền online - 123itvn
     
    Diễn đàn Ntphong index siêu nhanh!

    Diễn đàn Seo

    Tiêu đề: Cách tạo menu trên giao diện mobile cho blogspot 2014

    Ghi nguồn bài viết www.ntphong.com khi đăng tải lại bài viết này.

  2. Quảng cáo Thành viên VIP


    Những Cảnh Đẹp Của Việt Nam Qua Góc Nhìn Từ FlyCam PhanTom 3 Professional (Video 4K)

    Bấm Youtube để đăng ký xem video nhé!

  3. thuylinh92

    thuylinh92 New Member

    Tham gia ngày:
    30/3/16
    Bài viết:
    2
    Trang chủ:
    cáo thay đổi được kích thước của title cho phiên bản mobile không bạn?
     

Link hữu ích: @@ giàn phơi thông minh, giàn phơi quần áo, giàn phơi quần áo thông minh, giàn phơi quần áo, thùng rác, sim tra sau, giàn phơi thông minh, Toyota camry 2017, Mật Ong Rừng, Mật Ong Rừng Nguyên Chất, @@
=