Membuat Kotak Search Engine Multi-Search

Search Box, ya dimana ada konten disitu ada pencarian. Pernah saya mempostingkan tentang Search Box yang fungsinya sebagai media pencarian konten blog dengan kotak form input.

Situs-situs besar yang menggunakan konten/rssfeed seperti google, blogspot, yahoo membuat search engine-nya sendiri yang mencari konten didalamnya sesuai keyword. Sepertihalnya pada Blog ini yang juga menggunakan Kotak Pencari Konten/Search Box (tutorial memasangnya ada DISINI) untuk mencari postingan postingan yang lalu atau yang dicari pengunjung blog.

Nah, ini lain cerita ya? Bagaimana jika beberapa kotak pencari (Search Engine) termasuk Google pokoknya dimasukan kedalam blog kita. Search Engine ini dinamakan Multi-Search.
Bagaimana bentuknya? Lihat dibawah ini.


Nah, mayan kan? haha. Nah untuk pemasangannya bisa di letakan dimana saja karna Kotak Search ini berbentuk kode. Nah untuk masang di Sidebar bisa ikuti cara di bawah ini.

• Buka Blogger.com (mumpung fitur baru saya sekalian kasih gambar gambar barunya juga hehehe)

• Klik Layout pada tanda V

 • Klik Add a Gadget pada kolom kanan 

• Selanjutnya pilih yang Javascript/HTML

• Isi Kotak kosong tersebut dengan kode berikut ini

<style>

.input {

    text-shadow:0 0 2px #aaa;

    box-shadow:inset 0 0 3px #eee;

    background: #fff;

    padding:3px 6px;

    font-size:12px;

    font-family:comic sans ms;

    color:#000;

    border:1px solid #ccc;

    -moz-transition: all 0.6s;

    -webkit-transition: all 0.6s;

    -o-transition: all 0.6s;

    }

   

.input:hover {

    background: #eee;

    -moz-transition: all 0.6s;

    -webkit-transition: all 0.6s;

    -o-transition: all 0.6s;

    }

   

.input:focus {

    background: #fcffcc;

    }

</style>
<form style="margin-top:-12px;" name="jksearch" action="http://www.google.com/search" method="get" onSubmit="jksitesearch(this)">
<p><input id="hiddenquery" type="hidden" name="q" />
<input class="input" name="qfront" type="text" style="width: 200px" value="" onfocus="this.value='';"/> <input class="button" type="submit" value="Search Web" /><br />
<div style="font: bold 11px Verdana;">Google :<input name="se" type="radio" checked>  Yahoo :<input name="se" type="radio">  MSN :<input name="se" type="radio">
</div>
<script type="text/javascript">
var domainroot=""
var searchaction=[
"http://www.google.co.id/search",
"http://search.yahoo.com/search",
"http://search.msn.com/results.aspx"
]

var queryfieldname=["q","p","q"]
function switchaction(cur, index){
cur.form.action=searchaction[index]
document.getElementById("hiddenquery").name=queryfieldname[index]
}

function jksitesearch(curobj){
for (i=0; i< document.jksearch.se.length; i++){
if (document.jksearch.se[i].checked==true)
switchaction(document.jksearch.se[i], i)
}
document.getElementById("hiddenquery").value=""+domainroot+" "+curobj.qfront.value
}
</script>
</p>
</form>

Kode yang berwarna Abu abu diatas adalah kode CSS dimana sobat bisa mengubah tampilan dari searchbox itu, sedangkan kode Merah ada lebar input dan website search engine.

• Save Gadge.

Lihat hasilnya dan WAW~ hahaha :D Thanks ya untuk membaca dan menyimak kodenya hihi :D