07 October 2015

Membuat Responsive Ajax Search Box di Blogger

Responsive Ajax Search Box and Result

Membuat Responsive Ajax Search Box pada Blogger - Pada kesempatan kali ini saya akan membagikan tutorial "Search Box/Result" yang unik dan menarik. Pada Search Box ini kita hanya menekan icon Search lalu muncul Kolom Pencarian, nah jika kita melakukan pencarian, blog tidak perlu melakukan loading ulang/pindah halaman, karena hasil pencarian yang kita lakukan akan langsung muncul dibawah search box.

Bukan hanya Unik dan Menarik, search box ini juga 100% Responsive dan juga di lengkapi dengan fitur scroll dan Load More, jika tombol load more di klik maka akan memunculkan hasil pencarian yang lebih banyak lagi.

Bagi sobat yang tertarik untuk menerapkannya pada blog silahkan ikuti tutorial dibawah ini :

1. Buka Blogger > Template > Edit HTML > Tambahkan kode HTML dibawah ini tepat dibawah <body> atau <body ...> biasanya terdapat kode sambungan jika tidak menemukan <body> cukup mencari dengan kode <body

<div class="live-search">
<form class="searchmein" id="search">
<div class="input">
<input class="search" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="search" value="Ketik kata kunci di sini..." />
<button class="submit fa fa-search" type="submit" value=""></button>
</div>
<button class="fa fa-times" id="close" type="reset" value=""></button>
</form>
<div class="search-content">
<div class="search-result">
</div>
<div class="more-result">
Load more</div>
</div>
</div>

Untuk memunculkan Icon Search tambahkan kode HTML dibawah ini di tempat yang sobat inginkan.

<li class="searchbutton" title="Cari artikel"></li>

2. Langkah Selanjutnya tambahkan kode CSS dibawah ini tepat di atas kode ]]></b:skin> atau </style>

/* CSS Custom Ajax Search */
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}
.live-search{position:fixed;overflow:auto;top:10%;left:20%;right:20%;bottom:10%;background:rgba(255,255,255,.99);box-shadow:0 2px 5px rgba(0,0,0,.15);opacity:0;visibility:hidden;transform:scale(1.1);margin:auto;max-width:720px;-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}
.live-search.active{opacity:1;visibility:visible;transform:scale(1.0);}
.live-search .searchmein{width:90%;margin:15px auto;padding:10px 0;outline:none;display:block}
#search .input{background:rgba(0,0,0,.01);width:95%;height:40px;margin:20px auto;padding:0 0 0 20px;max-width:1000px;box-shadow:0 0 0 1px rgba(0,0,0,.1);border-radius:3px;transition:all .3s ease-out}
#search .input:active,#search .input:hover{box-shadow:0 0 0 1px rgba(0,0,0,.2)}
#search .input .search{float:left;width:calc(100% - 140px);height:40px;padding:0;margin:0;border:0;outline:0;background:none;font-size:16px;color:rgba(0,0,0,.45);line-height:40px;letter-spacing:1px;transition:all .3s ease-out}
#search .input .submit{display:inline-block;float:right;cursor:pointer;width:14%;height:40px;padding:0;margin:0;border:0;outline:0;background:#30a8e6;font-size:16px;color:rgba(255,255,255,1);text-align:center;line-height:40px;border-radius:0 3px 3px 0;transition:all .3s ease-out}
#search .input .search:focus,#search .input .search:active, #search .input .search:hover{color:rgba(0,0,0,.85);}
#search .input .submit:focus,#search .input .submit:hover {background:#2c9bd5;}
#search #close{cursor:pointer;position:absolute;top:0;right:0;width:45px;height:45px;padding:0;margin:0;border:0;outline:0;font-weight:normal;font-family:fontawesome;background:transparent;color:rgba(0,0,0,.25);text-align:center;line-height:45px}
#search #close:hover {color:rgba(0,0,0,.6);}
.search-content{z-index:6;display:none;position:relative}
.live-search .search:focus {outline:none;}
.search-result{padding:15px;width:90%;margin:0 auto 15px}
.search-result .search-item{overflow:auto;padding:15px 0;border-bottom:1px solid rgba(0,0,0,.07)}
.search-item img{width:60px;height:60px;float:left;border-radius:4px}
.search-item a{width:calc(100% - 80px);float:right;display:block;text-decoration:none}
.search-item a:hover{color:#069;}
.more-result{display:none;cursor:pointer;background:#fff;color:#178dc8;padding:8px;margin:20px auto 40px;max-width:100px;font-size:75%;text-align:center;text-transform:uppercase;border-radius:3px;line-height:normal;letter-spacing:1px;border:1px solid #73bfe5;transition:all .3s ease-out}
li.searchbutton{margin:0;padding:0 20px;display:inline-block;cursor:pointer;float:right;}
li.searchbutton.active {background:transparent;}
li.searchbutton:after {content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;position:relative;font-size:16px;color:#222;}
.more-result:hover{background:#178dc8;color:#fff;border-color:transparent}
.more-result a{text-decoration:none;color:#fff;}
.more-result:hover a,.more-result a:hover{color:#fff;}
.queryword{font-weight:700}

3. dan Langkah Terakhir tambahkan kode Javascript dibawah ini tepat di atas kode </body>

<script type="text/javascript">
//<![CDATA[
var _0x4d59=["\x73\x63\x72\x65\x65\x6E\x20\x61\x6E\x64\x20\x28\x6D\x69\x6E\x2D\x77\x69\x64\x74\x68\x3A\x20\x36\x30\x65\x6D\x29","\x6D\x61\x74\x63\x68\x4D\x65\x64\x69\x61","\x6D\x61\x74\x63\x68\x65\x73","\x63\x6C\x69\x63\x6B","\x66\x6F\x63\x75\x73","\x2E\x73\x65\x61\x72\x63\x68","\x66\x69\x6E\x64","\x61\x63\x74\x69\x76\x65","\x61\x64\x64\x43\x6C\x61\x73\x73","\x2E\x6C\x69\x76\x65\x2D\x73\x65\x61\x72\x63\x68","\x6F\x6E","\x2E\x73\x65\x61\x72\x63\x68\x62\x75\x74\x74\x6F\x6E","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x23\x63\x6C\x6F\x73\x65"];var mql=window[_0x4d59[1]](_0x4d59[0]);if(mql[_0x4d59[2]]){$(function(){$(_0x4d59[11])[_0x4d59[10]](_0x4d59[3],function(){$(_0x4d59[9])[_0x4d59[8]](_0x4d59[7])[_0x4d59[6]](_0x4d59[5])[_0x4d59[4]]()});$(_0x4d59[9])[_0x4d59[10]](_0x4d59[3],function(){$(this)[_0x4d59[6]](_0x4d59[5])[_0x4d59[4]]()});$(_0x4d59[13])[_0x4d59[10]](_0x4d59[3],function(){$(_0x4d59[9])[_0x4d59[12]](_0x4d59[7])});});window[_0x4d59[14]]=function(){var _0xce82x2=document[_0x4d59[16]](_0x4d59[15]);if(_0xce82x2==null){window[_0x4d59[18]][_0x4d59[17]]=_0x4d59[19]};_0xce82x2[_0x4d59[20]](_0x4d59[17],_0x4d59[19]);_0xce82x2[_0x4d59[20]](_0x4d59[21],_0x4d59[22]);_0xce82x2[_0x4d59[23]]=_0x4d59[24];};};function findit(){var e=$(".search").val(),t=$(".search-item").length+1;if(e.length>=1){$(".search-content").show(),$(".search-filter").attr("data-query",e),$(".search-result span").show().html("Searching ...");var r="/feeds/posts/default?max-results=12&start-index="+t+"&alt=json&q="+e;$.ajax({type:"GET",url:r,async:!0,contentType:"application/json",dataType:"jsonp",success:function(t){$(".more-result").hide(),doSearch(t,e)}})}else $(".search-content").hide()}function doSearch(e,t){if(e.feed.entry){for(var r=0;r<e.feed.entry.length;r++){for(var n=0;n<e.feed.entry[r].link.length;n++)if("alternate"==e.feed.entry[r].link[n].rel){var a=e.feed.entry[r].link[n].href;break}try{var s=e.feed.entry[r].media$thumbnail.url}catch(i){var s="http://4.bp.blogspot.com/-XQARxtj3cwk/VhKQr6dmTBI/AAAAAAAADJc/Tww7zM8jllc/s1600/default.png"}var c=e.feed.entry[r].title.$t,h='<div class="search-item"><img src="'+s+'"/><a href="'+a+'" target="_blank">'+c+"</a></div>";$(".search-result").append(h)}$(".search-result span").hide(function(){$(".queryword").html("Show results for:<b>"+t+"</b>"),$(".more-result").show()})}else $(".search-result span").show().html("No result"),$(".more-result").hide()}$(".searchmein").submit(function(){return $(".search-item").remove(),findit(),!1}),$(".close-search").click(function(){$(".search-content").hide()}),$(".more-result").click(function(){$(".more-result").hide(),findit()});
//]]>
</script>

Simpan Template dan Lihat hasilnya...


Semoga Tutorial ini bermanfaat, Terimakasih...

Ajax Search Source : http://www.arlinadzgn.com/2015/08/invert-pro-responsive-blogger-template.html
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic