Cara Membuat Kotak Pencarian ( Search ) di Blog Dengan Pilihan Berbagai Model

Salam Sahabat.

Mungkin semua orang yang mengenal internet sudah tahu apa itu kotak pencarian ( search ). Karena semua web atau blog pasti menyediakan layanan ini, nah bagi sahabat blogger kebanyakan mungkin sudah tahu Cara membuat kotak pencarian ( search ) mungkin posting ini sudah tidak berlaku, Akan tetapi mudah-mudahan postingan ini bisa bermanfaat bagi para blogger yang belum mengetahui Cara membuat Cara Membuat Kotak Pencarian ( Search ) di Blog Dengan Pilihan Berbagai Model.

Dalam Membuat kotak pencarian dilakukan dengan menambahkan gadget pada blog, bisa dilakukan dengan clangkah-langkah berikut:

• login ke akun blogger anda.
• klik pada "Tata Letak"
• dan tambahkan gadget.

Untuk memasang kotak pencarian yang standar dari blog anda bisa pilih "kotak penelusuran" seperti gambar dibawah ini:

Jika sudah klik simpan dan kotak pencarian ( search ) anda akan tampil seperti ini:

    CARI DI BLOG INI

hmmmm kayanya standar sekali ya, hehehe...
pengen punya kotak pencarian ( search ) dengan model yang lain!! silahkan anda tambahkan gadget tapi kali ini kita menggunakan pilihan HTML/JavaScript seperti gambar dibawah:

Kemudian masukan salah satu model pilihan kode Kotak pencarian dibawah ini,,
model 1.

kode:

<form action="/search" id="searchthis" method="get" style="display: inline;"> <input id="search-box" name="q" size="25" type="text" value="Search" /> <input id="search-btn" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPlaQo8vrMasENWiMvaw0H5clBAdpYrx8ZtVWJwK5M9pdVePBWk5T7PbUmN670BCntKPXSzYGdbuI7XcluVK1r6Ju68XlvQQqbWk6ijGs_5mPZyqu90cbm1ZWCp17XSspWE7yftaF7LqA/s320/search-small.jpg" style="margin-left: 5px; margin: 3px 0 0 5px;" type="image" value="Search" /></form>


model 2:

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


model 3

Kode

<form action="/search" id="searchThis" method="get" style="display: inline;"> <input id="searchBox" name="q" onclick="this.value=''" style="background-color: black; color: white; font-size: 14px; height: 25px; width: 150px;" type="text" value="Ketik di sini..." /><input id="searchButton" style="background-color: white; border-color: #000000; color: black;" type="submit" value="Cari!" /></form>


model 4

kode:

<form action="/search" id="searchThis" method="get" style="display: inline;"> <input id="searchBox" name="q" onclick="this.value=''" style="background-color: blue; color: white; font-size: 14px; height: 25px; width: 150px;" type="text" value="Search..." /><input id="searchButton" style="background-color: white; border-color: #5943ff; color: black;" type="submit" value="Go!" /></form>


Sebenarnya ada lebih banyak lagi pilihan modelnya, tapi hanya segitu yang bisa saya berikan tinggal bagaimana anda memodifikasi kode-kode tersebut sesuai keinginan anda.


Semoga bermanfaat.