Cara Membuat Search Result di Blog

MurliCyber    12/30/2014    Blogger , Javascript , Tutorial    Comment   

Yeay, membuat tempat pencarian di blog tentu banyak sekali manfaat nya, selain memudah kan pengunjung untuk mencari artikel di blog tersebut, juga untuk membuat blog tersebut lebih visitor friendly, membuat search yang kali ini saya share adalah sama seperti tombol search biasa tapi ini sudah saya tambahin search resultnya jadi ketika di enter tidak muncul halaman baru seperti biasa nya, tapi muncul hasil search result kita

Gambar di atas, search result nya berbeda dari pada yang saya share sekarang, search result di atas pencarian nya akan berfungsi hanya mencari kata apa yang kita ketik di search tersebut, contoh nya saya cari "cara" jadi yang akan muncul semua kata "cara" tersebut di search result nya, tentu nya beda sama yang punya saya, tapi hampir sama kok

punya saya cuma udah di kembangin dikit

Css search basicnya seperti ini

.search-form{margin-bottom:8px;position:relative;}
.search-form input{border:1px solid #ddd;padding:7px 10px;color:#999;outline:0;width:279px;background-color:#fff;}
.submit-button{background-color:#5cb85c;border-color:rgba(0, 0, 0, 0);text-decoration:none;font-size:12px;outline:0;position:absolute;top:4px;right:1px;color:#fff;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;padding:3px 4px 2px;cursor:pointer;}
.submit-button:hover{background:#449d44;}

Lalu kita membuat kotak hasil search resulnya

#search-result {
background-color: #fff;
padding: 10px 15px 15px;
margin: 7px 0;
width: 340px;
position: absolute;
height: auto;
top: 100%;
left: -73px;
right: -17px;
z-index: 99;
display: none;
border: #222 solid 2px;
}
#search-result ol,#search-result li,#search-result h4{margin:0 0 0 0;padding:0 0 0 0;line-height:normal !important;}#search-result li{border-bottom:1px dotted #e2e2e2;width:100%;}#search-result li:last-child{border-bottom:none !important;}#search-result h4,#search-result strong{font-size:14px;display:block;margin:0 30px 5px 0 !important;padding-top:4px;}#search-result ol a{font-family:Arial,Geneva,sans-serif !important;font-size:11px;text-shadow:none;color:#333;font-weight:normal;display:inline;margin:0 0 0 0;padding:0 0 0 0;background:#fff !important;border-left:none !important;border-right:none !important;}#search-result ol a:hover{background:#fff !important;color:#0099cc !important;}#search-result ol a,#search-result .close:hover{background:#fff !important;color:#333 !important;}#search-result .close{background:#fff !important;display:block;position:absolute;font-size:40px;line-height:40px;top:0;right:0;color:#2EA9DA !important;border-left:none !important;border-right:none !important;text-shadow: none !important;}#search-result strong{color:#B75252}

Html searchnya

<form class='search-form' expr:action='data:blog.homepageUrl + &quot;search&quot;'>
<input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search your any keyword&quot;;}' onfocus='if (this.value == &quot;Search your any keyword&quot;) {this.value = &quot;&quot;}' type='text' value='Search your any keyword'/>
<button class='submit-button' type='submit'><i class='fa fa-search'/></button>
</form>

Untuk memunculkan hasil search resultnya, kita tambahkan javascript
letakkan di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
(function(a){var c=a(".search-form"),d=c.find(":text");c.append('<div id="search-result"></div>');var e=a("#search-result");c.on("submit",function(){var b=d.val();e.show().html("Loading...");a.ajax({url:"/feeds/posts/summary?alt=json-in-script&q="+b+"&max-results=9999",type:"get",dataType:"jsonp",success:function(a){a=a.feed.entry;var c,d="";if(void 0!==a){for(var d="<h4>Search results for keyword &quot;"+b+"&quot;</h4>",d=d+'<a class="close" href="/">&times;</a><ol>',g=0;g<a.length;g++){for(var f=0;f<
a[g].link.length;f++)"alternate"==a[g].link[f].rel&&(c=a[g].link[f].href);d+='<li><a href="'+c+'">'+a[g].title.$t+"</a></li>"}e.html(d+"</ol>")}else e.html('<a class="close" href="/">&times;</a><strong>No result!</strong>')},error:function(){e.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>')}});return!1});c.on("click",".close",function(){e.fadeOut();return!1})})(jQuery);
//]]>
</script>

Perhatikan keterangan di bawah untuk penjelasan javascipt di atas

.search-form

ini adalah id css dari kotak pencarian, id ini harus sama dengan nama css search nya

#search-result

id css dari kotak hasil pencarian, kode ini juga harus sama dengan nama css

Segitu aja untuk postingan kali ini, semoga bermanfaat
kalau kurang ngerti silahkan bertanya di kolom komentar.