Assalamu'alaikun sahabat awblog.
Pada kesempatan kali ini saya akan share tentang cara menambahkan ajax search dengan efek slide out (menggunakan modal/kotak dialg) kalau belum tau modal silakan baca artikel berikut : Cara Menambahkan Modal/ Kotak Dialog pada Blog
Nah pada tutor kali ini sebenarnya merupakan gabungan antara modal + ajax search. Untuk lebih jelasnya silakan lihat gambar berikut :
Sangat elok bukan, hehe..
Kelebihan dari ajax search adalah ketika seseoran mencari artikel dalam blog kita dia tidak perlu loading ulang. Namun juga harus konek dengan internet tentunya. Oke langsung saja ya gan cekidot tutorialnya :
1. Masuk ke Blogger > Template > Pilih Edit HTML pasti sudah mahir semua kan ya :D
2. Cari menggunakan search (ctrl+f) bagian <body> kemudian pastekan code HTML berikut :
<div class="arlina-search">
<div class="fixedinput">
<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='';" value="Search here..." type="search"/>
<button class="submit fa fa-search" type="submit" value=""></button>
</div>
<button class="fa fa-times" id="close" type="reset" value=""></button>
</form>
</div>
<div class="search-content">
<div class="search-result">
<span></span>
</div>
<div class="query-result">Load more</div>
</div>
</div>Wah kog ada nama arlinanya ? Ya disini saya tidak akan merubah karya milik aslinya. Toh elok juga namanya :)
3. Kalau ada html pasti ada CSSnya dong, silakan pastekan CSS berikut di bawah <style> atau di atas </style>
/* Ajax Search */
.sos-profil li.searchbutton{margin:0;display:inline-block;cursor:pointer;float:right;padding:0px 10px}
.sos-profil li.searchbutton.active {background:transparent;}
.sos-profil li.searchbutton:after{content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;position:relative}
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}
.arlina-search{position:fixed;overflow:auto;top:10%;left:20%;right:20%;bottom:10%;max-width:720px;margin:auto;background:rgba(255,255,255,1);color:rgba(0,0,0,.6);box-shadow:0 2px 7px rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:scale(1.1);-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}
.arlina-search.active{opacity:1;visibility:visible;margin:auto;transform:scale(1.0);}
.arlina-search .fixedinput{background:#f5f5f5;margin:0 auto 15px;padding:10px 0;border-bottom:1px solid #e9e9e9;}
.arlina-search .searchmein{width:90%;margin:auto;padding:10px 0;outline:none;display:block}
#search .input{background:rgba(255,255,255,1);width:80%;height:40px;margin:20px auto;padding:0 0 0 20px;max-width:1000px;border:1px solid #e9e9e9;border-radius:3px;transition:all .3s ease-out}
#search .input:active,#search .input:hover{background:rgba(255,255,255,1);border-color:#d9d9d9}
#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,.4);line-height:40px;letter-spacing:1px;transition:all .3s ease-out}
#search .input .submit{display:inline-block;float:right;cursor:pointer;width:14%;height:40.5px;padding:0;margin:0;border:0;outline:0;background:#ff675c;font-size:16px;color:rgba(255,255,255,1);text-align:center;line-height:40.5px;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,.8);}
#search .input .submit:focus,#search .input .submit:hover {background:#e4554b;color:rgba(255,255,255,1);}
#search #close{cursor:pointer;position:absolute;top:10px;right:10px;width:32px;height:32px;padding:0;margin:0;border:0;outline:0;border-radius:5px;font-weight:normal;font-family:fontawesome;background:transparent;color:rgba(0,0,0,.3);text-align:center;line-height:32px;transition:all .3s}
#search #close:hover {color:rgba(0,0,0,.6);}
.search-content{z-index:6;display:none;position:relative}
.arlina-search .search:focus {outline:none;}
.search-result{padding:20px;width:90%;margin:0 auto 15px}
.search-result .search-item{overflow:auto;padding:15px;border-bottom:1px solid #eee;}
.search-result .search-item:last-child{border-bottom:0}
.search-item img{width:60px;height:60px;float:left;border-radius:3px;background:#fdfdfd}
.search-item a{width:calc(100% - 80px);float:right;display:block;color:#333;text-decoration:none}
.search-item a:hover,.search-item:hover a{color:#ff675c;}
.query-result{display:none;cursor:pointer;background:#fff;color:#e4554b;padding:12px;margin:20px auto 40px;text-align:center;text-transform:uppercase;border-radius:5px;line-height:normal;font-size:85%;letter-spacing:1px;max-width:90px;border:1px solid #ff675c;transition:all .3s ease-out}
.query-result:hover{background:#ff675c;color:#fff;border-color:transparent}
.query-result a{text-decoration:none;color:#e4554b;}
.query-result:hover a,.query-result a:hover{color:#fff;}
.queryword{font-weight:700}Tag yang berwarna merah bergantung pada dimana nanti agan akan meletakkan icon searchnya.
4. Pastekan script berikut diatas </body>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(".searchbutton").on("click",function(){$(".arlina-search").addClass("active").find(".search").focus()});$(".arlina-search").on("click",function(){$(this).find(".search").focus()});$("#close").on("click",function(){$(".arlina-search").removeClass("active")})});
function cariblogarlina(){var e=$(".search").val(),t=$(".search-item").length+1;if(e.length>=1){$(".search-content").slideDown(),$(".search-filter").attr("data-query",e),$(".search-result span").slideDown().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){$(".query-result").slideUp(),doSearch(t,e)}})}else $(".search-content").slideUp()}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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi72GIJcINVHR3URwZ1qoXSi1SN5mM5yhujiykBBvEVSC_jGW-VjbdtvTLHEhfpxb33aqqY4yOHifL-Pz3D9RXLCJOuBcZ4BZMQrSV1QfHEajlPgP98aI9G8K-u3EulxyBRvn8LOf5zsIy6/w100-c-h100/no-image.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").slideUp(function(){$(".queryword").html("Show results for:<b>"+t+"</b>"),$(".query-result").slideDown()})}else $(".search-result span").slideDown().html("No result"),$(".query-result").slideUp()}$(".searchmein").submit(function(){return $(".search-item").remove(),cariblogarlina(),!1}),$(".close-search").click(function(){$(".search-content").slideUp()}),$(".query-result").click(function(){$(".query-result").slideUp(),cariblogarlina()});
//]]>
</script>5. Letakkan icon search berikut sesuai keinginan agan
<li class="searchbutton" title="Search this blog"></li>6. Langkah terakhir agar ajax search dan box searchnya muncul tambahkan jQuery library berikut :
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>7. Save template dan lihat hasilnya.
Sekian tutorial kali ini, selamat mencoba ya gan :)
Source : http://www.arlinadzgn.com