Catatan Perubahan Menu Navigasi Pertama pada Theme Sebardi Blog

Setelah berhasil mengubah tampilan menu navigasi kedua pada theme Sebardi Blog. Kali ini dilanjutkan dengan perubahan pada menu navigasi pertama. Bagi yang terlewat silahkan kembali melihat postingan tentang cara mengubah tampilan menu kedua.

Dan hasil yang terlihat pada menu pertama ini berbeda antara desktop dan mobile. Namun jika melihat ujicobanya melalui tool blogger atau mobile test dot me. Ini seolah-olah tidak berfungsi padahal sudah menggunakan tag conditional blogger yang terbaru.

Dan setelah saya melihat hasil akhir melalui ponsel ternyata memang sudah berfungsi. Nah, teman-teman tertarik untuk mencoba merubahnya juga? Script ini akhirnya saya gunakan pada theme yang digunakan sekarang. 

Lebih jelasnya, ikuti tutorial cara mengganti menu navigasi pertama pada theme Sebardi Blog berikut ini.

Cara Mengganti Menu Navigasi Pertama Theme Sebardi Blog

Sebelum melakukan langkah-langkah di bawah ini pastikan sudah menggunakan theme Sebardi Blog. Dan bagi yang belum mencobanya silahkanda unduh theme Sebardi Blog terlebih dahulu. Setelah itu lakukan perubahan menu pertama pada theme sebagaimana tahapan berikut:

1. Login ke dashboard Blogger.

2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".

3. Cari kode yang terlihat seperti di bawah ini. Gunakan tombol Ctrl + F dan ketikan : Menu Navigasi Pertama untuk mempercepat pencarian.

<div class='container'> <nav aria-label='Third navbar example' class='navbar navbar-expand-lg bg-light bg-gradient py-0'> <a class='navbar-brand' href='https://sebardi.id'><img alt='Logo Sebardi Blog' height='31' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwBqTj4KBtxtCrGwK7-gxR53WpNA94QgfCs3e-Lj6Ol2Xvu6MsWaTfYLl9FsEYEgO0f2WrCmGbMBDeyT90lYGhcMyKTHF7eR1Pj3hC8Rg2Vrz243gH7eVt2QiybjsnpVzbqi4dGsnGFQY/s0/Logo+Sebardi+Blog.webp' width='139'/></a> <button aria-controls='navbarsExample03' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler' data-bs-target='#navbarsExample03' data-bs-toggle='collapse' type='button'> <span class='navbar-toggler-icon'/> </button> <div class='collapse navbar-collapse' id='navbarsExample03'> <ul class='navbar-nav ms-2 me-auto mb-2 mb-sm-0'> <li class='nav-item'><a class='nav-link menu1 text-dark' href='https://www.sebardi.id/p/tentang-blog.html'>About</a></li> <li class='nav-item'><a class='nav-link menu1 text-dark' href='https://www.sebardi.id/p/hubungi-saya.html'>Contact Us</a></li> <li class='nav-item'><a class='nav-link menu1 text-dark' href='https://www.sebardi.id/p/disclaimer.html'>Disclaimer</a></li> <li class='nav-item'><a class='nav-link menu1 text-dark' href='https://www.sebardi.id/p/privacy-policy.html'>Privacy Policy</a></li> <li class='nav-item'><a class='nav-link menu1 text-dark' href='https://www.sebardi.id/p/terms-conditions.html'>Terms and Conditions</a></li> </ul> <form class='navbar-form navbar-right' expr:action='data:blog.homepageUrl + "search"' role='search'> <div class='form-group ms-2 mt-0 mb-0'> <div class='input-group'> <input aria-label='Search' class='form-control' id='text' name='q' placeholder='Search' value=''/><button class='btnsearch btn-primary' type='submit'> <i class='bi bi-search'/> </button> </div> </div> </form> </div> </nav> </div>

4. Jika sudah ketemu silahkan ganti script di atas dengan baris kode berikut: 

<div class='container'> <nav aria-label='Third navbar example' class='navbar navbar-expand bg-light bg-gradient py-0'> <a class='navbar-brand' href='https://sebardi.id'><img alt='Logo Sebardi Blog' height='31' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwBqTj4KBtxtCrGwK7-gxR53WpNA94QgfCs3e-Lj6Ol2Xvu6MsWaTfYLl9FsEYEgO0f2WrCmGbMBDeyT90lYGhcMyKTHF7eR1Pj3hC8Rg2Vrz243gH7eVt2QiybjsnpVzbqi4dGsnGFQY/s0/Logo+Sebardi+Blog.webp' width='139'/></a> <button aria-controls='navbarsExample03' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler' data-bs-target='#navbarsExample03' data-bs-toggle='collapse' type='button'> <span class='navbar-toggler-icon'/> </button> <div class='collapse navbar-collapse' id='navbarsExample03'> <b:if cond='data:blog.isMobileRequest == "false"'> <!-- tidak muncul di mobile --> <ul class='navbar-nav ms-2 me-auto mb-2 mb-sm-0'> <li class='nav-item'><a class='nav-link menu1 text-dark' href='https://www.sebardi.id/p/tentang-blog.html'>About</a></li> <li class='nav-item'><a class='nav-link menu1 text-dark' href='https://www.sebardi.id/p/hubungi-saya.html'>Contact Us</a></li> <li class='nav-item'><a class='nav-link menu1 text-dark' href='https://www.sebardi.id/p/disclaimer.html'>Disclaimer</a></li> <li class='nav-item'><a class='nav-link menu1 text-dark' href='https://www.sebardi.id/p/privacy-policy.html'>Privacy Policy</a></li> <li class='nav-item'><a class='nav-link menu1 text-dark' href='https://www.sebardi.id/p/terms-conditions.html'>Terms and Conditions</a></li> </ul> </b:if> <b:if cond='data:blog.isMobileRequest == "true"'> <button aria-expanded='false' class='btn btn-light' data-bs-toggle='dropdown' id='dropdownMenuButton1' type='button'> Menu</button> <ul aria-labelledby='dropdownMenuButton1' class='dropdown-menu dropdown-menu-end'> <li class='nav-item'><a class='nav-link menu1 text-dark' href='https://www.sebardi.id/p/tentang-blog.html'>About</a></li> <li class='nav-item'><a class='nav-link menu1 text-dark' href='https://www.sebardi.id/p/hubungi-saya.html'>Contact Us</a></li> <li class='nav-item'><a class='nav-link menu1 text-dark' href='https://www.sebardi.id/p/disclaimer.html'>Disclaimer</a></li> <li class='nav-item'><a class='nav-link menu1 text-dark' href='https://www.sebardi.id/p/privacy-policy.html'>Privacy Policy</a></li> <li class='nav-item'><a class='nav-link menu1 text-dark' href='https://www.sebardi.id/p/terms-conditions.html'>Terms and Conditions</a></li> </ul> </b:if> <div class='menu-search'> <button aria-expanded='false' class='btn btn-light' data-bs-toggle='dropdown' id='dropdownMenuButton1' type='button'><i class='bi bi-search'/></button> <ul aria-labelledby='dropdownMenuButton1' class='dropdown-menu dropdown-menu-end'> <form class='navbar-form navbar-right' expr:action='data:blog.homepageUrl + "search"' role='search'> <div class='form-group ms-2 mt-0 mb-0'> <div class='input-group'> <input aria-label='Search' class='form-control' id='text' name='q' placeholder='Search' value=''/><button class='btnsearch btn-primary' type='submit'> <i class='bi bi-search'/> </button> </div> </div> </form> </ul> </div> <div class='dropdown theme'> <button aria-expanded='false' class='btn btn-light' data-bs-toggle='dropdown' id='dropdownMenuButton1' type='button'><i class='bi bi-brightness-high'/></button> <ul aria-labelledby='dropdownMenuButton1' class='dropdown-menu dropdown-menu-end'> <button aria-expanded='false' class='btn btn-light' data-bs-toggle='dropdown' id='dropdownMenuButton1' type='button'><i class='bi bi-brightness-high'/> Light Theme</button> <button aria-expanded='false' class='btn btn-light' data-bs-toggle='dropdown' id='dropdownMenuButton1' type='button'><i class='bi bi-moon-stars-fill'/> Dark Theme</button> </ul> </div> </div> </nav> </div>

5. Simpan template.

Penutup

Menu navigasi pertama theme Sebardi Blog sekarang sudah berbeda dengan menu navigasi kedua yang berada di bawahnya. Dan di dalam menu pertama tersebut terlihat ada tombol untuk mengaktifkan tema gelap. Namun saat ini tombol tersebut belum berfungsi sebagaimana mestinya.

Mudah-mudahan ke depan bisa menemukan cara mengaktifkan mode gelap tersebut secara manual. Di sini pengennya sih murni menggunakan bantuan dari Bootstrap semua. Karena pada banyak permasalahan terbukti lebih simpel.

Namun pengennya juga bukan yang otomatis mengikuti pengaturan dari perangkat. Sebagaimana tema gelap bootstrap yang pernah dijabarkan pada blog ini. Sekian artikel kali ini tentang catatan perubahan menu navigasi pertama pada theme sebardi blog.

Semoga bisa dimaklumi.

Baca Juga