You must enable Javascript in your browser to run or open this site.

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

39 comments

  1. keren sob ....
    firur search di blog emank sangat penting yaaaCh ... :)

    BalasHapus
  2. Waw keren abiz nih tutorialnya,ijin preaktek ya :D

    BalasHapus
  3. wah mantab ni sob ?
    kalau mengkombinasinya dengan ads search gmana sob ?

    BalasHapus
  4. To Shinobi : Penting sob, supaya pengunjung bisa mmencari postingan yang kita posting baik yang lalu maupun yang sesuai kita cari sob :)
    To Musa : boleh boleh sob :) thanks for coming :)
    To Sharing SEO : bisa sob diganti, ganti saja kode merah tersebut

    BalasHapus
  5. Wah keren nih sob :D langsung coba ah

    BalasHapus
  6. maksudnya diganti dengan adsearch tuh, tulisan merahnya diganti dengan kode HTML adsearchnya?ato gimana?
    terus kalo mo nambah search engine baru ato ngurangin, gimana lagi tuh caranya?

    BalasHapus
  7. To Dokter Gigi Gaul : saya rasa untuk penambahan search engine yang lain agak susah karna search enginenya harus memiliki search.html contoh seperti http://google.co.id/search begitu, bisa ditambahin tombolnya dengan menambahkannya sendiri. Seperti gambar diatas itu sebelah MSN itu.

    BalasHapus
  8. Wah mantab sangat infonya, bermanfaat banget.... :)

    BalasHapus
  9. To Anisayu : Thanks banget supportnya, memang berguna sob :D

    BalasHapus
  10. Jadi tambah ilmu lagi nih...makasih ya gan

    BalasHapus
  11. To Asdikin : Thanks ya om kunjungannya :) di coba saja om
    To Tautanpena : Thanks juga ya om kunjungannya :D

    BalasHapus
  12. wah, menarik sekali search nya :D
    kalo saya masih pake bawaan asli template, tapi search result nya pake cse dari google :D

    BalasHapus
  13. To Ladida : Mantap kang Ladida :D hahaha oke deh sip google

    BalasHapus
  14. pencarianny itu khusus d blog kita ap umum?

    BalasHapus
  15. To Cek info : Perncarian seperti google, yahoo, bing.com sob. Bukan blog, ini cuman masang wadah untuk search engine :)

    BalasHapus
  16. wewwww gileee ilmu baru neh...
    thanks brow atas sharingnya ane nti2 pasang deh xixixi

    BalasHapus
  17. info yang sangat menarik sob :)

    BalasHapus
  18. keren nih.. infonya,,, sob... mantab..

    BalasHapus
  19. To moenas : makasih banyak ya :) pasang ya sob :P
    To Dayz : Thanks sob ;)
    To AbduGreen : Thanks juga ya om :)

    BalasHapus
  20. xixixi pasangnya nanti sajah klo blog sayah sudah banyak postingannya sekarang masih semetet banget jiaaagghhhh...

    BalasHapus
  21. Very nice, i suggest Admin can set up a forum, so that we can talk and communicate.
    Nancy

    BalasHapus
  22. To moenas : oke bro hahahaha :D
    To Anonim : Thank you for coming :) okay i'll (just kidding) :)

    BalasHapus
  23. Mau nanya nie, hasil searchnya mengarah ke windows baru atau tetap di halaman blog kita..
    trims..

    BalasHapus
  24. To Rina AS : Halaman akan terganti dengan pencarian itu :)

    BalasHapus
  25. mending pke Custom Search dari google mas...

    contohnya bsa di liat di blog saya ( sudah diberi sentuhan CSS )

    BalasHapus
  26. rajin ke web script yg punya blognya yak...xixixixi

    BalasHapus
  27. To ane : silahkan sob :)
    To Mbah Qopet : Iya ya bagus juga punyana google :)
    To Beben koben : hehehe maacih kk :)

    BalasHapus
  28. wah keren ni sob, banyak belajar dari sini

    BalasHapus
  29. To Zona Download Gratis : thanks om, di blog ente juga bisa banyak koleksi software
    To binkbenk : tapi harus dengan link! :))

    BalasHapus
  30. Mak nyus Gan...
    Kunjungi balik ya :)

    BalasHapus
  31. yang bs ngelink hanya ke blog kita aja gmn caranya om?

    BalasHapus