Cara Memasang Kotak Pencarian Berwarna pada Blog

Assalamualaikum Wr Wb. Pada kesempatan kali ini saya akan ngeshare ttg ilmu komputer , nah saya akan

ngasi tau gimana cara nya masang Kotak Pencarian pada Blog . Langsung disimak aja yaa .... 

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 :

  

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 :

  

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 Letakuntuk menempatkannya pada posisi yang menurut Anda sesuai. Lalu, klikSIMPAN.

Bagaimana? Selamat mencoba! Jangan lupa tinggalkan komentar!