Cara Membuat Label di bawah Widget Mobile Menu Median UI

Cara Membuat Label di bawah Widget Mobile Menu Median UI
Saifulah.id
 - Salah satu keunikan template Median UI adalah terdapat menu khusus yang terletak di bawah layar. Dilihat sekilas, icon menu ini mirip dengan tampilan aplikasi di smartphone. Tapi sayang tidak terdapat nama label di bawah menu sebagai penjelas fungsi tombolnya.


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 di bawah Widget Mobile Menu Median UI

Cara Membuat Label Mobile Menu Median UI

  1. Buka Dashboard Blogger
  2. Klik Tema
  3. Tekan icon Segitiga Terbalik
  4. Pilih Edit HTML
    Cara Membuat Label di bawah Widget Mobile Menu Median UI

  5. Cari kode <ul class='mobileMenu'>
  6. 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 &lt;= 2'>
         <li>
         <b:if cond='data:link.name == &quot;Home&quot;'>
         <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 == &quot;Search&quot;'/>
         <b:class name='mSearch'/>
         <label for='searchInput'><b:include name='search-icon'/></label><br/>Cari
                                  
         <b:elseif cond='data:link.name == &quot;Navigation&quot;'/>
         <b:class name='mNav'/>
         <label for='offnav-input'><b:include name='category-icon'/></label><br/>Menu
                                  
         <b:elseif cond='data:link.name == &quot;Dark&quot;'/>
         <b:class name='mDark'/>
         <div onclick='darkMode()'><b:include name='moon-icon'/></div><br/>Gelap
                                  
         <b:elseif cond='data:link.name == &quot;Top&quot;'/>
         <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 == &quot;Share&quot;'/>
         <b:class name='mShare'/>
        <label for='offshare-check'><b:include name='share-icon'/></label><br/>Bagikan
                                  
        <b:elseif cond='data:link.name == &quot;Comment&quot;'/>
        <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
  7. 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.

Mau donasi lewat mana?

BRI - Saifullah (05680-10003-81533)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan donasi. Klik tombol merah.