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/AVvXsEgoiJtaoWE0Zna5ZOn38HcvzAVLKNKVq7MihyiOGO8TeINbsvJZ4h6CppcJaXG2llTKCz13KRWzxjugKUJveZBoSe1xU9uWNDRx8yatPxV2osmxrYEPM2Pj-qcLXcTrTfpPHlLb4saXG_U/s1600/search_field.jpg) no-repeat;" /><input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx1aodR9X1YIhGhvipRQvKRs5IfgwtMDSjWn24cUy5P9QfgrSdWQyehi2zmCM6FRJKvfPvv-P5mDpSTytJ7uUwuyX00q-EQvTmKG6i6b1t60csLmJhUVcdxH_OHHvZRNkTEoEMzHA7cD4/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
Tidak ada komentar:
Posting Komentar