Membuat Kotak Pencarian (Search Box) Responsive di Blog

Kotak Pencarian adalah kotak yang digunakan untuk mencari suatu post pada sebuah blog. Dengan adanya kotak ini, maka akan lebih memudahkan pengunjung untuk menelusuri isi blog / web kita.

Nah, pada postingan kali ini saya akan membagikan sebuah tutorial untuk membuat Kotak Pencarian atau Search Box pada Blog. Kotak Pencarian yang akan saya bagikan di sini sudah memiliki fitur Responsive, dan tampilan dari kotak nya pun bisa dibilang lumayan keren.

Silahkan lihat gambar dibawah, untuk melihat tampilan dari kotak pencarian yang akan kita buat nantinya.


Apakah sobat tertarik ? Jika sobat tertarik untuk membuatnya di Blog sobat, silahkan lihat cara membuatnya dibawah ini.

1. Masuk ke Blogger

2. Klik menu Template > Edit HTML


3. Lalu letakkan kode berikut ini tepat di atas kode </head> (Ctrl+F)

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

Catatan : Kode diatas adalah kode untuk menambahkan Font Awesome di Blog. Jika di blog sobat sudah terpasang font awesome, maka kode diatas tidak perlu lagi sobat pasang.

4. Selanjutnya, silahkan sobat cari lagi kode ]]></b:skin>. Jika sudah ketemu, copy dan paste kode berikut ini tepat diatasnya.

/* Search Box */
#search-box {position: relative;width: 100%;margin: 10px 0 0 0;margin-bottom:10px;}#search-form {height: 40px;border: 1px solid #999;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}#search-text {font-size: 14px;color: #ddd;border-width: 0;background: transparent;}#search-box input[type="text"]{width: 90%;padding: 11px 0 12px 1em;color: #333;outline: none;}#search-button {position: absolute;top: 0;right: 0;height: 42px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 42px;border-width: 0;background-color: #4d90fe;-webkit-border-radius: 0px 5px 5px 0px;-moz-border-radius: 0px 5px 5px 0px;border-radius: 0px 5px 5px 0px;cursor: pointer;}

5. Simpan Template. Lalu klik menu Tata Letak dan add gadget pada sidebar blog.


6. Pilih HTML/JavaScript. Setelah itu, silahkan sobat copy dan paste kode berikut ini didalamnya. Judulnya dikosongkan saja.

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Cari Di Sini...' type='text'/>
<button id='search-button' type='submit'><span><i class='fa fa-search'/></span></button>
</form>
</div>

7. Klik Simpan dan klik Simpan Setelan

8. Silahkan cek blog sobat


Demikianlah yang dapat saya bagikan pada kesempatan kali ini. Semoga postingan singkat ini dapat bermanfaat untuk sobat.