Cool Social Media Sharing Touch Me Widget by Blogger Widgets

Home » , , » Kotak Pencarian sederhana

Kotak Pencarian sederhana

Bagaimanapun bagusnya tampilan Blog, belum lengkap rasanya bila disana tidak terdapat Kotak Pencarian seperti Google Search. Kotak Pencarian sendiri berfungsi untuk memudahkan pengunjung mencari artikel / sesuatu yang ada pada Blog kita.

Pada artikel ini akan dijelaskan cara membuat kotak pencarian sederhana pada blog. Mengapa dikatakan kotak pencarian sederhana ? Ya, sudah banyak master-master design web dan para master blog lain memodifikasi kotak pencarian ini, menambahkan background, gambar dan kreasi lainnya. Sementara kotak pencarian sederhana ini hanya berupa kotak sederhana dan sebuah tombol untuk eksekusi pencarian. Namun demikian, ada beberapa kelebihan yang tetap ditanamkan pada kotak pencarian sederhana ini, diantaranya :
  • Kotak Pencarian ini bisa ditempatkan dimana saja dengan mudah.
  • Onfocus dan Onblur Effect, dengan code ini kita bisa menempatkan text / tulisan didalam kotak pencarian, ketika pengunjung klik bagian dalam kotak pencarian text / tulisan tsb akan hilang menjadi form kosong, ketika pengunjung kembali klik bagian dari selain kotak pencarian tadi, maka text / tulisan akan muncul kembali dengan sendirinya.
  • Text / tulisan didalam kotak pencarian tsb bisa kita ganti sesuai dengan yang disukai, misalnya "searching something ..." atau "cari disini ...", dll.
Demo : 


Code :
<form style="display: inline;" method="get" id="searchThis" action="/search"><input type="text" value="Search This Blog...." size="20" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" name="q" id="searchBox"> <input type="submit" value="Search" id="searchButton"></form>
Catatan :
Untuk mengubah ukuran kotak pencarian, ganti nilai 20 warna merah diatas. ganti tulisan "Search" warna merah diatas dengan tulisan lain yang disukai.

Cara pemasangan :
  • Masuk ke Dashboard Blogger
  • Klik Design
  • Klik Add a Gadget
  • Tambahkan Html/Javascript
  • Paste kode diatas
  • Save
Itulah kotak pencarian sederhana untuk Blog kita. Semoga bermanfaat.

Ferry NurdiantoDitulis Oleh : Ferry Nurdianto

Artikel Kotak Pencarian sederhana, diterbitkan oleh Ferry Nurdianto pada hari 11 Februari 2011. Semoga artikel ini dapat menambah wawasan Anda. Oleh Admin, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, namun anda harus meletakkan link dibawah ini sebagai sumbernya.

3 komentar:

  1. Manta gan trims, infonya....

    BalasHapus
  2. Terima kasih banyak! ;-(
    Search engine saya yang lama gak tau kenapa mendadak gak bisa berfungsi (padahal bawaan dari blogger), dan saya udah keliaran ke sana kemari nyari jawaban, tapi belum ada yang pas. Alhamdulillah, saya nemu artikel Anda dan langsung saya coba, dan alhamdulillah langsung bisa ;-(

    BalasHapus