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></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><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} ]]></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> 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;}.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()}); </body> dan janga lupa untuk membungkus dengan pembungkus JavaScript.Selanjutnya simpan.
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.
Tidak ada komentar:
Posting Komentar
Selamat datang Di Websiteaeria , kami sangat menghargai bagi yang mengunjungi Blog kami .