Membuat Search Box Dibawah Postingan

Selamat malam sobat yang berbahagia.Apa kabar semua?Semoga senantiasa sehat selalu ya,.. :D

ngomong-ngomong lebih dari dua bulan (mungkin) saya tidak update posting karena teknis jaringan sehingga blog saya ini terbengkalai dan banyak komentar numpuk(masih proses di publish)  begitupun spam-spam yang mengerogoti blog saya ini mulai saya bersihkan.

Mengenai tentang postingan ini,saya akan menjawab request miz tia karna dulu saya pernah ingat kalau dia ingin memasang Membuat Search Box Dibawah Postingan seperti pada blog saya ini.Sebernarnya caranya tidak berbeda dengan cara-cara lainya ketika kita memasang widget properti apapun dibawa posting ataupun diatas postingan.

Kenapa saya memilih memasang Search Box Dibawah Postingan?

Tujuanya ketika sobat budiman selesai membaca dan ingin mencari artikel yang terkait,sobat langsung bisa mengetikkan keyword yang sobat inginkan tanpa menggulir keatas sidebar :D .Yaa,bisa dikatakan Search Box uniklah..sederhana tapi simple.hehehe........

Untuk langkahnya sendiri saya akan masuk pada bagian inti,dimana kode yang menjadi perhatian saat kita memasang Search Box.Perhatikan kode dibawah ini
:
Kode 1

<data:post.body/>

Kode 2

 <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/AVvXsEj90cGeSlo6XQ8JLzyBRDykYWWP6RJVegdIA1NdpVFLej-Ma3SIq-oTKF_Sqg62HLnkWbI4laYur0bQ6ZmTd6XJJVpAz6IfGe0Y98pQCPX_6jg3is3CTk4NvrefbbCj95NdkH_CkgZDKPU/s1600/search_field.jpg) no-repeat;" /><input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkOLvXBNiQGh0PImFCNbxx61M7RzAJrrGYAOgRt9Tcp2D-Qjge-ZgmH_wVdr7hZVKnccKK1ALhOPpoEyAoUll5ZssEklx_JguOVzlqJgXgvKeKXb_oZCqHHLy7OhwdmxtLhPhGwJZvBUs/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="planktoon.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>

Kode 1

adalah kode yang menjadi patokan dimana kita akan memasang kode 2.Pada umumnya kode 1 ( <data:post.body/> ) ada lebih dari dua,jadi kita bisa memasang kode Search Box dibawah kode <data:post.body/>  yang ke-2 atau yang ke-3. 

Jangan lupa ganti URL yang saya blog tebal warna biru dengan URL blog sobat.Setelah itu save template,Jika berhasil maka hasilnya seperti pada blog saya ini.

SELAMAT MENCOBA

Tweet