Menggunakan search bar Bootstrap 4 pada template Blogger

Pada posting sebelumnya kita telah membahas bagaimana menggunakan Bootstrap pada template Blogger, dan bagaimana menggunakan navbar dari Bootstrap pada template Blogger. Disini akan kita lanjutkan bagaimana menggunakan search bar, yang sebetulnya sewaktu menggunakan navbar pada bagian posting tersebut sudah terdapat search bar dari Bootstrap, namun disitu belum dapat berfungsi untuk melakukan pencarian. Oleh karena itu perlu melakukan perubahan tag elemen untuk disesuaikan dengan Blogger agar bisa berfungsi untuk melakukan pencarian.

Berikut ini adalah kodenya:

<a class="btn btn-outline-transparent text-secondary" style="box-shadow:none;" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    <i class="bi bi-search"></i>
</a>
<div class="collapse" id="collapseExample">
    <form class="form-inline my-2 my-lg-0" expr:action='data:blog.searchUrl'>
        <b:attr cond='not data:view.isPreview' name='target' value='_top'/>
        <input class="form-control-sm mr-sm-2" type="search" placeholder="Pencarian" aria-label="Search" expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q'/>
        <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit" expr:value='data:messages.search'>Cari</button>
    </form>
</div>

Penempatan tag <form> ini diletakkan setelah <ul>, dan form untuk search bar ini diletakkan didalama komponen Collapse dengan mengendalikannya menggunakan tautan dari icon pencarian, sehingga form ini bisa ditampilkann dan disembunyikan lagi. Apabila dibagi kodenya menjadi seperti ini:

Berikut ini kode form search bar:

<div class="collapse" id="collapseExample">
    <form class="form-inline my-2 my-lg-0" expr:action='data:blog.searchUrl'>
        <b:attr cond='not data:view.isPreview' name='target' value='_top'/>
        <input class="form-control-sm mr-sm-2" type="search" placeholder="Pencarian" aria-label="Search" expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q'/>
        <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit" expr:value='data:messages.search'>Cari</button>
    </form>
</div>

Berikut ini kode tautan menggunakan icon pencarian dan menggunakan collapse

<a class="btn btn-outline-transparent text-secondary" style="box-shadow:none;" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    <i class="bi bi-search"></i>
</a>

Sebagai referensi kita bisa lihat dokumentasi Supported content untuk memahami bagian search pada Navbar Bootstrap, Collapse dan juga Icons.