Theme Blogger Bootstrap (4); Membuat Menu Navigasi Utama

Secara umum, blog ini sudah memberikan contoh penerapan menu navigasi. Utamanya menu navbar yang didapatkan dari dokumentasi resmi getbootstrap. Dari sana saya kemudian mengaplikasikannya sesuai dengan lingkungan blogger.

Hal ini bisa terlihat pada blog menu bootstrap yang saya pasang pada blogspot. Hanya saja mungkin masih ada yang ingin lebih simpel lagi daripada itu. Karena tutorial di atas belum disertai dengan tahapan lanjut secara runut.

Oleh karenanya, saya mulai kembali dari bahasan menu navigasi ini. Dan selanjutnya insya Allah ada penjelasan secara beruntun yang bisa dilakuan oleh pemula. Seperti halnya merubah warna background, warna teks atau menambahkan logo.

Dan hasil akhirnya nanti bisa seperti menu navigasi yang saya gunakan pada theme blog ini. Bahkan tidak cukup sampai di situ. Bagi teman-teman yang memiliki imajinasi lebih bisa menciptakan menu navigasi sesuai varian yang diinginkan.

Theme Blogger Bootstrap (4); Membuat Menu Navigasi Utama

Untuk membuat menu navigasi dengan Bootstrap sangatlah mudah. Jika hasil yang diinginkan hanya tampilan sederhana maka turorial di bawah ini sudah cukup. Namun jika menginginkan variasi mungkin perlu dibuatkan tutorial khusus. Mudah-mudahan artikel ke depan akan mengupas habis tentang hal tersebut.

Adapun pertemuan kali ini kita bahas yang paling mudah dahulu. Mudah-mudahan dengan memulai yang ringan seperti ini membuat kita tidak merasa berat menghadapi kode-kode. Langsung saja, berikut ini cara membuat menu navigasi utama pada theme blogger dengan bootstrap.

1. Login ke dashboard Blogger.

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

3. Pastikan menggunakan theme dasar sendiri yang sudah dipelajari kemarin.

4. Letakan baris kode ini di bawah tag <body>.

<div class='container'> <ul class='nav nav-tabs navbar-light bg-primary'> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com/'> Home</a></li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com/'> Android</a></li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com/'> Bootstrap</a></li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com/'> Daftar Isi</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'> Download</a> <ul class='dropdown-menu'> <li><a class='dropdown-item text-dark' href='https://templatesebardi.blogspot.com/'> Script Blogger</a></li> <li><a class='dropdown-item text-dark' href='https://templatesebardi.blogspot.com/'> E-book PDF</a></li> <li><hr class='dropdown-divider'/></li> <li><a class='dropdown-item text-dark' href='https://templatesebardi.blogspot.com/'>MP3</a></li> <li><a class='dropdown-item text-dark' href='https://templatesebardi.blogspot.com/'>Video</a></li> <li><hr class='dropdown-divider'/></li> <li><a class='dropdown-item text-dark' href='https://templatesebardi.blogspot.com/'>Theme ini</a></li> </ul> </li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com/'> Opini</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'> Linux</a> <ul class='dropdown-menu'> <li><a class='dropdown-item text-dark' href='https://templatesebardi.blogspot.com/'> Ubuntu</a></li> <li><a class='dropdown-item text-dark' href='https://templatesebardi.blogspot.com/'> Linux Mint</a></li> </ul> </li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com/'> Printer</a></li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com/'> Receh</a></li> <li class='nav-item'><a class='nav-link text-dark' href='https://templatesebardi.blogspot.com/'> Windows</a></li> </ul> </div>

5. Simpan template dengan menekan icon "Save" yang berada di pojok kanan atas. Icon "save" ini terlihat seperti gambar "disket". Sebuah media penyimpanan yang saya kenal sejak Windows 3.1.

6. Dan kode di atas pada nomor 4 akan menghasilkan tampilan seperti screenshot berikut ini.

7. Contoh penerapan pada theme blogger bisa download di sini.

Update 19 Mei 2023! Menu Bootstrap yang Digunakan oleh Sebardi Blog

Menu navigasi yang digunakan oleh Sebardi Blog kini menggunakan versi baru. Caranya adalah sebagai berikut sebagaimana dijelaskan pada catatan perubahan menu navigasi kedua.

1. Tambahkan kode CSS berikut.

.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; }

2. Ganti script untuk menu navigasi kedua diatas dengan kode di bawah ini atau di bawahnya lagi.

<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>

3. Tampian yang terlihat seperti di bawah. Submenu hanya keluar ketika diklik.

4. Awalnya saya menggunakan kode di atas kemudian ganti lagi dengan kode di bawah.

<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>

5. Menu navigasi yang ini tampilannnya seperti ini (otomatis keluar submenu).

6. Simpan template.

Kesimpulan

Menu navigasi utama pada contoh di atas masih sangat sederhana. Dan ini adalah cikal bakal menu navigasi yang juga saya gunakan pada theme blog ini. Namun kebetulan, mungkin tampilannya terlihat samar. Ini disebabkan penambahan dengan icon dari Bootstrap itu sendiri.

Siapa sangka kan itu icon bukan dari Font Awesome? Insya Allah nanti kita akan kupas habis juga tentang icon tersebut agar menu navbar terlihat lebih baik. Begitu juga dengan manipulasi warna background, warna text, penambahan logo dan lain-lain.

Selamat mencoba.

Theme Blogger Bootstrap (4); Membuat Menu Navigasi Utama

Theme Blogger Bootstrap (4); Membuat Menu Navigasi Utama

Update 19 Mei 2023! Menu Bootstrap yang Digunakan oleh Sebardi Blog

Kesimpulan

Tidak ada komentar:

Posting Komentar

Memuat...

Nama Domain Murah

Yusuf