Cara Membuat Menu Navigasi Mirip Navbar Menu Milik JetTheme

Konsep ATM (Amati - Tiru - Modifikasi) dikenal wirausahawan ketika ingin menciptakan sebuah produk. Dengan metode tersebuat terciptalah produk yang berbeda dengan obyek sebelumnya yang menjadi sumber inspirasi.

Istilah yang mirip dengan itu ada juga "reinventing the wheel". Jika diterjemah secara bebas artinya kurang lebih adalah: "menciptakan kembali roda". Dalam hal ini bukan berarti kita berupaya menciptakan roda dengan bentuk nyleneh berupa kotak atau zigzag misalnya.

Melainkan upaya untuk memberi nilai tambah sesuai perkembangan zaman. Tentunya, bukan penemuan asal yang tidak berdasarkan ilmu pengetahuan. Dan istilah ini dikenal ilmuwan dalam dunia sains termasuk ilmu komputer. Misalnya Linux yang diciptakan Linus Torvald berdasarkan sistem Minix.

Sedangkan Minix itu sendiri sebagaimana dimaklumi bersama merupakan sistem operasi yang diadaptasi dari Unix. Nah, kali ini kita juga akan belajar mencoba untuk mengamati sebuah theme Blogger; yaitu Jet Theme. Kita coba tiru dahulu menu navigasinya setelah itu kembangkan sendiri.

Cara Membuat Menu Navigasi Mirip Navbar Menu Milik JetTheme

Untuk membuat menu navigasi yang mirip navbar menu JetTheme ini saya memiliki kendala. Yaitu "btn-rounded" yang tidak berfungsi sebagaimana mestinya. Meskipun demikian saya tetap membagikan hasil belajar otodidak ini melalui blog Sebardi.

Bagi teman-teman yang ingin ikut mencoba mempraktekannya silahkan ikuti tahapan di bawah ini. Siapa tahu ada diantaranya yang bisa menunjukan kesalahan "btn-rounded" yang tidak berfungsi. Selengkapnya, berikut ini cara membuat menu navbar mirip template JetTheme.

1. Login ke dashboard Blogger.

2. Gunakan blog dummy khusus untuk mempelajari kode dan dengan theme blogger sendiri dari nol sebagaimana sudah sering saya ingatkan dalam setiap artikel.

3. Klik "Tema" atau "Theme".

4. Klik icon "▼" di sebelah tulisan SESUAIKAN.

5. Klik "Edit HTML".

6. Masukan link CDN yang mengarah ke CSS Bootstrap versi terbaru, misalnya kode di bawah ini yang diletakan setelah tag <head> dan sebelum tag penutup </head> dan <b:skin><![CDATA[.

7. Letakan link berikut yang mengarah ke JavaScript bawaan Bootstrap server CDN; jsdelivr atau penyedia CDN Bootstrap lainnya. Kode di bawah ini diletakan sebelum tag penutup </body>.

8. Letakan baris kode menu navigasi mirip menu navbar JetTheme berikut ini setelah tag <body>.

<nav> <nav class='navbar navbar-expand-lg bg-body-tertiary'> <div class='container-fluid'> <a class='navbar-brand' href=''><img alt='Logo' class='d-inline-block align-text-top' height='50' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu4daPOPrBZJkBCZJGNP7Le4VGoFuOqRYN3342H63UITAUA5INPR6HDidwmBock0PAjFQM1Y0Ez6NGgMx-bjbbYY87LQIRBdGNdHnhEhY-UIpeX2WuR63idBo3iy4u3tFDdBzQ_oE-Ltp2EQJv7JN9Nj2VwgSSlK35bAuL30ZxqAQ_8oBi0iGA_53n2GM/s175/je%20theme%20logo.webp' width='180'/> </a> <button aria-controls='navbarNav' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler' data-bs-target='#navbarNav' data-bs-toggle='collapse' type='button'> <span class='navbar-toggler-icon'/> </button> <div class='collapse navbar-collapse' id='navbarNav'> <ul class='navbar-nav'> <li class='nav-item'><a aria-current='page' class='nav-link active' href='#'>Home</a></li> <li class='nav-item'><a class='nav-link' href='#'>About</a></li> <li class='nav-item dropdown'><a aria-expanded='false' aria-haspopup='true' class='nav-link dropdown-toggle text-black' data-toggle='dropdown' href='#' id='navbarDropdownMenuLink'>Tech</a> <ul aria-labelledby='navbarDropdownMenuLink' class='dropdown-menu'> <li class='dropdown-submenu'><a class='dropdown-item' href=''> DropDown</a></li> <li class='dropdown-submenu'><a class='dropdown-item' href=''> DropDown</a></li> </ul> </li> <li class='nav-item'><a class='nav-link' href='#'>Sitemap</a></li> <li class='nav-item'><a class='nav-link' href='#'>Contact</a></li> </ul> </div> <div class='collapse navbar-collapse justify-content-evenly' id='right-navbarNav'> <svg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'><path d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/></svg> <svg height='1em' viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'><path d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/></svg> <svg height='1em' viewBox='0 0 384 512' xmlns='http://www.w3.org/2000/svg'><path d='M144.7 98.7c-21 34.1-33.1 74.3-33.1 117.3c0 98 62.8 181.4 150.4 211.7c-12.4 2.8-25.3 4.3-38.6 4.3C126.6 432 48 353.3 48 256c0-68.9 39.4-128.4 96.8-157.3zm62.1-66C91.1 41.2 0 137.9 0 256C0 379.7 100 480 223.5 480c47.8 0 92-15 128.4-40.6c1.9-1.3 3.7-2.7 5.5-4c4.8-3.6 9.4-7.4 13.9-11.4c2.7-2.4 5.3-4.8 7.9-7.3c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-3.7 .6-7.4 1.2-11.1 1.6c-5 .5-10.1 .9-15.3 1c-1.2 0-2.5 0-3.7 0c-.1 0-.2 0-.3 0c-96.8-.2-175.2-78.9-175.2-176c0-54.8 24.9-103.7 64.1-136c1-.9 2.1-1.7 3.2-2.6c4-3.2 8.2-6.2 12.5-9c3.1-2 6.3-4 9.6-5.8c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-3.6-.3-7.1-.5-10.7-.6c-2.7-.1-5.5-.1-8.2-.1c-3.3 0-6.5 .1-9.8 .2c-2.3 .1-4.6 .2-6.9 .4z'/></svg> <button aria-expanded='false' aria-label='Name' class='btn' data-bs-toggle='dropdown' id='dropdownMenuButton-search' type='button'><svg height='24' viewBox='0 -960 960 960' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/></svg></button> <ul aria-labelledby='dropdownMenuButton-search' class='dropdown-menu dropdown-menu-end'> <form class='navbar-form navbar-left' expr:action='data:blog.homepageUrl + "search"' role='search'> <div class='form-group'> <div class='input-group'> <input aria-label='Search' class='form-control' id='text' name='q' placeholder='Enter your search' value=''/> <button class='btn btn-warning btn-rounded' type='submit'>Search</button> </div> </div> </form> </ul> </div> </div> </nav> </nav>

9. Simpan template.

10. Hasil akhir akan terlihat seperti ini.

11. Sedangkan versi asli dari navbar menu milik JetTheme adalah sebagai berikut:

12. Adapun menu dropdown ketika tersorot oleh pointer/mouse akan terlihat seperti ini:

13. Dan ini diadaptasi seperti tampilan dropdown menu JetTheme berikut:

14. Khusus untuk icon dark-mode kali ini belum ditambahkan.

15. Sedangkan menu search terlihat seperti berikut:

16. Sedikit berbeda dengan menu search milik Jet Theme karena "btn-rounded" tidak berfungsi.

17. Silahkan kembangkan sendiri kode menu navigasi di atas agar lebih baik lagi.

18. Untuk melihat halaman demo saat ini silahkan klik tautan di bawah.

Demo

Kesimpulan

Untuk memodifikasi kode menu navigasi secara total silahkan ubah seesuaikan baris kode pada nomor 8 di atas sesuai dengan preferensi masing-masing. Misalnya pada baris <div class='collapse navbar-collapse justify-content-evenly' id='right-navbarNav'> silahkan ubah atau ganti sesuai selera.

Sebagai contoh, "justify-content-evenly" di atas silahkan ganti dengan "justify-content-start" atau "justify-content-end" atau "justify-content-center" atau "justify-content-between" atau "justify-content-around" atau "justify-content-evenly" atau bisa juga dikombinasi dengan sm, md, lg, xl atau xxl.

Sekian artikel kali ini tentang cara membuat menu navigasi mirip navbar menu milik JetTheme.

Selamat mencoba.

Cara Membuat Menu Navigasi Mirip Navbar Menu Milik JetTheme

Cara Membuat Menu Navigasi Mirip Navbar Menu Milik JetTheme

Kesimpulan

Tidak ada komentar:

Posting Komentar

Memuat...

Yusuf