How to Edit Navigation Menu

Step by step edit, add or replace links and icons in the navigation menu

Standard Menu

Kami menyediakan dua pilihan menu navigasi yang bisa Anda gunakan, pertama adalah menu bawaan yang digunakan pada template dengan tambahan dropdown dan kustom ikon, Anda hanya bisa mengedit menu ini melalui editor HTML tema.

  1. Pada dashboard Blogger, klik Tema
  2. klik icon pada tombol Sesuaikan
  3. pilih Edit HTML,
  4. temukan widget HTML000, untuk pencarian lebih cepat klik icon :
    Edit HTML Blogger

Anda akan menemukan kode seperti dibawah ini:

<!--[ 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>

Kode di atas digunakan untuk menambahkan menu tunggal tanpa sub-menu.

Keterangan:
  • Ubah atribut href='#' dengan link tujuan Anda.
  • Ganti kata yang ditandai dengan judul menu yang Anda inginkan.
  • Tambahkan ikon baru dengan cara mengganti kode pada bagian <b:include name='profiles-icon'/> dengan ikon SVG, Anda bisa menemukannya disini!.

Multimenu Dengan Dropdown

Jika diperlukan, Anda bisa menambahkan bebeapa sub-menu di navigasi Anda. Pada beberapa template mungkin Anda akan menemukan dua pilihan gaya yang tersedia.

<!--[ 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>

Dropdown gaya ke-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>
Bagaimana Cara Menambahkan Menu Dropdown Baru?

Untuk menambahkan menu dropdown baru silahkan salin salah satu kode diatas dan tempel di bagian yang Anda inginkan, pastikan atribut id='...' dan for='...' memiliki nilai yang sama. ID harus unik, tidak boleh ada dua ID yang sama dalam satu halaman.

Menambahkan atau Mengganti Ikon pada Menu

Kami sudah menandai bagian ikon dalam kode navigasi, Anda bisa merubahnya dengan kode <svg> lain.

Berikut kami berikan contoh penggantian ikon yang benar:

<!--[ 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>

Menambahkan Garis Pemisah

Jika Anda perhatikan pada demo template, terdapat garis pemisah antara satu menu dengan menu yang lainnya. Untuk menggunakannya cukup dengan menambahkan classname br pada tag <li>, contoh penerapan yang benar adalah seperti dibawah ini:

<!--[ 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>

Menambahkan Teks 'New!' atau 'Free!' (Opsional)

Tambahkan class='new' atau class='free' di menu navigasi Anda, contoh:

<!--[ 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>

Anda juga bisa merubah kata New! atau Free! sesuai keinginan Anda. Cari dan ganti kode bertanda dibawah ini dengan kata pilihan Anda:

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

Atribut expr:href='...'

Anda mungkin akan menemukan beberapa atribut expr:href dalam template, kode ini berguna untuk menuliskan URL dengan ekspresi Blogger. Kelebihan dari atribut ini adalah jika domain blog Anda diganti misal dari blogspot.com ke kustom domain (.com, .net, etc.) maka Anda tidak perlu lagi mengubah link dalam template Anda satu-persatu.

Anda bisa perhatikan perbedaan penulisan atribut href dan expr:href pada kode di bawah:

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

Alternative Menu

Kelebihan:
  • Bisa diedit dari Tata letak Blogger,
  • mengganti judul dan URL halaman dengan mudah.
Kekurangan:
  • Tanpa menu dropdown,
  • tanpa garis pembatas,
  • tidak bisa mengganti ikon.

Menu ini lebih cocok bagi pengguna yang belum memahai HTML, pengguna tidak perlu repot untuk mengedit HTML template-nya untuk mengubah menu navigasi.

  1. Pada dashboard Blogger, klik Tata Letak
  2. temukan widget dengan judul 'Navigation Menu', klik icon pada widget tersebut
  3. tekan tombol switch pada 'Tampilkan widget ini'
  4. simpan lalu edit widget 'Navigation Menu (Simple)' dan aktifkan widget ini dengan menekan tombol switch 'Tampilkan widget ini'
  5. Edit menu yang ada pada widget, Anda bisa menghapus, menambah atau merubah urutan menunya.

Standard Menu

We provide two navigation menu options that you can use, the default menu used in the template with additional dropdowns and custom icons, you can only edit this menu through the theme's HTML editor.

  1. On the Blogger dashboard, click Themes
  2. click icon on the Customize button
  3. select Edit HTML,
  4. find HTML000 widget, for faster search click icon:
    Edit HTML Blogger

You will find code like below:

<!--[ 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>

The above code is used to add a single menu without sub-menus.

Description:
  • Change the href='#' attribute with your destination link.
  • Replace the marked word with the menu title you want.
  • Add new icons by replacing code in the section <b:include name='profiles-icon'/> with the SVG icons, you can find it here!.

Multimenu With Dropdown

If needed, you can add some sub-menus in your navigation. On some templates you may find two styles available.

<!--[ 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>

2nd style dropdown:

<!--[ 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>
How to add a new dropdown menu?

To add a new dropdown menu please copy one of the code above and paste it where you want, make sure id='...' and for='...' attributes have the same value. ID must be unique, there cannot be two identical IDs in one page.

Adding or Replacing Icons on the Menu

We have marked the icon section in navigation code, you can change it with another <svg> code.

Here we provide an example of correct icon replacement:

<!--[ 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>

Adding a Line Breaks

If you look at the demo template, there's a border line between one menu and another. To use it, simply add new classname br in the <li> tag, an example of the correct implementation is as follows:

<!--[ 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>

Added 'New!' Text or 'Free!' (Optional)

Add class='new' or class='free' in your navigation menu, for example:

<!--[ 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>

You can also change the word New! or Free! whatever you want. Find and replace the code marked below with the word of your choice:

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

Attribute expr:href='...'

You may find some expr:href attribute in the template, this code is useful for writing URLs with Blogger expressions. The advantage of this attribute is that if your blog's domain is changed, for example from blogspot.com to a custom domain (.com, .net, etc.) then you no longer need to change the links in your template one by one.

You can see the difference between writing href and expr:href attributes in the code below:

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

Alternative Menu

Excess:
  • Can be edited from Blogger Layout,
  • Easily change page titles and URLs.
Lack:
  • No dropdown menu,
  • without line breaks,
  • can't change icon.

This menu is more suitable for users who aren't familiar with HTML, users don't have to bother to edit the HTML template to change the navigation menu.

  1. On Blogger dashboard, click Layout
  2. find widget with title 'Navigation Menu', click icon on the widget
  3. click the switch button on 'Show this widget'
  4. save it then edit the widget 'Navigation Menu (Simple)' and activate this widget by pressing the switch button 'Show this widget'
  5. Edit menu in the widget, you can delete, add or change order of the menu.

Posting Komentar

To avoid SPAM, all comments will be moderated before being displayed.