Cara Membuat Mobile Menu Bottom di Blog - NaminaBoky

Cara Membuat Widget Mobile Menu di Blog.

Cara membuat dan memasang widget mobile menu di blog - Di artikel kali ini saya akan membagikan tutorial cara membuat widget mobile menu dengan gaya melayang seperti mobile menu yang umum digunakan pada sejumlah aplikasi mobile. Tutorial ini saya buatkan karena ada seseorang yang request untuk dibuatkan tutorial ini. Dan karena saya merasa sanggup, maka akan saya buatkan tutorialnya.

Mobile menu yang akan saya bagikan kali ini bisa disebut dengan navigasi bottom dan bisa juga disebut dengan widget. Apa pun itu, yang pasti bentuk dari mobile menu ini mirip dengan mobile menu yang umumnya digunakan pada sejumlah aplikasi seperti mobile menu pada aplikasi Tokopedia, Shopee, Blibli dan lain-lain.

Widget atau navigasi mobile menu ini berguna untuk memudahkan pengunjung ketika mereka ingin membuka menu navigasi atau beralih halaman sehingga lebih fleksibel. Sebab posisi atau telak dari widget mobile menu ini berada di bagian bawah dengan gaya melayang (floating) mirip seperti floating ads.

Dan sebetulnya, ada beberapa template blogger yang menggunakan widget mobile menu ini, lho. Contohnya seperti template buatan Jago Desain, yaitu template Median UI dan juga Fletro Pro.

Tapi mungkin ada beberapa orang yang ingin memasang mobile menu ini pada template selain itu dan tidak paham cara memasangnya. Oleh karena itu, di artikel kali ini akan saya buatkan tutorial cara membuat dan memasang mobile menu bottom di blog menggunakan CSS.

Cara Membuat Widget Mobile Menu di Blog

1. Pertama-tama masuk ke dashboard Blogger kamu.
2. Masuk ke menu Theme » Edit HTML.
3. Setelah itu salin dan taruh kode CSS berikut tepat di atas atau sebelum kode ]]></b:skin> atau </style>.

   /* Mobile Menu by NaminaBoky */
   :root{
   --mobT: #08102b ; /* Warna Tulisan (color) Pada Mobile Menu - Ganti Bagian Ini */
   --mobHv: #f1f1f0 ; /* Warna Ketika Mobile Menu Disentuh atau Diklik - Ganti Bagian Ini */
   --mobB: #fffdfc ; /* Warna Background Mobile Menu - Ganti Bagian Ini */
   --mobL: 0px ; /* Ukuran Border Mobile Menu */
   --mobBr: 12px ; /* Border Radius Mobile Menu */
   }
   
   .mobMn{
     position:fixed;
     left:0;
     right:0;
     bottom:0;
     background:var(--mobB);
     color:var(--mobT)
     border-top:1px solid var(--mobL);
     border-radius:7px 7px 0 0;
     padding:0 20px;
     box-shadow:0 -10px 25px -5px rgba(0,0,0,.1);
     z-index:2;
     font-size:12px
   }
   .mobMn svg.line{
     stroke:var(--mobT);
     opacity:.8
   }
   .mobMn ul{
     height:55px;
     display:flex;
     align-items:center;
     justify-content:center;
     list-style:none;
     margin:0;
     padding:0
   }
   .mobMn li{
     display:flex;
     justify-content:center;
     flex:1 0 20%
   }
   .mobMn li >*{
     display:inline-flex;
     align-items:center;
     justify-content:center;
     min-width:35px;
     height:35px;
     border-radius:30px;
     padding:0 8px;
     transition:var(--trans-1);
     color:inherit
   }
   .mobMn li svg{
     margin:0 3px;
     flex-shrink:0
   } 
   .mobMn li >*::after{
     content:attr(data-text);
     overflow:hidden;
     white-space:nowrap;
     text-overflow:ellipsis;
     max-width:0;
     margin:0;
     transition:inherit;
     opacity:.7
   } 
   .mobMn li >*:hover::after{
     max-width:70px;
     margin:0 3px
   }
   .mobMn .nmH{
     opacity:.7
   }
   .mobMn li >*:hover{
     background:var(--mobHv)
   }
   .mobMn li >*:hover svg.line{
     fill:var(--mobT) !important;
     opacity:.5
   }

   Jangan lupa sesuaikan warna untuk mobile menu pada bagian yang sudah ditandai. Sengaja saya buatkan root CSS agar lebih mudah saat ingin mengganti warna pada widget mobile menu-nya.

4. Kemudian salin dan taruh kode HTML untuk mobile menu berikut tepat di atas atau sebelum tag penutup </body>.

   <!--[ Mobile Menu by NaminaBoky ]-->
   <div class='mobMn'>
     <div>
       <ul>
         <li>
           <a href='#'>
             <!--[ ikon svg di sini ]-->
           </a>
         </li>
         <li>
           <a href='#'>
             <!--[ ikon svg di sini ]-->
           </a>
         </li>
         <li>
           <a href='#'>
             <!--[ ikon svg di sini ]-->
           </a>
         </li>
         <li>
           <a href='#'>
             <!--[ ikon svg di sini ]-->
           </a>
         </li>
         <li>
           <a href='#'>
             <!--[ ikon svg di sini ]-->
           </a>
         </li>
       </ul>
     </div>
   </div>

   Kamu bisa sesuaikan sendiri tombol atau menu apa saja yang ingin kamu taruh pada mobile menu tersebut. Untuk penggunaan ikon, direkomendasikan untuk menggunakan ikon SVG.

5. Jika semuanya sudah terpasang dan sudah disesuaikan, jangan lupa klik simpan dan lihat hasilnya.
6. Selesai.

Untuk demo tampilan mobile menu, kamu bisa lihat langsung di blog ini (hanya bisa dilihat menggunakan mobile atau smartphone saja dan hanya muncul pada halaman postingan saja).

Demikian tutorial cara membuat dan memasang widget mobile menu di blog yang bisa saya sampaikan. Jika ada yang belum paham atau kesulitan saat memasang kode, tanyakan di kolom komentar. Semoga artikel ini bisa bermanfaat dan membantu.