Oleh sebab itu, beberapa bulan yang lalu saya berinisiatif menambahkan keterangan label di bawahnya. Ternyata banyak sekali yang tertarik dengan tampilan ini. Bahkan pembuat template Median UI pun menambahkan fitur label di bawah tombol ini sebagai fitur tambahan pada update Median UI 1.6.
Nah, bagi teman-teman yang penasaran cara membuatnya, simak tutorial berikut ya.
Cara Membuat Label Mobile Menu Median UI
- Buka Dashboard Blogger
- Klik Tema
- Tekan icon Segitiga Terbalik
- Pilih Edit HTML
- Cari kode <ul class='mobileMenu'>
- Tambahkan kode <br/> Nama di baris terakhir kode yang terdapat kata -icon. Lihat contoh 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/>Gelap<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/>Ke atas<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/>Gelap</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
- Simpan Tema
Dengan menambahkan kode di atas, maka widget Mobile Menu Median UI kita akan memiliki nama. Kelebihannya diberi nama tentu untuk mempermudah pengunjung mengetahui fungsi tombol yang sudah kita sediakan.
Demikian cara membuat tulisan dibawah folder mobile menu yang di request Catatan Populer di Forum Diskusi.
Jika tutorial ini bermanfaat, jangan lupa share artikel ini ke teman kalian. Semakin banyak orang yang berkunjung ke website ini, maka semakin semangat saya membagikan ilmu dan tutorial yang dirahasiakan selama ini dunia Blog.