Membuat Search Box Responsive di Blog

Membuat Search Box Responsive di Blog

Sudah beberapa hari saya tidak update artikel blog ini, karena saya sedang sibuk dengan kegiatan di sekolah. Dan pagi ini saya usahakan untuk tetap update. Ternyata cari ide untuk update artikel itu gak gampang, apalagi disaat pikiran lagi nggak karuan gini mikirin kegiatan sekolah.

Saya cuma bisa diam sambil memikirkan ide dan memperhatikan tampilan blog saya. Akhirnya muncul juga ide untuk memberikan trik membuat search box atau kotak pencarian seperti yang ada di blog ini.

Search box yang saya bagikan ini memiliki tampilan yang sederhana dan responsive. Selain itu search box ini juga dapat dipasang di segala tempat. Entah itu di sidebar, atas postingan (seperti blog ini), footer, dan lainnya. Jika Anda tertarik untuk memasang search box ini pada blog Anda silahkan copy kode-kodenya di bawah ini.

Cara Membuat Search Box Responsive di Blog

1. Letakkan kode CSS di bawah ini di atas kode ]]></b:skin> atau </style>

.search-why{margin:1px 10px 10px 0;width:100%;}
.search-why form{border:1px solid #ccc;font-size:14px}
.search-why form input{display:block!important;margin:0;border:0;padding:5px 0;outline:0;height:20px;line-height:20px;font-size:13px;border-radius:0!important}
.search-form{float:left;width:85%!important;text-indent:10px}
.search-button,.search-button:hover{float:right;width:15%!important;height:30px!important;padding:0!important;background:#1A7DB7;color:#fff;border:0!important;font-size:12px!important}

2. Selanjutnya silahkan salin kode HTML di bawah ini dan letakkan di mana Anda ingin menampilkannya.

<div class='search-why'>
<form action='/search?q='>
<input class='search-form' name='q' placeholder='Search here and hit enter' required='required' title='Cari Tulisan di Sini' type='text'/>
<button class='search-button' title='Search' type='submit'><i class='fa fa-search'/></button>
<span style='clear: both;display:block'/>
</form>
</div>

Sekarang kotak pencarian atau search box sudah muncul di blog Anda. Ikon search button pada search box ini menggunakan font awesome, jadi pastikan blog Anda sudah menggunakan font awesome.

Baca juga : Cara Memasang Font Awesome di Blog

Semoga bermanfaat.

Leave a Reply