Cara Mengaktifkan Fungsi Search pada Menu Navigasi

Tutorial barusan menampilkan beragam menu navbar yang dibuat dengan Bootstrap. Silahkan coba praktekan menu yang disertai dengan kolom search. Pada contoh kali ini menggunakan baris kode model yang ketiga. Namun untuk warna background saya ganti dari "bg-dark" menjadi "bg-info". Kemudian setelah berhasil terpasang jangan lupa untuk mencoba fungsi search.

Dan apa yang saya alami ketika memasukan keyword ke dalam kolom pencarian? Setelah menekan tombol enter pada keyboard tidak mendapatkan hasil. Seolah-olah script yang kita pasang tidak berfungsi atau mungkin belum lengkap. Padahal script diambil dari sumber utama referensi yang terpercaya untuk dijadikan bahan rujukan.

Kembali saya mencari literatur yang membahas cara menggunakan bootstrap ini. 

Dan sejurus kemudian, permasalahan ini selesai dengan menambahkan sedikit baris kode saja. Berikut ini tangkapan layar yang menunjukan fungsi search berfungsi. Saya mencobanya dengan memasukan keyword "tes" kemudian website memproses dan menyodorkan hasilnya. Oh ya, adapun hasil yang ditunjukan berupa "No post matching the query" sebagaimana tampak pada gambar. Hal ini bukan merupakan kesalahan karena memang belum mempunyai artikel yang sudah diposting/dipublish.

Cara Mengaktifkan Fungsi Search pada Menu Navigasi

Agar kolom "Search" melakukan pencarian keyword ketika mendapatkan input dari user yang dilanjut dengan menekan tombol enter. Maka kita harus menambahkan fungsi "action" yang diikuti dengan nilai atau variabel yang ingin ditampilkan serta baris kode lainnya. Berikut ini cara mengaktifkan fungsi search selengkapnya.

1. Login ke dashboard Blogger dan edit HTML template Anda.

2. Perhatikan baris kode yang menghasilkan kolom pencarian pada menu navigasi ini:

<form> <input aria-label='Search' class='form-control' placeholder='Search' type='text'/> </form>

3. Tambahkan fungsi pencarian.

class='navbar-form navbar-right' expr:action='data:blog.homepageUrl + "search"' role='search'

4. Setelah kode ditambahkan, script pada nomor 1 di atas akan tampak seperti berikut:

<form class='navbar-form navbar-left' expr:action='data:blog.homepageUrl + "search"' role='search'> <div class='form-group'> <input aria-label='Search' class='form-control' name='q' placeholder='Search' type='text'/> </div> </form>

Penutup

Tutorial di atas masih menggunakan referensi yang menggunakan Bootstrap 5. Tapi jika ada kekeliruan didalamnya jangan sungkan untuk memberikan koreksi. Karena admin sendiri belajar membuat website dengan bootstrap ini secara otodidak. Sehingga ketidak tahuan kita bisa terisi dengan pengetahuan yang didapat dari orang lain. 

Semoga bermanfaat.

Baca Juga