Teknik membuat menu pencarian blogspot dan menu search engine

Bagaimana suasana hatimu hari ini, kalau lagi senang mari kita bergembira dan tersenyum dengan semangat. Kalau lagi sedih atau galau, jangan bikin status di Facebook ya ( nyindir banget ya sob ). Maaf ya kalau agak sedikit nyindir. Menurut ane sih, kalau lagi galau atau sedih sebaiknya curhat sama sahabat atau teman dekat, jangan dibikin update status. Semua orang kan jadi tahu kegalauanmu. Bukannya nggak boleh, di khawatirkan ada pihak-pihak yang memanfaatkan kegalauanmu itu lho sob yang berbahaya.

Ok kali ini akan membahas tips & trick lagi sob yaitu membuat menu search blogspot dan menu search engine. Sebenarnya sudah banyak yang membahas masalah ini, tapi kebanyakan hasil dari copy paste bukan hasil analisa dan pencarian sendiri. Ilmu dasar yang harus sobat miliki adalah pengetahuan tag html yaitu tag <form method="get | post" action="url">...</form> ditambah ilmu pencurian script yaitu view source [ browser mozilla dan internet explorer ] atau server:source [ Operamini ]

Berikut script yang berhasil ane curi sebagai bahan pembelajaran:
1. Mywapblog.com
<form id="search_form" method="get" action="http://pati.mywapblog.com/?search">
<input type="text" size="20" name="search" value=""/><input type="submit" value="search"/></form>

2. Blogspot
<form id="search" method="get" action="http://hp-yitno.blogspot.com/search?q">
<input type="text" size="20" name="q" value=""/><input type="submit" value="search"/></form>

3. Google mobile
<form class="s2czgq" id="homepage_query_box_form" action="http://www.google.co.id/m">
<input class="i12k9h" id="homepage_query_box_textbox" type="text" name="q" size="20"/><input class="x57jp" id="homepage_query_box_submit" type="submit" value="search"/></form>
Versi dekstop menggunakan action="http://www.google.co.id/search"

4. Yahoo
<form id="search" method="get" action="http://search.yahoo.com/search?p">
<input type="text" size="20" name="p" value=""/><input type="submit" value="search"/></form>

Kalau mau memanipulasi supaya lebih sederhana, attribute action dan name harus diperhatikan. Karena keduanya juga mempengaruhi script bekerja apa tidak. Setiap search engine memiliki pengkodean sendiri.

kita ambil contoh script google, kita bisa sederhanakan seperti ini:

<form method="get" action="http://www.google.com/search">
<input type="text" size="20" name="q" value=""/><input type="submit" value="search"/></form>

Yang terpenting action="http://www.google.com/search" dan name="q" wajib diikutsertakan. Untuk id=search hanya sebuah perintah yang dikontrol oleh css (cascading style sheet)
Untuk kode name="..." setiap search engine berbeda. Silahkan sobat cari dengan menggunakan metode pencurian script yang ane ajarkan. Kalau nggak mau repot, ane ada beberapa yang sudah ketemu.

# Google dan Blogspot menggunakan name="q"
# Yahoo menggunakan name="p" tapi bisa juga dengan name="q"
# Mywapblog menggunakan name="search"

Seperti di awal, script diatas berbasis pencarian web. Untuk pencarian gambar dan location, ada beberapa script tambahan lagi. Itupun hanya versi mobile yang dapat ane lihat. Untuk versi dekstop, ane nggak bisa melihatnya karena diproteksi oleh pihak google sendiri. Script tambahan itu adalah:

# untuk action menggunakan action="http://www.google.co.id/m/search"
# untuk gambar, tambahkan <input type="hidden" name="site" value="images"/>
# untuk location, tambahkan <input type="hidden" name="site" value="local"/>

Untuk lebih jelasnya seperti ini ( contoh pencarian gambar):

<form method="get" action="http://www.google.co.id/m/search"><input type="hidden" name="site" value="images"/><input type="text" name="q" size="20" value=""/><input type="submit" value="search"/></form>

Hasil script pencarian web:

Hasil script pencarian gambar:

Hasil script pencarian di Blog HP Yitno:

Hasil script pencarian yahoo:

Untuk value sengaja ane isi dengan hp yitno, iframe dan naruto. Supaya sobat bisa mencoba script itu bekerja apa tidak.
Kesimpulannya:
- Permainannya terletak pada action, name dan input type



Sumber :  http://hp-yitno.blogspot.com/2012/03/teknik-membuat-menu-pencarian-blogspot.html