Cara Mengubah Header Menu (Expert)
Alasan utama menu ini tidak bisa di edit/ubah pada menu Layout atau Tata Letak adalah karena kodenya yang sedikit komplek serta penulisan kode ikon SVG yang lumayan panjang, untuk itu toturial ini ditulis untuk mempermudah Anda mengganti atau menambahkan link header menu.
Perubahan yang paling menonjol dari menu ini adalah tampilan mobile yang menambahkan ikon SVG serta link social media yang tidak ditampilkan pada dekstop. Ikuti langkah-langkah dibawah ini untuk mengubah header menu:
Mengubah Link
Secara default menu yang tersedia adalah beberapa dibawah ini :
// Cari kode id='HTML0', Anda akan menemukan kumpulan kode seperti dibawah ini
<ul class='header-menu' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<li class='home'>
...
</li>
<li>
<!-- Url/link yang diganti -->
<a class='table' href='#' itemprop='url'>
<!-- Icon -->
<svg class='line hidden' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>...</svg>
<!-- Teks -->
<span class='name' itemprop='name'>About</span>
</a>
</li>
<li>
<!-- Url/link yang diganti -->
<a class='table' expr:href='data:blog.homepageUrl + "p/contact.html"' itemprop='url'>
<!-- Icon -->
<svg class='line hidden' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>...</svg>
<!-- Teks -->
<span class='name' itemprop='name'>Contact</span>
</a>
</li>
<!-- Dropdown menu -->
<li class='dropdown break'>
<input class='drop-menu hidden' id='offdrop-menu1' name='dropdown' type='checkbox'/>
<label class='table' for='offdrop-menu1'>
<!-- icon -->
<svg class='line hidden' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>...</svg>
<!-- Teks -->
<span class='name'>Category</span>
<!-- Icon -->
<svg class='line drop' viewBox='0 0 24 24'>...</svg>
</label>
<ul>
<li itemprop='name'><a expr:href='data:blog.homepageUrl + "search/label/Featured"' itemprop='url'>Featured</a></li>
<li itemprop='name'><a expr:href='data:blog.homepageUrl + "search/label/Fullread"' itemprop='url'>Fullread</a></li>
<li itemprop='name'><a expr:href='data:blog.homepageUrl + "search/label/Tutorial"' itemprop='url'>Tutorial</a></li>
<li itemprop='name'><a expr:href='data:blog.homepageUrl + "search/label/Uncategorized"' itemprop='url'>Uncategorized</a></li>
<li itemprop='name'><a expr:href='data:blog.homepageUrl + "search/label/Update"' itemprop='url'>Update</a></li>
</ul>
</li>
...
</ul>Silahkan ubah bagian yang sudah ditandai pada kode diatas untuk mengganti link header menu besreta judulnya.
Menambahkan dropdown
Jika ingin menambahkan dropdown yang lain maka tinggal copy bagian kode dibawah ini lalu ubah bagian yang ditandai dengan nomor lain, misal offdrop-menu3
<!-- Dropdown menu -->
<li class='dropdown break'>
<input class='drop-menu hidden' id='offdrop-menu1' name='dropdown' type='checkbox'/>
<label class='table' for='offdrop-menu1'>
<!-- icon -->
<svg class='line hidden' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>...</svg>
<!-- Teks -->
<span class='name'>Category</span>
<!-- Icon -->
<svg class='line drop' viewBox='0 0 24 24'>...</svg>
</label>
<ul>
<li itemprop='name'><a expr:href='data:blog.homepageUrl + "search/label/Featured"' itemprop='url'>Featured</a></li>
<li itemprop='name'><a expr:href='data:blog.homepageUrl + "search/label/Fullread"' itemprop='url'>Fullread</a></li>
<li itemprop='name'><a expr:href='data:blog.homepageUrl + "search/label/Tutorial"' itemprop='url'>Tutorial</a></li>
<li itemprop='name'><a expr:href='data:blog.homepageUrl + "search/label/Uncategorized"' itemprop='url'>Uncategorized</a></li>
<li itemprop='name'><a expr:href='data:blog.homepageUrl + "search/label/Update"' itemprop='url'>Update</a></li>
</ul>
</li>- [ offsub-menu1 ] : harus diubah menjadi 'offsub-menu2' pastikan kedua kode yang ditandai sama, jika ingin menambahkan dropdown baru lagi ubah menjadi 'offsub-menu3' dan seterusnya
- [ Category ] : Judul dari menu dropdown yang anda buat
- [ search/label/Featured ] : link label pada blog Anda
Mengubah Icon
Icon dalam template ini ditandai dengan kode <svg>...</svg> seperti kode yang diblok dibawah ini:
<ul class='header-menu' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<li class='home'>
...
</li>
<li>
<!-- Url/link yang diganti -->
<a class='table' href='#' itemprop='url'>
<!-- Icon -->
<svg class='line hidden' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>...</svg>
<!-- Teks -->
<span class='name' itemprop='name'>About</span>
</a>
</li>
<li>
<!-- Url/link yang diganti -->
<a class='table' expr:href='data:blog.homepageUrl + "p/contact.html"' itemprop='url'>
<!-- Icon -->
<svg class='line hidden' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>...</svg>
<!-- Teks -->
<span class='name' itemprop='name'>Contact</span>
</a>
</li>
<!-- Dropdown menu -->
<li class='dropdown break'>
<input class='drop-menu hidden' id='offdrop-menu1' name='dropdown' type='checkbox'/>
<label class='table' for='offdrop-menu1'>
<!-- icon -->
<svg class='line hidden' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>...</svg>
<!-- Teks -->
<span class='name'>Category</span>
<!-- Icon -->
<svg class='line drop' viewBox='0 0 24 24'>...</svg>
</label>
<ul>
<li itemprop='name'><a expr:href='data:blog.homepageUrl + "search/label/Featured"' itemprop='url'>Featured</a></li>
<li itemprop='name'><a expr:href='data:blog.homepageUrl + "search/label/Fullread"' itemprop='url'>Fullread</a></li>
<li itemprop='name'><a expr:href='data:blog.homepageUrl + "search/label/Tutorial"' itemprop='url'>Tutorial</a></li>
<li itemprop='name'><a expr:href='data:blog.homepageUrl + "search/label/Uncategorized"' itemprop='url'>Uncategorized</a></li>
<li itemprop='name'><a expr:href='data:blog.homepageUrl + "search/label/Update"' itemprop='url'>Update</a></li>
</ul>
</li>
...
</ul>Penjelasan atribut expr:href pada link
Ketika mengedit menu navigasi Anda mungkin akan menemukan tag <a> dengan atribut unik expr:href='...'. Fungsi atribut ini untuk mempersingkat domain blog Anda, dari para menuliskan langsung domain homepage Anda kami menyingkatnya dengan memakai atribut ini.
Kelebihannya adalah ketika Anda mengganti domain, Anda tidak perlu repot-repot untuk mengubah link dalam blog satu-persatu. Untuk mengeditnya Anda hanya perlu mengubah bagian yang ditandai dalam kode dibawah ini.
Sebagai contoh anggap saja domain laman Anda seperti ini:
https://www.domain_kamu.com/p/laman-kamu.htmlCukup salin dan tempel bagian yang diblok warna pada domain Anda dan tempelkan pada bagian yang ditandai pada contoh tag dibawah ini:
<a expr:href='data:blog.homepageUrl + "p/contact.html"' title='...'> ... </a>Menambahkan teks New! pada menu navigasi (optional)
Jika Anda perhatikan pada bagian navigasi, terdapat menu dengan tambahan teks 'New!' yang bertujuan untuk menyoroti menu tersebut agar lebih banyak dilihat dan mengundang klik oleh user. Teks ini bersifat opsional anda bisa menambahkannya atau tidak, pada kode menu navigasi HTML00 carilah kode seperti dibawah ini :
<!-- Teks link -->
<span class='name' itemprop='name'>About</span>
// Tambahkan class 'new' pada tag tersebut sehinggal hasilnya menjadi seperti dibawah ini
<span class='name new' itemprop='About'>Tentang</span>bagaimana jika saya ingin mengubahnya menjadi teks lain ?
Kami menggunakan CSS Pseudo ::after untuk menampilkan teks tersebut, jadi Anda tidak perlu repot-repot menulis ulang atau mengganti satu persatu kata tersebut. Cukup cari kode CSS seperti dibawah ini dan ganti teks 'new!' pada kode tersebut dengan kata yang Anda inginkan.
header .menunav .new:after{content:'New!'; ... }