🔔 Aktifkan notifikasi disini Google News

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?

SeaBank - Saifullah (9016-9529-0071)

BRI - Saifullah (05680-10003-81533)

BCA Blu - Saifullah (007847464643)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.
Seorang Guru Bahasa Inggris, Kreator Digital, Editor, Publisher, Advertiser, Blogger, Youtuber, Distributor, Desain Grafis, Web Developer, dan Programmer.

13 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐
  1. bang kenapa kalo upload gambar di blogger sekarang urlnya blogger.googleusercontent.com bukan 1.bp.blogspot.com/
    1. Untuk mengatasi hal tersebut dapat dilakukan dengan menambahkan akun google sebagai penulis di dalam setelan (pengaturan) dashboard blogger.

      Untuk membuat akun google kita pasti sudah paham caranya. Setelah akun google ditambahkan, silahkan masuk ke dashboard blogger lalu tambahkan penulis dengan mengundang email akun google baru tadi.

      Perlu disampaikan, setelah penulis ditambahkan, jangan gunakan akun tersebut untuk memposting video. Karena apabila hal itu dilakukan, maka akun google tersebut bakal kembali lagi membentuk link blogger.googleusercontent.com ketika meng-insert gambar ke dalam postingan.

      Bila hal itu terjadi, maka anda harus kembali membuat akun baru, dan mengulangi mengundang kembali sebagai penulis di blogger milik anda.

      Intinya, apabila masalah ini masih terus terjadi, maka perlu dua akun pada 1 blogger. Akun khusus memposting video dan akun untuk artikel dengan menggunakan gambar.

    2. Saya punya sedikit solusi yang mungkin bisa admin terapkan,yaitu admin bisa upload foto melalui tata letak yaitu bagian header terdapat foto jadi admin upload foto disitu lalu ambil url nya dan pastekan di postingan. Semoga bermanfaat min 🙏
    3. Kalau upload di tataletak jadi kerja dua kali, prosesnya lambat dan memakan waktu. Daripada gitu mending upload di Google Foto lebih cepat dan udah terhubung langsung di tombol upload foto blogger.
  2. Untuk Dark, Share, Comment, itu Gak fungsi min
  3. untuk ubah ukuran icon nya gimana min
  4. min itu gimana y caranya biar icon back to top itu gk berganti menjadi icon komen saat masuk ke halaman post langsung berubah gitu. pengennya sih icon lain aja jgn icon to top yg keganti
    1. Kakak pakai template apa? Setau saya icon back to top tidak pernah berganti icon lain.
  5. Maaf bang... Numpang tanya kalau median ui 1.6 caranya gmn ? Tdi udah saya cari kata kuncinya nggak ketemu-ketemu. Trimakasih banyak bang
    1. Median UI 1.6 update terbaru sudah ditambahkan label kok sama pembuat templatenya
  6. Bang cara ganti icon meni di bawah Widget Mobile Menu Median UI giamana yah tolong dong buatin tutorialnya terimakasih
  7. Bang mau nanya.. Untuk Tambah Tombol Follow Median UI 1.6 bagaimana ya. Saya cari-cari gak ketemu?

    Nah kayk punya abang ini kan tampilan Mobile nya ada tombol follow.

    Mohon jawabannya
    1. Request-nya sudah di buatkan tutorialnya https://www.saifullah.id/2022/06/cara-tambah-tombol-follow-median-ui.html
Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode



  • Home


  • Follow


  • MENU


  • Share


  • Comment
Cookie Consent
Kami menyajikan cookie di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.