Cara Membuat Kotak Search Menarik di Blogspot

Posted by M. Toyib Hidayat

            Pak HaBe lagi giat-giatnya ngeluarin postingan nih sobat, maklum pengen cepet-cepet blog saya terkenal dan bisa bermanfaat buat orang banyak. Baru beberapa jam yang lalu saya posting Cara Membuat Tombol Share Lebih Menarik di Blogspot, dan sekarang postingan maut yang gak kalah penting kembali diluncurkan yaitu Cara Membuat Kotak Search Menarik di Blogspot.

            Berawal dari rasa bosen dengan tampilan “Kotak Search” atau kalo dalam bahasa mandarinnya “Kotak Pencarian” yang itu-itu aja. Pak HaBe mulai gerilya jalan-jalan bareng mbah google buat nyari tampilan kotak search yang lebih enak dipandang dan mempunyai fungsi maksimum. Dan setelah beberapa jam berlalu akhirnya ketemu juga yang menurut pak HaBe sangat sangat sangat enak dipandang dan saya rasa juga mempunyai fungsi lebih dan pastinya lain dari pada yang lain. Supaya sobat gak mati penasaran nih saya kasih skrinsutnya biar sobat langsung kepengen buat nyobak

Gimana?? Dari tampilannya aja menarik bukan??

Sekarang bagaimana cara membuatnya?? Gampang kok, ikuti aja apa yang pak HaBe tulis di bawah ini:

1.      Jelas sobat blogger harus LOGIN terlebih dahulu

2.      Masuk ke TATA LETAK trus tambahkan GADGET HTML/JAVASCRIPT

3.      Setelah selesai tinggal copy paste dah kode dibawah ini

<form name="jksearch" action="http://www.google.com/search" method="get" onsubmit="jksitesearch(this)" target="_blank"> <input id="hiddenquery" type="hidden" name="q" /> <input name="qfront" onfocus="if(this.value==this.defaultValue)this.value='';" value="Search on this site..." type="text" onblur="if(this.value=='')this.value=this.defaultValue;" style="width: 240px;border:none;padding:8px 10px; font:normal 11px arial;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi07q9rAJI6aYhQSw_STSllfOj19pPdHOyxB-_1k0poCQ0zEMeP_RNSVWwbABsuC55cbcFdRxWIxUC1iy7S8xh3ZfpzlK2m4TpMmaP9JYCjS6EzT_YTS5mFxLxrP40uME4gDd2UUc7PPE/s1600/search_field.jpg) no-repeat;" /><input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVrrm3OBntCuDXpcnEoaKCF9ZjsiWc2iSiD2R4qASBZ4AN76ZWcHco94Rz9sUG-935BDWF20Y1JPCRStqSPY5lVvg_kKJzRYexCD1h7IvaLPmVxsjJiU3rGZNh8JCl3fsQStzUZWmwakk/s1600/search_button.jpg" align="top" value="Search"/> <div style="font: normal 11px Arial;color:#666;padding:2px 0;"> <input name="se" type="radio" checked /> Google  <input name="se" type="radio" /> Yahoo <input name="se" type="radio" /> Msn </div> <script type="text/javascript"> // All-in-one Internal Site Search script- By JavaScriptKit.com (http://www.javascriptkit.com) // For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/ // This notice must stay intact for use //Enter domain of site to search. var domainroot="vudu-vudu.blogspot.com" var searchaction=[ //form action for the 3 search engines "http://www.google.com/search", "http://search.yahoo.com/search", "http://search.msn.com/results.aspx" ] var queryfieldname=["q","p","q"] //name of hidden query form for the 3 search engines 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++){ //loop through radio to see which is checked if (document.jksearch.se[i].checked==true) switchaction(document.jksearch.se[i], i) } document.getElementById("hiddenquery").value="site:"+domainroot+" "+curobj.qfront.value } </script> </form>

4.      STOP !!! Jangan di SAVE dulu !! Ganti tulisan WARNA MERAH yang ada pada kode di atas dengan alamat blog sobat. Jangan sampai lupa loh, nanti bisa masuk ke link search blog saya kalo gak diganti, hehe :D

5.      Kalau sudah yakin semua yang saya tulikan di atas sudah dikerjakan dengan baik, sekarang tinggal SAVE aja dan lihat lah hasilnya J

Dan itulah sedikit referensi Cara Membuat Kotak Search Menarik di Blogspot yang pastinya tampilannya lain dari yang lain dan mempunyai manfaat yang lebih. Dan sekarang waktu sudah menunjukan pukul 05.30 dini hari, sudah saatnya pak HaBe pamit, hehe. See you pada postingan selanjutnya. J