Yang akan kami bagikan kali ini adalah Cara Membuat Formulir Pencarian Popup Dengan Quick Result seperti yang bisa anda temui di situs ini yakni dengan klik tombol Search pada bagian menu.
Sudah menemukannya ? Tertarik untuk membuatnya ?
Silahkan ikuti panduan selengkapnya
Pada Tutorial kali ini yakni tentang Membuat Popup Quick Search Results kita menggunakan tiga element penting yakni HTML sebagai frame utama, Css berfungsi sebagai stylingnya dan JavaScript sebagai eksekutor.
Sebelum memulai tutorial dibawah, pastikan template anda sudah terinstal jQuery dengan kode seperti ini
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
> Jika belum, instal terlebih dahulu dengan meletakkan kode diatas sebelum tag </head>
Kemudian, pastikan juga sudah terinstal FontAwesome karena disini kita menggunakan FontAwesome sebagai pembentuk icon.
Pelajari lebih lanjut mengenai Instalasi FontAwesome.
Setelah dipastikan kedua media diatas sudah terinstal, kita lanjutkan ke tutorial Membuat Popup Quick Search Results.
Pertama kita siapkan dulu sebuah DOM untuk search engine dan pembungkusnya seperti dibawah ini.
<div class='csystem-find'>
<div class='inputpoint'>
<form class='machine' 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='Search here...'/>
<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' id='scroll-hide'>
<div class='inner'>
<span></span>
</div>
</div>
<div class='query-result'>Load more</div>
</div>
</div>
Letakkan persis dibawah tag <body> pada template Blogger anda.
Selanjutnya kita buat Css Stylingnya seperti dibawah ini
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}
.csystem-find{position:fixed;overflow:autotop
:10%;left:20%;right:20%;bottom:10%;max-width:879px;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}
.csystem-find.active{opacity:1;visibility:visible;margin:auto;transform:scale(1.0);}
.csystem-find .inputpoint {background:#3cc091;margin:0 auto 15px;padding:10px 0;}
.csystem-find .machine {width:90%;margin:auto;padding:10px 0;outline:none;display:block}
#search .input{background:rgba(255,255,255,1);width:100%;height:40px;margin:20px auto;padding:0 0 0 20px;max-width:1000px;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:rgba(39,174,96,0.5);font-size:16px;color:rgba(255,255,255,1);text-align:center;line-height:40.5px;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:#3bbb8e;color:rgba(255,255,255,1);}
#search #close{cursor:pointer;position:absolutetop: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}
.csystem-find .search:focus {outline:none;}
.search-result{padding:0 20px;width:100%;margin:0 auto 15px}
.search-result .search-item{overflow:auto;padding:10px 0;border-bottom:1px solid #eee;}
.search-result .search-item:last-child{border-bottom:0}
.search-item img{width:100px;height:100px;float:left;background:#fdfdfd}
.search-item a{width:calc(100% - 120px);float:right;display:block;color:#333;text-decoration:none;padding:10px 0;font-size:24px;line-height:40px;}
.search-item a:hover,.search-item:hover a{color:#3cc091;}
.query-result{display:none;cursor:pointer;background:#fff;color:#3bbb8e;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 #3cc091;transition:all .3s ease-out}
.query-result:hover{background:#3cc091;color:#fff;border-color:transparent}
.query-result a{text-decoration:none;color:#3bbb8e;}
.query-result:hover a,.query-result a:hover{color:#fff;}
.queryword{font-weight:700}
Letakkan setelah kode diatas ]]></b:skin> atau diatas </style> untuk template modern.
Selanjutnya kita membutuhkan satu media pemanggil berupa button untuk menampilkan kotak pencarian dan pembungkusnya, kodenya seperti dibawah ini
<li class='searchbutton' title='Quick Search'></li>
Ini jika kita akan meletakkan tombol pemanggil berada di menu navigasi, sementara untuk penempatan yang lain silahkan kreasikan sendiri dengan tetap berfokus pada penggunaan class="searchbutton".
Tambahkan styling untuk buttonnya seperti ini
.menu li.searchbutton{margin:0;display:inline-block;cursor:pointer;padding:20px 15px}
.menu li.searchbutton.active {background:transparent;}
.menu li.searchbutton:after{content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:700;text-decoration:none;position:relative;color:#fff;}
Perhatikan pada bagian Class .menu pada css diatas, setiap template memiliki penamaan yang berbeda pada menunavigasi, silahkan sesuaikan dengan menu class pada template anda.
Terakhir disini kita harus mengeksekusi apa yang akan terjadi pada button dan kolom pencarian, yakni dengan memanfaatkan JavaScript sebagai eksekutornya dengan metode onclick function.
// Search button berfungsi mengeksekusi button dan kolol pencarian
$(function(){$(".searchbutton").on("click",function(){$(".csystem-find").addClass("active").find(".search").focus()});$(".csystem-find").on("click",function(){$(this).find(".search").focus()});$("#close").on("click",function(){$(".csystem-find").removeClass("active")})});
// Search Result mengeksekusi jika ada query yang di input pengguna
function findcsystem(){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="http://3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w100-h100-c/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()}$(".machine").submit(function(){return $(".search-item").remove(),findcsystem(),!1}),$(".close-search").click(function(){$(".search-content").slideUp()}),$(".query-result").click(function(){$(".query-result").slideUp(),findcsystem()});
Letakkan JavaScript diatas tag </body> dan janga lupa untuk membungkus dengan pembungkus JavaScript.
Selanjutnya simpan.
RESULT
Jika ada masalah yang mungkin timbul atau kode tidak berfungsi dengan baik, mungkin ada masalah pada penempatan JavaScript dan penggunaan Class yang keliru, silahkan ikuti panduannya dengan teliti.
Jika masalah terjadi pada JavaScript, ubah penempatannya.
