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 kemudian muncul Kolom Pencarian, nah jikalau kita melaksanakan pencarian, blog tidak perlu melaksanakan loading ulang/pindah halaman, sebab hasil pencarian yang kita lakukan akan eksklusif 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, jikalau tombol load more di klik maka akan memunculkan hasil pencarian yang lebih banyak lagi.
Bukan hanya Unik dan Menarik, search box ini juga 100% Responsive dan juga di lengkapi dengan fitur scroll dan Load More, jikalau tombol load more di klik maka akan memunculkan hasil pencarian yang lebih banyak lagi.
Bagi sahabat yang tertarik untuk menerapkannya pada blog silahkan ikuti tutorial dibawah ini :
1. Buka Blogger > Template > Edit HTML > Tambahkan instruksi HTML dibawah ini sempurna dibawah
1. Buka Blogger > Template > Edit HTML > Tambahkan instruksi HTML dibawah ini sempurna dibawah
<body> atau <body ...> biasanya terdapat instruksi sambungan jikalau tidak menemukan <body> cukup mencari dengan instruksi <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 instruksi HTML dibawah ini di daerah yang sahabat inginkan.
<li class="searchbutton" title="Membuat Responsive Ajax Search Box di Blogger"></li> 2. Langkah Selanjutnya tambahkan instruksi CSS dibawah ini sempurna di atas instruksi
]]></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 instruksi Javascript dibawah ini sempurna di atas instruksi
</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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy1qvG-a-BnKHoAphpxl4ZcSMvp9oanGDlFWxvrofg9r8axFhzelTyGIXosylHyV7H6ge3HwZoxdZjv0XAjLzIhEnK-EGhaj3CFMCjojJY-Bl0I9-HYbRlrtAPxmNhDy7dgNXG82PEBHry/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 : https://jalantikusgo.blogspot.com/search?q=invert-pro-responsive-blogger-templateSumber https://www.idblanter.com
