Cara Membuat Pencarian Dengan Desain Yang Cukup Bagus

Posted by Rifaiy On 0 komentar
Sebelumnya saya sudah pernah menyampaikan cara membuat pencarian sederhana pada blog, sekarang saya akan menjelaskan bagai mana membuat pencarian dengan adanya sedikit gambar. Baiklah langsung saja kita ke cara membuat dan memasangnya sebagai berikut:



  1. Pertama kamu harus masuk / login dulu ke blog kamu,
  2. Setelah masuk pilih Rancangan pada blog yang ingin kamu edit,
  3. Setelah ke rancangan kamu pilih Tambah Gadget,
  4. Setlah itu pilih HTML / Java Script, dan masukan / salin kode di bawah ini di kolom HTML/Javascript:

<form id="searchform" action="http://fakriy.blogspot.com/search" name="searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="Cari Artikel...." /> <input id="searchsubmit" value="SEARCH" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGS8hrmqXIoHV7oJi8vXyse7utHIaq3wH0nLErwJykZMyj1cHHgnOtHJxA7lZ1FFFz7QIkkQb5ayAfY2_RdHkfdwRnHE7eDl0hDSeI7BT-rSbICTLjNZaNq5Mzcupbl6ZMM9UOsm9lvkw/s320/green-button.png" align="top"/></form>

Penjelasan:
Tulisan yang sudah saya tandai denga warna Ungu adalah link blog saya, Kamu ganti dengan link blog kamu. Tulisan yang sudah saya tandai dengan warna Biru adalah tulisan yang akan muncul di kolom pencarian, kamu bisa ganti tulisan itu dengan tulisan sesuai keinginan kamu. Dan Tulisan yang sudah saya tandai dengan wanra Merah adalah Link gambar untuk tombol pencarian, kamu bisa ganti dengan link gambar pilihan kamu.

Contoh Aplikasinya sebagai berikut:



Atau kamu ingin agar tidak emggunakan gambar, saya punya untuk pencarian yang cukup sederhana tapi cukup menarik, karena dengan menggunakan warna2 dari scipt, ini dia kode scriptnya:

<form id="searchform" action="http://fakriy.blogspot.com/search" name="searchform" method="get">
<input id="search-box" name="q" size="20" type="text" style="background: #CA226B; border: 4px ridge #000066"/>
<input id="search-btn" value="Search" type="submit" style="background: #F433FF; border: 2px outset #ff0000; color: #ffffff; font-weight: bold;"/>
</form>

Penjelasan:
Yang sudah saya tandai dengan warna Ungu adalah Link blog saya, kamu bisa ganti dengan link blog kamu. Yang saya tandai dengan warna Pink adalah kode warna untuk background kolom pencarian, kamu  bisa menggnati dengan kode warna yang kamu suka, Yang sudah saya tandai denga warna Biru adalah kode warna untuk garis tepi dari kolom pencarian, kamu bisa mengganti kode ini. Yang suda saya tandai dengan warna Hijau adalah warna untuk background tompol pencarian, kamu bisa menggantinya. Yang sudah saya tandai dengan warna Merah adalah kode warna untuk garis tepi tombol pencarian, kamu bisa mengganti ini. Dan yang sudah saya tandai dengan warna Pink Kusam adalah kode  warna untuk teks pada tombol pencarian, kamu bisa menggantinya.

Contoh Aplikasinya sebagai berikut:


Sekian Dari Saya dan Semoha Bermanfaat...