Cara Membuat Pencarian Multi Search Box

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:

[1]


[2]


[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

http://pelajaran-blog.blogspot.com/2012/02/cara-membuat-pencarian-multi-search-box.html