Cara Tambah Tombol Follow Blogger Pada Mobile Navigasi Median UI 1.6

Saifulah.id - Mobile Menu adalah menu berupa tombol yang biasa muncul di bawah layar saat Blog di akses melalui Smartphone. Mobile Menu saat ini banyak diterapkan oleh beberapa template Blogger termasuk template Median UI versi 1.4, 1.5, dan 1.6 (versi terbaru).

Mobile Menu Median UI 1.5 VS Median UI 1.6

1. Jumlah Tombol

Berbeda dari Median UI 1.5, Mobile Menu pada Median UI 1.6 hanya memiliki 4 tombol saja. Sedangkan Median UI 1.5 memiliki 5 tombol.

2. Responsivitas

Mobile Menu Median UI 1.6 sangatlah monoton. Di halaman Beranda maupun di halaman Postingan, jenis menunya tetap sama. Tidak ada pembeda sama sekali. Sedangkan Median UI versi sebelumnya lebih variatif.

Coba kalian perhatikan Mobile Menu pada template Saifullah.id, saat kita membuka halaman Beranda (Homepage) akan muncul tombol Menu, Follow, Rating, Forum, dan Toko.

Tapi, jika kita buka postingan Blog, tombol itu akan berubah menjadi Menu, Follow, Home, Comment, dan Share. Sehingga bisa menjadi shortcut untuk kembali ke halaman awal, untuk membuka komentar, dan untuk share artikel tanpa perlu scroll halaman. Keren bukan?

Makanya saya tetap menggunakan Median UI 1.5 karena lebih lengkap fiturnya dibanding Median UI 1.6 yang terlalu simpel dan susah buat divariasikan.

Kabar Baik

Untuk kalian yang terlanjur pakai Median UI 1.6, berikut ini saya bagikan tutorial cara menambahkan tombol Follow di Mobile Menu agar jumlah tombolnya jadi 5 dan lebih banyak manfaatnya. Rugi rasanya kalau bisa menampilkan 5 tombol tapi cuma dipasang 4 tombol.

Sedangkan untuk membuat tombolnya bisa berubah-ubah saya masih belum tahu ya. Tunggu aja update berikutnya dari Saifullah.id

Cara Tambah Tombol Follow Pada Median UI 1.6

1. Buka Dashboard Blogger
2. Klik Tema
3. Tekan icon Segitiga Terbalik
4. Pilih Edit HTML
   
5. Pertama, cari kode <!--[ SVG Icon ]-->
6. Lalu letakkan kode berikut tepat di bawahnya
   

         <!--[ Bell icon ]-->

         <b:includable id='bell-icon'>

         <svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g><line x1='13.64847' x2='10.35153' y1='22.00511' y2='22.00511'/><line x1='12' x2='12' y1='7.35666' y2='10.65359'/><path d='M105.28571,269.75867h0a2.39194,2.39194,0,0,1-2.39194,2.392H87.67766a2.392,2.392,0,0,1-2.392-2.392h0a2.392,2.392,0,0,1,.98507-1.93445h0a4.28556,4.28556,0,0,0,1.76493-3.46591v-2.08121a7.42772,7.42772,0,0,1,6.72856-7.49819,7.25534,7.25534,0,0,1,7.77145,7.2317v2.34771a4.28557,4.28557,0,0,0,1.76492,3.4659h0A2.392,2.392,0,0,1,105.28571,269.75867Z' transform='translate(-83.28571 -252.76573)'/></g></svg>

         </b:includable>
7. Lalu, cari kode <b:elseif cond='data:item == &quot;Light&quot;'/>
8. Maka kalian akan menemukan kode seperti ini
   

   <b:elseif cond='data:item == &quot;Light&quot;'/>

   <b:if cond='data:view.url != data:view.url params { amp: &quot;1&quot; }'>

   <li class='mL'>

   <span class='tDL' data-light='Dark' expr:data-text='data:item' onclick='darkMode()' role='button'><b:include name='sun-moon-icon'/></span>

   </li>

   </b:if>
9. Lalu letakkan kode berikut tepat di bawah kode </b:if>
   

   <b:elseif cond='data:item == &quot;Follow&quot;'/>

   <li class='Saifullah-id'>

   <a aria-label='Subscribe' expr:data-text='data:item' href='https://www.blogger.com/follow.g?blogID=4091998219262947498'><b:include name='bell-icon'/></a>

   </li>
10. Hasilnya jadi seperti ini

    

    
    
    
11. Jangan lupa ganti blogID=4091998219262947498 dengan ID blog kalian sendiri.
12. Cari kode <b:widget-setting name='shownum'/>
    

                        <b:widget-setting name='shownum'/>

                        <b:widget-setting name='item-5'>Comments</b:widget-setting>

                        <b:widget-setting name='item-4'>Share</b:widget-setting>

                        <b:widget-setting name='item-3'>Dark</b:widget-setting>

                        <b:widget-setting name='sorting'>NONE</b:widget-setting>

                        <b:widget-setting name='item-2'>Menu</b:widget-setting>

                        <b:widget-setting name='item-1'>Search</b:widget-setting>

                        <b:widget-setting name='item-0'>Home</b:widget-setting>
13. Ganti dengan kode berikut
    

                        <b:widget-setting name='shownum'/>

                        <b:widget-setting name='item-6'>Comments</b:widget-setting>

                        <b:widget-setting name='item-5'>Share</b:widget-setting>

                        <b:widget-setting name='item-4'>Follow</b:widget-setting>

                        <b:widget-setting name='item-3'>Dark</b:widget-setting>

                        <b:widget-setting name='sorting'>NONE</b:widget-setting>

                        <b:widget-setting name='item-2'>Menu</b:widget-setting>

                        <b:widget-setting name='item-1'>Search</b:widget-setting>

                        <b:widget-setting name='item-0'>Home</b:widget-setting>
14. Simpan Tema
15. Selesai

Cara Cek ID Blog

ID Blog bisa di cek melalui address bar di browser kalian. Setiap kali mengunjungi Blogger pasti ID blog akan muncul di ujung link blog. Coba perhatikan gambar berikut.

LIVE DEMO

Median UI 1.5 Median UI 1.6