Trang chủ
Blogspot Tips

Tùy chỉnh menu điều hướng Plus Ui v3

Tùy chỉnh menu điều hướng bằng cách xóa các mục hiện có và thêm các mục mới.
Vũ Văn Hoàn

Menu điều hướng có sẵn trong hai phiên bản, đó là menu mặc định có thêm menu thả xuống và menu thay thế không có menu thả xuống, menu mặc định chỉ có thể được chỉnh sửa qua HTML.

Menu Generator (Khuyến nghị)

Sử dụng công cụ này để tạo HTML Menu Điều hướng một cách dễ dàng.

  • Vào phần Bố cục Blogger.
  • Tìm tiện ích HTML Navigation Menu à nhấp vào biểu tượng bút chì bên cạnh.

    Đừng nhầm lẫn với Navigation Menu (Simple) đó là một tiện ích Trang chứ không phải tiện ích HTML.

  • Nếu bạn muốn khôi phục HTML hiện có, hãy sao chép nội dung HTML của tiện ích và dán vào ô Khôi phục của công cụ.
  • Tùy chỉnh thực đơn của bạn trong công cụ này.
  • Sao chép mã HTML do công cụ tạo ra.
  • Thay thế nội dung hiện có trong widget bằng HTML được tạo tự động.
Mẹo hay!! Để di chuyển menu, hãy nhấn giữ chuột -> kéo -> thả.
Để thay đổi biểu tượng, hãy nhấp vào biểu tượng đó.
Nhấp vào biểu tượng "Thêm" để xem các tùy chọn cụ thể của menu..
Nên khuyến khích HTML đã được nén nếu có thể.

Thủ công

  1. Đi đến Trình soạn thảo HTML cho Blogger.
  2. Hãy tìm kiếm , trông nó sẽ giống như sau: <b:includable id='items-mainMenu'>: 
    <!--[ Navigation Menu Items ]-->
<b:includable id='items-mainMenu'>
  ...
</b:includable>
  3. Bạn có thể chỉnh sửa các mục trong menu điều hướng của mình <b:includable id='items-mainMenu'> và </b:includable>. Có một vài mục được thêm vào mặc định, bạn có thể xóa chúng và thêm vào những mục của riêng mình nếu muốn.
  4. Nếu trước đây bạn đã chỉnh sửa tiện ích HTML Navigation Menu, hãy đảm bảo rằng nó trống bằng cách truy cập vào Bố cục Blogger.

Standard menu

Để thêm menu tiêu chuẩn, bạn có thể thêm đoạn mã sau bằng cách thay thế các phần được đánh dấu bằng các giá trị thích hợp:

<!--[ Standard menu ]-->
<li>
  <!--[ Change attribute href='#' to add url ]-->
  <a href='#' itemprop='url'>
    <!--[ Icon ]-->
    <b:include name='svg.folder-2'/>
    <!--[ Title ]-->
    <span itemprop='name'>Standard Menu</span>
  </a>
</li>
<!--[ Standard menu ]-->
<li>
  <!--[ Change attribute href='#' to add url ]-->
  <a href='/search/label/Photography' itemprop='url'>
    <!--[ Icon ]-->
    <svg class='line' viewBox='0 0 24 24'><path d='M6.76005 22H17.24C20 22 21.1 20.31 21.23 18.25L21.75 9.99C21.89 7.83 20.17 6 18 6C17.39 6 16.83 5.65 16.55 5.11L15.83 3.66C15.37 2.75 14.17 2 13.15 2H10.86C9.83005 2 8.63005 2.75 8.17005 3.66L7.45005 5.11C7.17005 5.65 6.61005 6 6.00005 6C3.83005 6 2.11005 7.83 2.25005 9.99L2.77005 18.25C2.89005 20.31 4.00005 22 6.76005 22Z'></path><path d='M10.5 8H13.5'></path><path d='M12 18C13.79 18 15.25 16.54 15.25 14.75C15.25 12.96 13.79 11.5 12 11.5C10.21 11.5 8.75 12.96 8.75 14.75C8.75 16.54 10.21 18 12 18Z'></path></svg>
    <!--[ Title ]-->
    <span itemprop='name'>Photography</span>
  </a>
</li>

Dropdown menu

Bạn có thể sử dụng một vài kiểu menu thả xuống như sau:

Không có biểu tượng trong menu con

Bạn có thể sử dụng kiểu này nếu không muốn thêm biểu tượng SVG cho các menu con. Bạn có thể thêm đoạn mã sau bằng cách thay thế các phần được đánh dấu bằng các giá trị thích hợp.

Cảnh báo! Vui lòng lưu ý rằng biểu tượng SVG cho nút chuyển đổi vẫn cần được bao gồm. 
<!--[ Dropdown Menu ]-->
<li>
  <input id='nav-drop-1' type='checkbox' checked=''/>
  <label for='nav-drop-1'>
    <!--[ Icon ]-->
    <b:include name='svg.folder-2'/>
    <!--[ Title ]-->
    <span>Sub Menu</span>
  </label>
  <ul>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a href='#' itemprop='url'>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 01</span>
      </a>
    </li>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a href='#' itemprop='url'>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 02</span>
      </a>
    </li>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a href='#' itemprop='url'>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 03</span>
      </a>
    </li>
  </ul>
</li>
<!--[ Dropdown Menu ]-->
<li>
  <input id='nav-drop-1' type='checkbox' checked=''/>
  <label for='nav-drop-1'>
    <!--[ Icon ]-->
    <svg class='line' viewBox='0 0 24 24'><path d='M5 10H7C9 10 10 9 10 7V5C10 3 9 2 7 2H5C3 2 2 3 2 5V7C2 9 3 10 5 10Z' stroke-miterlimit='10'></path><path d='M17 10H19C21 10 22 9 22 7V5C22 3 21 2 19 2H17C15 2 14 3 14 5V7C14 9 15 10 17 10Z' stroke-miterlimit='10'></path><path d='M17 22H19C21 22 22 21 22 19V17C22 15 21 14 19 14H17C15 14 14 15 14 17V19C14 21 15 22 17 22Z' stroke-miterlimit='10'></path><path d='M5 22H7C9 22 10 21 10 19V17C10 15 9 14 7 14H5C3 14 2 15 2 17V19C2 21 3 22 5 22Z' stroke-miterlimit='10'></path></svg>
    <!--[ Title ]-->
    <span>Categories</span>
  </label>
  <ul>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a href='/search/label/Photography' itemprop='url'>
        <!--[ Title ]-->
        <span itemprop='name'>Photography</span>
      </a>
    </li>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a href='/search/label/Art' itemprop='url'>
        <!--[ Title ]-->
        <span itemprop='name'>Art</span>
      </a>
    </li>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a href='/search/label/Blog' itemprop='url'>
        <!--[ Title ]-->
        <span itemprop='name'>Blog</span>
      </a>
    </li>
  </ul>
</li>

Với biểu tượng trong các menu con

Đoạn mã tương tự như trên, bạn chỉ cần thêm mã biểu tượng SVG của mình vào phía trên tiêu đề trong menu con như hình bên dưới:

<!--[ Dropdown Menu ]-->
<li>
  ...
  <ul>
    ...
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a href='#' itemprop='url'>
        <!--[ Icon ]-->
        <b:include name='svg.folder-2'/>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 01</span>
      </a>
    </li>
    ...
  </ul>
</li>
<!--[ Dropdown Menu ]-->
<li>
  <input id='nav-drop-2' type='checkbox' checked=''/>
  <label for='nav-drop-2'>
    <!--[ Icon ]-->
    <svg class='line' viewBox='0 0 24 24'><path d='M5 10H7C9 10 10 9 10 7V5C10 3 9 2 7 2H5C3 2 2 3 2 5V7C2 9 3 10 5 10Z' stroke-miterlimit='10'></path><path d='M17 10H19C21 10 22 9 22 7V5C22 3 21 2 19 2H17C15 2 14 3 14 5V7C14 9 15 10 17 10Z' stroke-miterlimit='10'></path><path d='M17 22H19C21 22 22 21 22 19V17C22 15 21 14 19 14H17C15 14 14 15 14 17V19C14 21 15 22 17 22Z' stroke-miterlimit='10'></path><path d='M5 22H7C9 22 10 21 10 19V17C10 15 9 14 7 14H5C3 14 2 15 2 17V19C2 21 3 22 5 22Z' stroke-miterlimit='10'></path></svg>
    <!--[ Title ]-->
    <span>Categories</span>
  </label>
  <ul>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a href='/search/label/Photography' itemprop='url'>
        <!--[ Icon ]-->
        <svg class='line' viewBox='0 0 24 24'><path d='M6.76005 22H17.24C20 22 21.1 20.31 21.23 18.25L21.75 9.99C21.89 7.83 20.17 6 18 6C17.39 6 16.83 5.65 16.55 5.11L15.83 3.66C15.37 2.75 14.17 2 13.15 2H10.86C9.83005 2 8.63005 2.75 8.17005 3.66L7.45005 5.11C7.17005 5.65 6.61005 6 6.00005 6C3.83005 6 2.11005 7.83 2.25005 9.99L2.77005 18.25C2.89005 20.31 4.00005 22 6.76005 22Z'></path><path d='M10.5 8H13.5'></path><path d='M12 18C13.79 18 15.25 16.54 15.25 14.75C15.25 12.96 13.79 11.5 12 11.5C10.21 11.5 8.75 12.96 8.75 14.75C8.75 16.54 10.21 18 12 18Z'></path></svg>
        <!--[ Title ]-->
        <span itemprop='name'>Photography</span>
      </a>
    </li>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a href='/search/label/Art' itemprop='url'>
        <!--[ Icon ]-->
        <svg class='line' viewBox='0 0 24 24'><path d='M10 4.5V18C10 19.08 9.55999 20.07 8.85999 20.79L8.82001 20.83C8.73001 20.92 8.63001 21.01 8.54001 21.08C8.24001 21.34 7.89999 21.54 7.54999 21.68C7.43999 21.73 7.33 21.77 7.22 21.81C6.83 21.94 6.41 22 6 22C5.73 22 5.46001 21.97 5.20001 21.92C5.07001 21.89 4.94 21.86 4.81 21.82C4.65 21.77 4.50001 21.72 4.35001 21.65C4.35001 21.64 4.35 21.64 4.34 21.65C4.06 21.51 3.79001 21.35 3.54001 21.16L3.53 21.15C3.4 21.05 3.28001 20.95 3.17001 20.83C3.06001 20.71 2.95 20.59 2.84 20.46C2.65 20.21 2.49001 19.94 2.35001 19.66C2.36001 19.65 2.36001 19.65 2.35001 19.65C2.35001 19.65 2.35 19.64 2.34 19.63C2.28 19.49 2.22999 19.34 2.17999 19.19C2.13999 19.06 2.10999 18.93 2.07999 18.8C2.02999 18.54 2 18.27 2 18V4.5C2 3 3 2 4.5 2H7.5C9 2 10 3 10 4.5Z'></path><path d='M22 16.5V19.5C22 21 21 22 19.5 22H6C6.41 22 6.83 21.94 7.22 21.81C7.33 21.77 7.43999 21.73 7.54999 21.68C7.89999 21.54 8.24001 21.34 8.54001 21.08C8.63001 21.01 8.73001 20.92 8.82001 20.83L8.85999 20.79L15.66 14H19.5C21 14 22 15 22 16.5Z'></path><path d='M4.81 21.8199C4.21 21.6399 3.64001 21.3099 3.17001 20.8299C2.69001 20.3599 2.35999 19.7899 2.17999 19.1899C2.56999 20.4399 3.56 21.4299 4.81 21.8199Z'></path><path d='M18.37 11.2899L15.66 14L8.85999 20.7899C9.55999 20.0699 10 19.08 10 18V8.33995L12.71 5.62996C13.77 4.56996 15.19 4.56996 16.25 5.62996L18.37 7.74996C19.43 8.80996 19.43 10.2299 18.37 11.2899Z'></path><path d='M6 19C6.55228 19 7 18.5523 7 18C7 17.4477 6.55228 17 6 17C5.44772 17 5 17.4477 5 18C5 18.5523 5.44772 19 6 19Z'></path></svg>
        <!--[ Title ]-->
        <span itemprop='name'>Art</span>
      </a>
    </li>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a href='/search/label/Blog' itemprop='url'>
        <!--[ Icon ]-->
        <svg class='line' viewBox='0 0 24 24'><path d='M13.26 3.59997L5.04997 12.29C4.73997 12.62 4.43997 13.27 4.37997 13.72L4.00997 16.96C3.87997 18.13 4.71997 18.93 5.87997 18.73L9.09997 18.18C9.54997 18.1 10.18 17.77 10.49 17.43L18.7 8.73997C20.12 7.23997 20.76 5.52997 18.55 3.43997C16.35 1.36997 14.68 2.09997 13.26 3.59997Z' stroke-miterlimit='10'></path><path d='M11.89 5.05005C12.32 7.81005 14.56 9.92005 17.34 10.2' stroke-miterlimit='10'></path><path d='M3 22H21' stroke-miterlimit='10'></path></svg>
        <!--[ Title ]-->
        <span itemprop='name'>Blog</span>
      </a>
    </li>
  </ul>
</li>

Sub-menus at top level

Nút chuyển đổi sẽ thu nhỏ lại và menu con hoạt động giống như menu tiêu chuẩn, nhưng vẫn có thể thu gọn/mở rộng bằng cách nhấp vào nút chuyển đổi. Bạn có thể thêm đoạn mã sau bằng cách thay thế các phần được đánh dấu bằng các giá trị thích hợp. Lưu ý rằng menu con cần phải có biểu tượng SVG.

<!--[ Dropdown Menu (Sub Menu at Top level) ]-->
<li class='mr'>
  <input id='nav-drop-3' type='checkbox' checked=''/>
  <label for='nav-drop-3'>
    <!--[ Title ]-->
    <span>More...</span>
  </label>
  <ul>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a href='#' itemprop='url'>
        <!--[ Icon ]-->
        <b:include name='svg.folder-2'/>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 01</span>
      </a>
    </li>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a href='#' itemprop='url'>
        <!--[ Icon ]-->
        <b:include name='svg.folder-2'/>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 02</span>
      </a>
    </li>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a href='#' itemprop='url'>
        <!--[ Icon ]-->
        <b:include name='svg.folder-2'/>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 03</span>
      </a>
    </li>
  </ul>
</li>

Tùy chỉnh thêm

Nếu bạn muốn tùy chỉnh thêm Menu Điều hướng, chẳng hạn như thay đổi chiều rộng cho chế độ xem trên máy tính để bàn, thay đổi màu chữ, v.v., bạn có thể thực hiện điều đó từ Trình thiết kế giao diện.

  • Hãy truy cập Trình thiết kế giao diện Blogger.
  • Nhấp vào tab Nâng cao tab.
  • Từ danh sách thả xuống, chọn Style: Navigation Menu.
Làm thế nào để giữ cho menu điều hướng luôn mở rộng theo mặc định trên giao diện máy tính để bàn?

Tùy chọn thay đổi hành vi này đã được thêm vào trong phiên bản 3.1. Bạn chỉ có thể tìm thấy tùy chọn này nếu đang sử dụng phiên bản 3.1 trở lên.

Điều hướng đến Kiểu: Menu Điều hướng như đã mô tả ở trên, đặt độ dài của trạng thái mặc định của Thanh điều hướng (Máy tính để bàn) thành 1px hoặc 2px để giữ cho menu điều hướng ở chế độ thu gọn hoặc mở rộng tương ứng trong chế độ xem máy tính để bàn.

Tôi có thể lấy các biểu tượng SVG ở đâu?

Bạn có thể tìm thấy một vài biểu tượng SVG here.

Đăng nhận xét