Memasang Kotak Pencarian Berwarna pada Blog

Cara Memasang Kotak Pencarian pada Blog – Kotak pencarian, siapa yang tidak tahu? Mulai dari kotak pencarian (atau kotak search) Google, kotak search pada kontak ponsel, dan kotak pencarian pada blog. Semuanya memiliki fungsi yang sama, yaitu untuk mencari suatu data berdasarkan kata yang diketikkan. Nah, kali ini kita akan memfokuskan diri pada kotak pencarian pada blog, terutama cara memasang kotak search tersebut di blog. Dan pada postingan blog ini, saya akan memberikan script untuk membuat kotak search blog Anda lebih unik, dan mencolok.

Kita mulai dengan kotak pencarian sederhana berikut ini. Perhatikan script dibawah ini :

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text"/>
<input id="search-btn" value="Search" type="submit"/>
</form>

Nantinya, setelah Anda pasangkan pada blog Anda (melalui Tambah Gadget -> HTML Javascript), kotak search / pencarian yang muncul akan sama persis dengan kotak pencarian bawaan Blogger. Ganti angka 25 untuk merubah ukuran kotak pencarian, dan ganti kata Search menjadi untuk mengganti kata pada tombol pencarian. Preview-nya seperti ini :

search

Kurang menarik nih! Oke, jika Anda adalah seorang blogger yang sangat ingin tampil berbeda, dan juga ingin agar kotak pencarian blog Anda lebih menarik, unik dan lain dari yang lain, silahkan lihat dan coba script dibawah ini. Script dibawah ini akan membuat kotak search memiliki warna sesuai dengan warna yang Anda inginkan.

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #FF6600; border: 1px solid #FF0000"/>
<input id="search-btn" value="Search" type="submit"/>
</form>

Script diatas jika dipasang pada blog Anda akan menampilkan kotak search seperti dibawah ini. Jika Anda ingin mengganti warna kotak serach tersebut, cukup ganti #FF6600 menjadi warna background kotak pencarian yang ingin Anda tampilkan, dan ganti #FF0000 menjadi warna garis yang Anda inginkan. Ganti juga kode 1px menjadi angka yang lebih besar (misalnya 2px) untuk mempertebal garis kotak pencarian. Jika Anda tidak hapal kode – kode HTML warna, silahkan lihat Pengubah Warna Menjadi Kode HTML. Preview :

search

Cara Memasang :

1.   Buka Blog Anda, lalu pilih blog yang akan Anda tambahkan kotak pencarian.

2.   Pada panel sebelah kiri, klik Tata Letak.

3.   Lalu, pilih Tambah Gadget -> HTML/Javascript

4.   Pastekan kode kotak pencarian / kotak search diatas, lalu berikan judul jika perlu.

5.   Terakhir, klik SIMPAN. Geser letak kotak pencarian pada menu Tata Letak untuk menempatkannya pada posisi yang menurut Anda sesuai. Lalu, klik SIMPAN.

Bagaimana? Selamat mencoba! Jangan lupa tinggalkan komentar!

Salam Blogger!