Trang chủ
Blogspot Tips

Thay đổi menu điều hướng Template Median UI (đã cập nhập)

Menu chuẩn

Chúng tôi cung cấp hai tùy chọn menu điều hướng mà bạn có thể sử dụng, menu mặc định được sử dụng trong mẫu với menu thả xuống bổ sung và các biểu tượng tùy chỉnh, bạn chỉ có thể chỉnh sửa menu này thông qua trình chỉnh sửa HTML chủ đề.

Cách chỉnh sửa menu điều hướng
Cách chỉnh sửa menu điều hướng
  1. Trên Blogger, nhấp vào Chủ đề
  2. Nhấp chuột vào biểu tượng Tùy chỉnh
  3. chọn Chỉnh sửa HTML ,
  4. tìm tiện ích con HTML000 , để có biểu tượng nhấp chuột tìm kiếm nhanh hơn:
    Chỉnh sửa HTML Blogger

Bạn sẽ tìm thấy mã như dưới đây:

<!--[ Standar menu ]-->
<li>
  <!--[ Change attribute href='#' to add url ]-->
  <a class='a' href='#' itemprop='url'>
    <!--[ Icon ]-->
    <b:include name='profiles-icon'/>
  
    <!--[ Title navigation ]-->
    <span class='n' itemprop='name'>About</span>
  </a>
</li>

Đoạn mã trên được sử dụng để thêm một menu không có menu phụ.

Thông tin:
  • Thay đổi thuộc tính href='#'bằng liên kết đích của bạn.
  • Thay thế từ được đánh dấu bằng tiêu đề menu bạn muốn.
  • Thêm một biểu tượng mới bằng cách thay thế mã trong phần <b:include name='profiles-icon'/>bằng một biểu tượng SVG, bạn có thể tìm thấy nó tại đây! .

Multimenu With Dropdown

Nếu cần, bạn có thể thêm một số menu phụ trong điều hướng của mình. Trên một số mẫu, bạn có thể tìm thấy hai kiểu có sẵn.

<!--[ Dropdown style 1 ]-->
<li class='drp'>
  <input class='drpI hidden' id='drpDwn-1' name='drpDwn' type='checkbox'/>
  <label class='a' for='drpDwn-1'>
    <!--[ Icon ]-->
    <b:include name='folder-icon'/>
  
    <!--[ Title navigation ]-->
    <span class='n'>Sub menu</span>

    <b:include name='arow-down-icon'/>
  </label>
  <ul>
    <!--[ Change attribute href='#' to add url ]-->
    <li itemprop='name'><a href='#' itemprop='url'>Sub menu 01</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Sub menu 02</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Sub menu 03</a></li>
    <li itemprop='name'><a href='#' itemprop='url'>Sub menu 04</a></li>
  </ul>
</li>

Menu thả xuống kiểu thứ 2:

<!--[ Dropdown style 2 ]-->
<li class='drp mr br'>
  <input checked='checked' class='drpI hidden' id='drpMr-2' name='drpDwn' type='checkbox'/>
  <label class='a' for='drpMr-2'>
    
    <!--[ Title navigation ]-->
    <span class='n'>More...</span>
  
    <b:include name='arow-down-icon'/>
  </label>
  <ul>
    <!--[ Change attribute href='#' to add url ]-->
    <li itemprop='name'><a class='new' expr:href='data:blog.homepageUrl.canonical params { hl: &quot;ar&quot; }' itemprop='url'>Try RTL Mode</a></li>
  </ul>
</li>
Làm cách nào để thêm một menu thả xuống mới?

Để thêm menu thả xuống mới, vui lòng sao chép một trong các mã ở trên và dán vào nơi bạn muốn, đảm bảo các thuộc tính id='...' và for='...' giá trị đều giống nhau. ID phải là duy nhất, không thể có hai ID giống nhau trong một trang.

Thêm hoặc thay thế các Icons trên menu

Chúng tôi đã đánh dấu phần biểu tượng trong mã điều hướng, bạn có thể thay đổi bằng <svg> mã khác.

Sau đây là một ví dụ về thay thế biểu tượng đúng:

<!--[ Icon ]-->
<b:include name='profiles-icon'/>
<!--[ Icon ]-->
<svg class='line'xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(2.749500, 2.549500)'><path d='M6.809,18.9067 C3.137,18.9067 9.41469125e-14,18.3517 9.41469125e-14,16.1277 C9.41469125e-14,13.9037 3.117,11.8997 6.809,11.8997 C10.481,11.8997 13.617,13.8847 13.617,16.1077 C13.617,18.3307 10.501,18.9067 6.809,18.9067 Z'></path><path d='M6.809,8.728 C9.219,8.728 11.173,6.774 11.173,4.364 C11.173,1.954 9.219,-2.48689958e-14 6.809,-2.48689958e-14 C4.399,-2.48689958e-14 2.44496883,1.954 2.44496883,4.364 C2.436,6.766 4.377,8.72 6.778,8.728 L6.809,8.728 Z'></path><path d='M14.0517,7.5293 C15.4547,7.1543 16.4887007,5.8753 16.4887007,4.3533 C16.4897,2.7653 15.3627,1.4393 13.8647,1.1323'></path><path d='M14.7113,11.104 C16.6993,11.104 18.3973,12.452 18.3973,13.655 C18.3973,14.364 17.8123,15.092 16.9223,15.301'></path></g></svg>

Thêm dấu ngắt dòng

Nếu bạn nhìn vào mẫu demo, có một đường phân cách giữa menu này và menu khác. Để sử dụng nó, chỉ cần thêm thẻ br vào thẻ <li> , ví dụ về cách triển khai đúng như sau:

<!--[ Standar menu ]-->
<li>
  <!--[ Change attribute href='#' to add url ]-->
  ...
    <!--[ Icon ]-->
    ...
  
    <!--[ Title navigation ]-->
    ...
  ...
</li>

<!--[ Dropdown style 1 ]-->
<li class='drp'>
  ...
</li>
<!--[ Standar menu ]-->
<li class='br'>
  <!--[ Change attribute href='#' to add url ]-->
  ...
    <!--[ Icon ]-->
    ...
  
    <!--[ Title navigation ]-->
    ...
  ...
</li>

<!--[ Dropdown style 1 ]-->
<li class='drp br'>
  ...
</li>

Đã thêm 'NEW!' hoạc 'Free!' (Không bắt buộc)

Thêm class='new' hoặc class='free' trong menu điều hướng của bạn, ví dụ:

<!--[ Title navigation ]-->
<span class='n' itemprop='name'>About</span>

<li itemprop='name'><a href='#' itemprop='url'>Sub menu 01</a></li>
<!--[ Title navigation ]-->
<span class='n new' itemprop='name'>About</span>

<li itemprop='name'><a class='new' href='#' itemprop='url'>Sub menu 01</a></li>

Bạn cũng có thể thay đổi từ New! hặc Free! theo ý muốn. Tìm và thay thế mã được đánh dấu bên dưới bằng từ bạn chọn::

.free::after, .new::after{display:inline-block;content:'Free!'; ... } .new::after{content:'New!'}

Thuộc tính expr:href='...'

Bạn có thể tìm thấy một số thuộc tính expr:href trong mẫu, mã này hữu ích để viết URL với các biểu thức Blogger. Ưu điểm của thuộc tính này là nếu bạn thay đổi tên miền blog của mình, chẳng hạn như từ blogspot.com thành một tên miền tùy chỉnh (.com, .net, v.v.) thì bạn không cần phải thay đổi từng liên kết trong mẫu của mình nữa.

Bạn có thể nhận thấy sự khác biệt giữa việc viết các thuộc tính href và expr:href trong đoạn mã dưới đây::

<a href='https://median-ui.jagodesain.com/p/contact.html'>Contact</a>
<a expr:href='data:blog.homepageUrl.canonical path &quot;p/contact.html&quot;'>Contact</a>

Menu thay thế

Lợi thế::
  • Có thể được chỉnh sửa từ Bố cục Blogger,
  • Dễ dàng thay đổi tiêu đề trang và URL.
Nhược điểm:
  • Không có menu thả xuống,
  • Không giói hạn
  • không thể thay đổi icon.

Menu này phù hợp hơn với người dùng không quen với HTML, người dùng không cần phải bận tâm chỉnh sửa mẫu HTML để thay đổi menu điều hướng.

  1. Trên trang tổng quan Blogger, nhấp vào Bố cục
  2. tìm tiện ích có tiêu đề ' Menu điều hướng ', nhấp vào biểu tượngtrên widget
  3. nhấn nút chuyển đổi trên ' Hiển thị tiện ích này '
  4. lưu sau đó chỉnh sửa tiện ích ' Menu Điều hướng (Đơn giản) ' và kích hoạt tiện ích này bằng cách nhấn nút chuyển đổi ' Hiển thị tiện ích này '
  5. Chỉnh sửa menu trong widget, bạn có thể xóa, thêm hoặc thay đổi thứ tự của menu.

Truy cập Bypass Google Account APK để tải file APK nhé