Showing posts with label Membuat Form Kotak Pencarian Show Hide Value. Show all posts
Showing posts with label Membuat Form Kotak Pencarian Show Hide Value. Show all posts

Wednesday, 29 February 2012

Cara Membuat Pencarian Multi Search Box (Kotak Pencarian Ganda)

Bismillah - Pernahkah sobat menemui sebuah kotak pencarian di blog namun bukan saja dihias dengan background agar lebih cantik tetapi juga kotak pencarian (search box) ini memiliki multi fungsi.
Kira-kira widget search box multi ini akan tampak seperti gambar dibawah ini:


Atau bentuk fisiknya sobat bisa lihat di SINI

Langkah Membuat Kotak Pencarian Multiple Manual

Pertama,pergi ke Dashboard lalu pilih Tata Letak / Rancangan / Design [1] lalu pilih Add a Gadget [2] kemudian pilihlah Html/Javascript [3],lihat gambar:


Pelajaran Blog - wow! luar biasa gan,emang pelajaran blog tiada duanya deh soal tips-tips ngeblog,semangat bro! thx
[1]


Cara Membuat Search Box Double Ganda atau Kotak Pencari di Blog
[2]


memasang search box dua pilihan keren
[3]


Dan letakkan kode berikut disana:
<script type="text/javascript">
<!--
function qsearch_onSubmit()
{
qs_enginename = document.getElementById('qsearch_select').value;
qs_keywords = document.getElementById('searchfield').value;
switch( qs_enginename )
{
case 'mrpujiajadeh':
window.open('http://pelajaran-blog.blogspot.com/search?q=' + qs_keywords, '_self', '');
return false;
case 'wikipedia':
window.open('http://en.wikipedia.org/wiki/Spezial:Search?search=' + qs_keywords, '_wikipedia', '');
return false;
case 'google':
window.open('http://www.google.com/search?q=' + qs_keywords, '_google', '');
return false;
case 'yahoo':
window.open('http://search.yahoo.com/search?p=' + qs_keywords, '_yahoo', '');
return false;
case 'msnlive':
window.open('http://search.live.com/results.aspx?q=' + qs_keywords, '_msnlive', '');
return false;
case 'altavista':
window.open('http://www.altavista.com/web/results?itag=ody&q=' + qs_keywords + '&kgs=0&kls=0', '_altavista', '');
return false;
case 'lycos':
window.open('http://search.lycos.com/?query=' + qs_keywords, '_lycos', '');
return false;
case 'odp':
window.open('http://search.dmoz.org/cgi-bin/search?search=' + qs_keywords, '_odp', '');
return false;
default:
if( (i = qsearch_findEngine(qs_enginename)) >= 0 )
{
window.open(qsearch_engines[i].url + qs_keywords, '_blank', '');
return false;
}
break;
}
return true;
}
//-->
</script>
<table border="1" cellspacing="1" width="300">
<tr>
<th><span style="float: left"><img src="http://1.bp.blogspot.com/_n7xseT2-HDU/Saz6WSR1ptI/AAAAAAAAANY/QA1vxRormlY/s200/Loggo-pelajaran-Blog.gif" width="16px" height="16px" alt="" />&nbsp;Search</span></th>
</tr>
<tr class="row1">
<td>
<form id="qsearch_form" method="post" action="/search" onsubmit="return qsearch_onSubmit();">
<input type="text" tabindex="6" name="keywords" id="searchfield" size="22" maxlength="40" title="Search for keywords" value="Search" onclick="if(this.value=='Search')this.value='';" onblur="if(this.value=='')this.value='Search';" />
<select id="qsearch_select" tabindex="8">
<optgroup label="Blog">
<option value="mrpujiajadeh" style="background-color: #EEEEEE;">Pelajaran Blog</option>
</optgroup>
<optgroup label="Search engines">
<option value="wikipedia" style="background-color: #FEF2D6;">Wikipedia</option>
<option value="google" style="background-color: #FEF2D6;">Google</option>
<option value="yahoo" style="background-color: #FEF2D6;">Yahoo</option>
<option value="msnlive" style="background-color: #FEF2D6;">MSNlive</option>
<option value="altavista" style="background-color: #FEF2D6;">Altavista</option>
<option value="lycos" style="background-color: #FEF2D6;">Lycos</option>
<option value="odp" style="background-color: #FEF2D6;">Open directory</option>
</optgroup>
</select>
<!-- &nbsp; -->
<input type="hidden" name="search_fields" value="all" />
<input type="submit" value="Cari" tabindex="8" />
</form>
</td>
</tr>
</table>


Kemudian simpan dan lihat hasilnya,sekarang sobat sudah memiliki kotak pencarian dengan menu dropdown sebagai multi pilihan,oy gan,kode yang bercetak tebal ubah aja sesuai dengan keinginan dan nama blog sobat ya.
Moga bermanfaat :D

Thursday, 24 June 2010

Auto Clear pada Mesin Pencari / Kotak Pencarian

Membuat Auto Clear pada Mesin Pencari: "Meskipun pernah saya singgung sebelumnya,tapi pada halaman ini kita akan membahas search engine dengan Auto Clear.Maksudnya,saat pengunjung,menggunakan search engine pada blog kita,hanya dengan memberi efek clik pada area text,maka text yang ada di area tersebut langsung hilang.Anda juga bisa memberikan kata pada text area,yang nantinya akan keluar setiap blog load.Contohnya,anda bisa melihat..

Lihat Posting Aslinya >>

Monday, 7 December 2009

Membuat Form Kotak Pencarian Dengan Show Hide Value / Auto Value


Belajar Menghias Kotak Mesin Pencari / Kotak Pencari pada Blog



Jika beberapa waktu lalu saya sempat memposting tentang bagaimana cara membuat form search engine/mesin pencari pada blog,giliran kali ini kita belajar menghiasnya.

Untuk fungsi dan keuntungan dari kotak pencarian ini,saya kira teman-teman sudah pada tahu ya ^^

Menghias mesin pencari bisa bermacam-macam,dari mengubah background /menambahkan image kotak mesin pencari maupun memaksimalkan fitur kotak pencarian tersebut.

Salah satunya yang akan saya bagi-bagi saat ini,adalah membuat form kotak pencarian dengan fitur show-hide value atau auto value.
Maksudnya?
Gimana ya njelasinnya? bingung juga si,xixixi..

Maksudnya,saat form diklik value/tulisan yang ada pada form pencarian akan hilang,dan sebaliknya jika yang diklik di luat form,tulisan pada form akan mucul secara otomatis alias nongol kembali.


And bisa lihat kotak pencarian pada blog ini,saat anda klik pada form,tulisan 'Cari Artikel Disini..' akan hilang,sebaliknya saat anda mengklik di luar form,tulisan 'Cari Artikel Disini..' akan muncul kembali.

Gimana? maksud khan?

Langkah Cara Membuat Kotak Mesin Pencari Show Hide Values



Yo wis,jika anda berminat membuat kotak pencarian seperti itu,ikuti langkah -langkah di bawah ini:

Pilihlah Dashboard,kemudian pergilah ke Tata Letak blog anda,selanjutnya pilih Add New Widget/Tambah Gadget.

cara membuat mesin pencari auto value.


Kemudian pilih HTML/Javascript.

membuat form search engine show hide.


Setelah itu letakkan code berikut:

<center><form id="searchform" action="http://pelajaran-blog.blogspot.com/search" name="q" method="get"><input id="s" onfocus="if (this.value == 'Cari artikel disini..') {this.value = '';}" value="Cari artikel disini.." name="q" onblur="if (this.value == '') {this.value = 'Cari artikel disini..';}" type="text"/><input id="searchsubmit" value="Search" type="submit"/></form></center>

Lalu Simpan dan lihat hasilnya.

Untuk tulisan :
  • Cari artikel disini..,gantilah sesuai keinginan anda misal;'Type your text here..' atau 'Cari Artikel..' dll,tapi ingat! dari tulisan ketiga-tiganya harus sama.
  • Sedangkan tulisan http://pelajaran-blog.blogspot.com,gantilah sesuai alamat blog anda.
Semoga berhasil dan mudah-mudahan bermanfaat.. Amin! Kawin! lha koq??

Baca Juga Yang Ini..

Monday, 9 February 2009

Membuat Auto Clear pada Mesin Pencari


Meskipun pernah saya singgung sebelumnya,tapi pada halaman ini kita akan membahas search engine dengan Auto Clear.

Maksudnya,saat pengunjung,menggunakan search engine pada blog kita,hanya dengan memberi efek clik pada area text,maka text yang ada di area tersebut langsung hilang.Anda juga bisa memberikan kata pada text area,yang nantinya akan keluar setiap blog load.


Contohnya,anda bisa melihat halaman ini,di sebelah kanan atas,saat kita fokus kedalam,secara otomatis text akan hilang.
Pada dasarnya ini hanya sebuah hiasan,tapi jika anda ingin mendapatkan kodenya,copy kode di bawah ini :

<form id="searchform"
action="http://pelajaran-blog.blogspot.com/search" name="fs"
method="get"> <input id="s" onfocus="this.value='';"
value="Cari artikel tentang.."
name="q" size="25" type="text"/> <input id="searchsubmit"
value="Search" type="submit"/>


Tulisan yang berwarna hijau,rubah sesuai keinginan anda dan ingat..
http://pelajaran-blog.blogspot.com/search,
Ganti dengan alamat blog anda,jangan lupa "/search" nya ya..penting :)

Sedangkan pada Cari artikel tentang..,gantilah sesuai keinginan.

Baca Juga Yang Ini..

Wednesday, 4 February 2009

Membuat Search Engine sendiri pada Blog


Ada cara praktis untuk menemukan artikel pada blog secara singkat.Bagi yang sudah tergabung dalam Google Adsense,pasti sudah tahu ya masalah ini.

Tapi bagi anda yang belum tergabung,tapi ingin menampilkan form pencari untuk blog anda sendiri,ada kode praktis yang ga ada salahnya anda coba.
Hasilnya nanti akan seperti di bawah ini :



Sedangkan kodenya,copy paste kode di bawah ini :

<form id="searchform"
action="http://pelajaran-blog.blogspot.com/search"
name="searchform" method="get">
<input id="s" value="" name="q"
type="text"> <input id="searchsubmit"
value="Search"type="submit"> </form>


Kode yang berwarna hijau;http://pelajaran-blog.blogspot.com/search,gantilah dengan halaman blog anda sendiri,tapi jangan lupa tambahin kode /search ya..

Sedangkan Value "Search"anda bisa ganti menjadi "Go" atau "Cari" atau yang lain.