Cara Membuat Nama Pada Icon Menu Navigasi di Template Median UI Versi Mobile
ShayTekno.com - Pada kesempatan sebelumnya admin sudah membahas tentang cara modifikasi ukuran main menu pada template median UI, Fletro, dan imagz, apakah teman-teman sudah membaca artikel sebelumnya.
Keuntungan Menampilkan Nama Pada Icon Navigasi
Nah menarik kesimpulan dari penggunaan template Median UI mungkin kalian sudah pernah melihat beberapa website yang jika anda buka maka akan ada beberapa menu navigasi pada halaman utama dan didalam Artikel postingan memiliki nama pada jenis Menu Icon.
Adapun keuntungan Menampilkan nama pada Icon Menu Navigasi Pada template Median UI yang kita gunakan tentunya, banyak menfaat yang bisa kita dapatkan. Salah satunya saja pengguna/pengunjung blog kita mudah mengetahui bahwa menu tersebut adalah icon beranda misalnya saja.
Baiklah jika sudah mengetahui keuntungan Menampilkan nama pada Icon Navigasi Pada template Median UI, untuk itu mari kita lanjutkan tentang langkah langkah cara menampilkan nama pada Icon Navigasi pada template Median UI yang kalian gunakan di bawah ini.
Cara Membuat Nama Pada Icon Menu Navigasi Di Median UI Versi Mobile
Warning!! Sebelum melanjutkan Untuk lebih mudah dalam mencari kode, gunakan laptop atau FC, Jika anda menggunakan perangkat smartphone android silahkan gunakan keyboard android yang mendukung Ctrl F agar memudahkan anda mencuri kode yang perlu di tambah atau di cari.
- Langkah Pertama Buka Dasbor Blogger.
- Lalu pilih menu TEMA.
- Langkah selanjutnya pilih metode Edit HTML.
- Gunakan Ctrl F.
- Lalu cari kode <ul class='mobileMenu'>
- Lalu Tambahkan kode <br/> Nama di baris terakhir kode yang terdapat kata -icon.
- Atau perhatikan contohnya di bawah Ini.
<ul class='mobileMenu'>
<b:loop index='soc' values='data:links' var='link'>
<b:if cond='data:soc <= 2'>
<li>
<b:if cond='data:link.name == "Home"'>
<b:class name='mHome'/>
<a expr:aria-label='data:link.name' expr:href='data:blog.homepageUrl.canonical' role='button'>
<b:include name='home-alt-icon'/>
</a><br/>Beranda
<b:elseif cond='data:link.name == "Search"'/>
<b:class name='mSearch'/>
<label for='searchInput'><b:include name='search-icon'/></label><br/>Cari
<b:elseif cond='data:link.name == "Navigation"'/>
<b:class name='mNav'/>
<label for='offnav-input'><b:include name='category-icon'/></label><br/>Menu
<b:elseif cond='data:link.name == "Dark"'/>
<b:class name='mDark'/>
<div onclick='darkMode()'><b:include name='moon-icon'/></div><br/>Dark
<b:elseif cond='data:link.name == "Top"'/>
<b:class name='mTop'/>
<div onclick='window.scrollTo({top: 0});'>
<b:include name='arow-up-circle-icon'/>
</div><br/>Keatas
<b:elseif cond='data:link.name == "Share"'/>
<b:class name='mShare'/>
<label for='offshare-check'><b:include name='share-icon'/></label><br/>Bagikan
<b:elseif cond='data:link.name == "Comment"'/>
<b:class name='mComment'/>
<a aria-label='Show comments' href='#comment'><b:include name='chat-icon'/></a><br/>Komentar
</b:if>
</li>
</b:if>
<b:if cond='data:soc == 3'>
<b:if cond='data:view.isPost'>
<li class='mShare'>
<label for='offshare-check'><b:include name='share-icon'/></label>
</li><br/>Bagikan
<b:else/>
<li class='mDark'>
<div onclick='darkMode()'><b:include name='moon-icon'/></div><br/>Dark
</li>
</b:if>
</b:if>
<b:if cond='data:soc == 4'>
<b:if cond='data:view.isPost'>
<li class='mComment'>
<a aria-label='Show comments' href='#comment'><b:include name='chat-icon'/></a><br/>Komentar
</li> <b:else/>
<li class='mTop'>
<div onclick='window.scrollTo({top: 0});'>
<b:include name='filter-icon'/>
</div><br/>keatas
</li>
</b:if>
</b:if>
</b:loop>
</ul>
</b:includable>
</b:widget>
</b:section>
</b:tag>- Jika sudah Klik Simpan.
- Yang admin blog warna merah merupakan Nama-nama Menu.
- Yang admin blog warna kuning merupakan jenis-jenis Icon. (Svg)
Jika anda tidak mau repot-repot dalam menabahkan nama pada icon kalian juga bisa langsung melakukan copy/salin kode yang di atas silahkan anda hapus bagian kode yang terdapat di template anda lalu silahkan anda gunakan javascript yang sudah admin buat di atas hasilnya, seperti di website ini.
Atau anda ingin merubah nama pada icon anda anda juga bisa melakukan kostum sesuai dengan keinginan anda sendiri. Pastikan anda sudah mengetahui tentang svg nama nama pada Icon.
Untuk svg kostum kalian bisa menggunakan kostumisasi melalui link di bawah ini.
https://docs.jagodesain.com/2021/02/svg-icon.htmlKesimpulan
Jik ada pertanyaan terkait tutorial cara di atas kalian juga bisa bertanya melalui kolom komentar yang admin telah sediakan dibawah ini, terimakasih, selamat mencoba.
2 comments