DMCA.com Protection Status

Thứ Sáu, 7 tháng 2, 2014

Cách tạo menu hiển thi trên mobile cho blogspot

Cách tạo menu hiển thị trên mobile cho blogspot.Cách tạo menu hiển thị trên di động cho blogspot. Cách tạo menu cho blogspot hiển thị tốt mobile.Hướng dẫn cách tạo menu hiển thị trên mobile cho blogspot

Thấy có bạn hỏi về vấn đề này nên mình viết bài hướng dẫn cách tạo menu hiển thị trên mobile cho blogspot.Như các bạn biết blogspot có cái hay nà nó hiển thị khá tốt trên mobile cái mà nhiều website thông thường chưa có và muốn có thì lại phải thuê code về chỉnh sửa lại và nó cũng là điểm mạnh của Blogspot mà mình thấy thích ở nó.

Để thêm chức năng này cho blog thì các bạn cần check xem blog mình có menu khi vào di động chưa nhé để check các bạn đọc bài sau ==> Cách check giao diên blogspot trên mobile không cần dùng điện thoại

Vậy để hiển thị menu trên Mobile chúng ta phải làm gì các bạn làm theo hướng dân dưới đây:

Cách tạo menu hiển thi trên mobile cho blogspot

Bước 1: Đăng nhập Blogspot ==> Mẫu(Template) => Các nhìn sang phần Di động (Mobile) Click vào setting rồi tích vào phần cho phép hiển thị trên di động rồi lưu lại

Cách tạo menu hiển thi trên mobile cho blogspot


Bước 2:  Tiếp tục các bạn vào phần Mẫu(Template) ==> Chỉnh sửa HTML ==> Các bạn copy đoạn code lên trên thẻ ]]></b:skin>

#sidebaratas{display:none;}

Bước 3:  Tiếp tục các bạn vào phần Mẫu(Template) ==> Chỉnh sửa HTML ==> Các bạn copy đoạn code dưới xuống dưới thẻ <body>

<div id='sidebaratas'>
       <b:section id='navtop' preferred='yes'>
         <b:widget id='PageList1' locked='true' 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' selected='selected'><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></div>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
         </b:widget>
       </b:section>

</div>

Nhấn lưu lại.

Lưu ý : Cái phần <b:section id='navtop' preferred='yes'>  <b:widget id='PageList1' locked='true' title='Pages' type='PageList'> phần chữ màu đỏ phải là chưa tồn tại nếu thấy báo lỗi thì đổi tên nó đi để không bị trùng nhé. Nếu lưu dc ko lỗi là ok

Bước 4. Bắt đầu tạo menu cho di động

Để tạo các phần cho menu chúng ta sẽ làm như sau

Các bạn click vào phần Pages(Trang) ==> Trang mới (New pages) ==> Rồi chọn cái thứ 2 ở dưới ==> Rồi điền đầy đủ thông tin rồi nhấn lưu ,xem hình dưới

Cách tạo menu hiển thi trên mobile cho blogspot



Cách tạo menu hiển thi trên mobile cho blogspot

- Các bạn muốn tạo menu với nhiều chuyên mục thì các bạn cứ tạo thêm vài cái trang như ở trên là ok.
(Chú ý các bạn không nhấn vái cái lưu ở góc phải màn hình nhé,nhấn vào đó là nó sẽ thành không hiển thị nhé)

- Muốn sắp xếp các phần menu cho hiển thị trên dưới thì các bạn lại vào phần Bố Cục(Layout) ==> Tìm cái tên là Pages click vào chỉnh sửa rồi kéo nó vào vị trí bạn muốn vậy là ok.

Vậy rà xong bây giờ các bạn check thử xem nos hiển thị ra sao là ok

Chúc các bạn thành công !

Bài viết được viết bởi http://bittuot.blogspot.com/ -  Bít Tuốt Blog . Chú ý ghi rõ nguồn khi copy bài viết này