Catatan Perubahan Menu Navigasi Kedua pada Theme Sebardi Blog

Sebagaimana sudah saya niatkan sebelum membagikan theme Sebardi Blog. Ada beberapa bagian yang ingin saya perbaiki dengan theme blogger ini. Dan alhamdulillah akhirnya berhasil mengganti menu navigasi kedua. Mungkin sekilas pandang tidak banyak berubah dengan menu navigasi sebelumnya.

Namun jika diperhatikan lebih jauh ada perbedaannya. Terutama jika digunakan pada perangkat yang berbeda. Dimana menu sebelumnya tidak memunculkan toggle ketika diakses dari perangkat mobile. Begitu juga submenu sekarang yang otomatis muncul ketika terkena pointer mouse.

Hal ini berbeda dengan menu navigasi sebelumnya yang pernah digunakan. Dan rencananya, perubahan menu tidak berhenti sampai di sini saja. Setelah berhasil mengubah menu navigasi kedua insya Allah diperbaiki juga untuk menu navigasi paling atas. Anda tertarik untuk merubah menu navigasi juga?

Simak bahasan kali ini tentang perubahan menu navigasi kedua pada theme Sebardi Blog.

Cara Mengganti Menu Navigasi Kedua Theme Sebardi Blog

Sekarang, menu navigasi kedua saya sudah berubah seperti yang Anda lihat. Tidak lagi menggunakan versi sebelumnya yang saya share kemarin. Untuk itu, bagi teman-teman yang juga ingin merubahnya. Silahkan lakukan langkah-langkah di bawah ini untuk merubah menu navigasi kedua.

1. Login ke dashboard Blogger.

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

3. Tambahkan kode CSS berikut sebelum tag ]]></b:skin>.

.navbar-nav li:hover > ul.dropdown-menu { display: block; } .dropdown-submenu { position:relative; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-top:-6px; } /* rotate caret on hover */ .dropdown-menu > li > a:hover:after { text-decoration: underline; transform: rotate(-90deg); } .nav .navbar .navbar-expand-lg .icon-home { margin-left: 2px; } .judul-menu-kedua { font-size: 20px; }

4. Kemudian cari kode yang sama persis seperti di bawah ini.

<!-- Menu Navigasi Kedua --> <div class='container'> <ul class='nav nav-tabs navbar bg-primary bg-gradient'> <li class='nav-item'><a class='nav-link text-dark' href='https://www.sebardi.id'><i class='bi bi-house-door-fill'/> Home</a></li> <li class='nav-item'><a aria-expanded='false' class='nav-link dropdown-toggle text-dark' data-bs-toggle='dropdown' href='#' role='button'><i class='bi bi-window-fullscreen'/> Apps</a> <ul class='dropdown-menu'> <li class='nav-item'><a class='dropdown-item text-dark' href='https://www.sebardi.id/search/label/Edukasi'> Edukasi</a></li> <li><hr class='dropdown-divider'/></li> <li><a class='dropdown-item text-dark' href='https://www.sebardi.id/search/label/GIMP'> GIMP</a></li> <li><a class='dropdown-item text-dark' href='https://www.sebardi.id/search/label/inkscape'> Inkscape</a></li> <li><a class='dropdown-item text-dark' href='https://www.sebardi.id/search/label/Krita'> Krita</a></li> <li><hr class='dropdown-divider'/></li> <li><a class='dropdown-item text-dark' href='https://www.sebardi.id/search/label/LibreOffice'> Libre Office</a></li> <li><a class='dropdown-item text-dark' href='https://www.sebardi.id/search/label/OpenOffice'> Open Office</a></li> <li><a class='dropdown-item text-dark' href='https://www.sebardi.id/search/label/Ms.Office'> Microsoft Office</a></li> <li><hr class='dropdown-divider'/></li> <li><a class='dropdown-item text-dark' href='https://www.sebardi.id/search/label/ClipChamp'> Microsoft ClipChamp</a></li> <li><hr class='dropdown-divider'/></li> <li><a class='dropdown-item text-dark' href='https://www.sebardi.id/search/label/VirtualBox'> Virtual Box</a></li> <li><hr class='dropdown-divider'/></li> <li><a class='dropdown-item text-dark' href='https://www.sebardi.id/search/label/vscode'> Visual Studio Code</a></li> </ul> </li> <li class='nav-item'><a class='nav-link text-dark' href='https://www.sebardi.id/p/sitemap.html'><i class='bi bi-list-columns-reverse'/> Daftar Isi</a></li> <li class='nav-item'><a class='nav-link text-dark' href='https://www.sebardi.id/search/label/Duit'><i class='bi bi-currency-dollar'/> Duit</a></li> <li class='nav-item dropdown'><a aria-expanded='false' class='nav-link dropdown-toggle text-dark' data-bs-toggle='dropdown' href='#' role='button'><i class='bi bi-cloud-arrow-down-fill'/> Download</a> <ul class='dropdown-menu'> <li><a class='dropdown-item text-dark' href='https://www.sebardi.id/search/label/Free%20Template'><i class='bi bi-filetype-xml'/> Theme Blogger</a></li> <li><hr class='dropdown-divider'/></li> <li><a class='dropdown-item text-dark' href='https://www.sebardi.id/search/label/Sebardi'><i class='bi bi-filetype-xml'/> Theme Sebardi</a></li> </ul> </li> <li class='nav-item'><a class='nav-link text-dark' href='https://www.sebardi.id/search/label/Internet'><i class='bi bi-wifi'/> Internet</a></li> <li class='nav-item dropdown'><a aria-expanded='false' class='nav-link dropdown-toggle text-dark' data-bs-toggle='dropdown' href='#' role='button'><i class='bi bi-tencent-qq'/> OS</a> <ul class='dropdown-menu'> <li><a class='dropdown-item text-dark' href='https://www.sebardi.id/search/label/linux'> Linux</a></li> <li><a class='dropdown-item text-dark' href='https://www.sebardi.id/search/label/Linux%20Mint'> Mint</a></li> <li><a class='dropdown-item text-dark' href='https://www.sebardi.id/search/label/ubuntu'> Ubuntu</a></li> <li><hr class='dropdown-divider'/></li> <li class='nav-item'><a class='nav-link text-dark' href='https://www.sebardi.id/search/label/windows'> Windows</a></li> </ul> </li> <li class='nav-item'><a class='nav-link text-dark' href='https://www.sebardi.id/search/label/opini'><i class='bi bi-chat-dots-fill'/> Opini</a></li> <li class='nav-item'><a class='nav-link text-dark' href='https://www.sebardi.id/search/label/Printer'><i class='bi bi-printer-fill'/> Printer</a></li> <li class='nav-item dropdown'><a aria-expanded='false' class='nav-link dropdown-toggle text-dark' data-bs-toggle='dropdown' href='#' role='button'><i class='bi bi-code'/> Web Desain</a> <ul class='dropdown-menu'> <li><a class='dropdown-item text-dark' href='https://www.sebardi.id/search/label/Blogger'> Blogger</a></li> <li><a class='dropdown-item text-dark' href='https://www.sebardi.id/search/label/Bootstrap'> Bootstrap</a></li> <li><a class='dropdown-item text-dark' href='https://www.sebardi.id/search/label/Halfmoon'> Halfmoon</a></li> <li><a class='dropdown-item text-dark' href='https://www.sebardi.id/search/label/Wagtail'> Wagtail</a></li> </ul> </li> </ul> </div> <!-- Menu Navigasi Kedua -->

5. Ganti kode di atas dengan kode navbar di bawah ini.

<div class='container'> <nav aria-label='Third navbar example' class='navbar navbar-expand-lg bg-primary bg-gradient py-0'> <a class='navbar-brand ms-2' href='https://sebardi.id'><i class='bi bi-house-door-fill'/> Home</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 judul-menu-kedua'> <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'><i class='bi bi-window-fullscreen'/> Apps</a> <ul aria-labelledby='navbarDropdownMenuLink' class='dropdown-menu bg-primary'> <li class='dropdown-submenu'><a class='dropdown-item dropdown-toggle' href='#'> Edukasi</a> <ul class='dropdown-menu bg-primary'> <li><a class='dropdown-item' href='https://www.sebardi.id/search/label/GIMP'> GCompris</a></li> </ul> </li> <li class='dropdown-submenu'><a class='dropdown-item dropdown-toggle' href='#'> Grafis</a> <ul class='dropdown-menu bg-primary'> <li><a class='dropdown-item' href='https://www.sebardi.id/search/label/GIMP'> GIMP</a></li> <li><a class='dropdown-item' href='https://www.sebardi.id/search/label/inkscape'> Inkscape</a></li> <li><a class='dropdown-item' href='https://www.sebardi.id/search/label/Krita'> Krita</a></li> </ul> </li> <li class='dropdown-submenu'><a class='dropdown-item dropdown-toggle' href='#'> Office</a> <ul class='dropdown-menu bg-primary'> <li><a class='dropdown-item' href='https://www.sebardi.id/search/label/LibreOffice'> Libre Office</a></li> <li><a class='dropdown-item' href='https://www.sebardi.id/search/label/Ms.Office'> Microsoft Office</a></li> <li><a class='dropdown-item' href='https://www.sebardi.id/search/label/OpenOffice'> Open Office</a></li> </ul> </li> </ul> </li> <li class='nav-item'><a class='nav-link text-black' href='https://www.sebardi.id/p/sitemap.html'><i class='bi bi-list-columns-reverse'/> Daftar Isi</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'><i class='bi bi-cloud-arrow-down-fill'/> Download</a> <ul aria-labelledby='navbarDropdownMenuLink' class='dropdown-menu bg-primary'> <li class='dropdown-submenu'><a class='dropdown-item' href='https://www.sebardi.id/search/label/Free%20Template'> Theme Blogger</a></li> <li class='dropdown-submenu'><a class='dropdown-item' href='https://www.sebardi.id/search/label/Sebardi'> Theme Sebardi</a></li> </ul> </li> <li class='nav-item'><a class='nav-link text-black' href='https://www.sebardi.id/search/label/Internet'><i class='bi bi-wifi'/> Internet</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'><i class='bi bi-tencent-qq'/> OS</a> <ul aria-labelledby='navbarDropdownMenuLink' class='dropdown-menu bg-primary'> <li class='dropdown-submenu'><a class='dropdown-item dropdown-toggle' href='#'> GNU/Linux</a> <ul class='dropdown-menu bg-primary'> <li><a class='dropdown-item' href='https://www.sebardi.id/search/label/Linux%20Mint'> Linux Mint</a></li> <li><a class='dropdown-item' href='https://www.sebardi.id/search/label/ubuntu'> Ubuntu</a></li> </ul> </li> <li class='dropdown-submenu'><a class='dropdown-item' href='https://www.sebardi.id/search/label/windows'> Windows</a></li> </ul> </li> <li class='nav-item'><a class='nav-link text-black' href='https://www.sebardi.id/search/label/opini'><i class='bi bi-chat-dots-fill'/> Opini</a></li> <li class='nav-item'><a class='nav-link text-black' href='https://www.sebardi.id/search/label/Printer'><i class='bi bi-printer-fill'/> Printer</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'><i class='bi bi-code'/> Web Desain</a> <ul aria-labelledby='navbarDropdownMenuLink' class='dropdown-menu bg-primary'> <li class='dropdown-submenu'><a class='dropdown-item' href='https://www.sebardi.id/search/label/Blogger'> Blogger</a></li> <li class='dropdown-submenu'><a class='dropdown-item' href='https://www.sebardi.id/search/label/Bootstrap'> Bootstrap</a></li> <li class='dropdown-submenu'><a class='dropdown-item' href='https://www.sebardi.id/search/label/Halfmoon'> Halfmoon</a></li> <li class='dropdown-submenu'><a class='dropdown-item' href='https://www.sebardi.id/search/label/Wagtail'> Wagtail</a></li> </ul> </li> </ul> </div> </nav> </div>

6. Klik icon "Save" untuk menyimpan perubahan template.

7. Selesai.

Penutup

Menu navigasi kedua yang saya gunakan ini mirip dengan navigasi yang berada di atasnya. Entah mengapa saya lebih suka dengan tampilan seperti ini. Apalagi jika dibandingkan dengan menu navigasi sebelumnya. Namun karena ada kesamaan dengan menu navigasi di atasnya ini harus dirubah juga.

Untuk itu, mudah-mudahan menu navigasi pertama yang paling atas juga bisa dimodifikasi. Tentu saja masih tetap dengan bantuan Bootstrap. Karena dengan framework yang satu ini jadi lebih mudah. Akhir kata, sekian catatan perubahan yang saya lakukan pada theme Sebardi Blog.

Mohon dimaklumi.

Baca Juga