Cara Membuat Live Search di Blogger

Kali ini saya akan membagikan fitur live search dari theme mStream . Akan tetapi script ini di encrypt jadi tidak dapat di edit kembali kecuali kalian…
Membuat Live Search di Blogger

Kali ini saya akan membagikan fitur live search dari theme mStream. Akan tetapi script ini di encrypt jadi tidak dapat di edit kembali kecuali kalian mahir dalam javascript.

Live search berguna untuk menampilkan post tertentu dengan cepat ketika pengunjung sedang mengetik di form pencarian, dan membantu pengunjung untuk mengunjungi post tersebut dengan cepat.

Berikut cara pasang nya. Seperti biasa pasang css di atas tag ]]></b:skin> pada template kalian.

.cari-isi,
.live-search-item {
  --postBg:#333;
  --postText: #fff;
}
.darkStyle .cari-isi,
.darkStyle .live-search-item {
  --postBg:#fff;
  --postText: #333;
}
.cari-isi{padding:.5rem 0;width:100%;box-sizing:border-box}.cari-isi *{box-sizing:border-box}.cari-isi form{position:relative}.cari-input{padding:1rem 4rem 1rem 1.25rem;width:100%;border-radius:7px;background-color:var(--postBg);color:var(--postText);outline:0;border:none}.cari-ikon{display:-moz-box;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;align-items:center;position:absolute;bottom:0;opacity:.5;right:1.25rem;top:-3px;visibility:visible;transition:.3s ease}.cari-input:focus~.cari-ikon{right:3rem;opacity:0;visibility:hidden}.cari-isi svg{height:1.5rem;width:1.5rem}.cari-isi circle,.cari-isi path{clip-rule:evenodd;fill:none;fill-rule:evenodd;stroke:var(--postText);stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:1.25px;transition:stroke .3s ease}.cari-reset{border:none;outline:0;background:0 0;cursor:pointer;font-size:inherit;position:absolute;opacity:0;padding:0;right:2rem;top:0;bottom:0;visibility:hidden;transition:.3s ease}.cari-reset svg{height:1.65rem;margin-right:0;vertical-align:-3px;width:1.65rem}.cari-reset .bulat{fill:red;stroke:none;stroke-width:0}.cari-reset .silang{stroke:#fff}.cari-input:focus~.cari-reset{right:1.25rem;opacity:1;visibility:visible}.live-search-item{position:fixed;z-index:9999;background-color:var(--postBg);color:var(--postText)}.live-search-item ul{padding:0;margin:0;list-style:none}.live-search-item li{padding:10px;border-bottom:1px solid var(--postText);overflow:hidden}.live-search-item li a{display:block}.live-search-thumb{margin-right:10px;float:left;width:40px;height:60px;overflow:hidden;padding-bottom:0;box-sizing:content-box;text-decoration:none}.live-search-item li img{max-width:100%;height:100%;object-fit:cover}.live-search-item li .over{overflow:hidden;float:right;width:calc(100% - (40px + 10px));box-sizing:content-box}.live-search-item li .autotitle{font-size:.95em;color:var(--postText);font-weight:500;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-search-item .live-meta{display:block;color:var(--postText);margin-bottom:2px;font-size:12px;overflow:hidden}
Jika template mempunyai fitur dark mode ganti bagian yang di tandai dengan nama class dark mode template kalian.

Kedua Pasang Javascript di atas tag </body> pada template kalian.

<script type='text/javascript'>/*<![CDATA[*/
  const _liveSearch = {
    filterLabel: "filter_label",
    sizeImage: "size_image",
    noImage: "no_image_url",
  };
  (function (e) {
    if ("function" != typeof e || "object" != typeof _liveSearch) return !1;
    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('F a=["","\\c\\f\\V\\b\\e\\n\\b\\h","\\G\\i\\e\\h\\c\\y\\c\\f\\c","\\G\\g\\c\\t\\b\\y\\f\\b\\e\\h\\i\\w\\y\\c\\d\\b\\q","\\z\\b\\d\\1O\\o\\v\\j\\n\\c\\j\\z\\T\\g\\c\\b\\j\\d\\N\\b\\i\\d","\\g\\b\\u\\d","\\r\\E","\\A\\o\\d\\d\\o\\q","\\U\\c\\n\\d\\w","\\i\\f\\f","\\g\\b\\j\\z\\d\\w","\\i\\g\\o\\f\\b\\f\\d","\\d\\e\\h\\z\\b\\d","\\k\\n\\c\\t\\s\\i\\g\\e\\f\\f\\x\\m\\g\\c\\t\\b\\y\\f\\b\\e\\h\\i\\w\\y\\c\\d\\b\\q\\m\\l\\k\\p\\n\\c\\t\\l","\\w\\d\\q\\g","\\e\\r\\r\\b\\j\\n","\\A\\o\\n\\B","\\h\\b\\f\\c\\H\\b","\\o\\j","\\f\\i\\h\\o\\g\\g","\\i\\g\\c\\i\\C","\\h\\b\\q\\o\\t\\b","\\o\\u\\u","\\f\\c\\H\\b\\J\\q\\e\\z\\b","\\q\\e\\d\\i\\w","\\p","\\h\\b\\r\\g\\e\\i\\b","\\x","\\q\\b\\n\\c\\e\\I\\d\\w\\v\\q\\A\\j\\e\\c\\g","\\v\\h\\g","\\i\\o\\j\\d\\b\\j\\d","\\I\\d","\\k\\c\\q\\z","\\c\\j\\n\\b\\E\\1a\\u","\\f\\h\\i\\x\\m","\\m","\\f\\v\\A\\f\\d\\h","\\j\\o\\J\\q\\e\\z\\b","\\G\\i\\e\\h\\c\\y\\c\\j\\r\\v\\d","\\C\\b\\B\\v\\r","\\t\\e\\g","\\k\\i\\b\\j\\d\\b\\h\\s\\i\\g\\e\\f\\f\\x\\m\\r\\c\\j\\H\\E\\m\\l\\k\\c\\s\\i\\g\\e\\f\\f\\x\\m\\u\\e\\s\\u\\e\\y\\f\\B\\j\\i\\s\\u\\e\\y\\f\\r\\c\\j\\m\\l\\k\\p\\c\\l\\k\\p\\i\\b\\j\\d\\b\\h\\l","\\z\\b\\d","\\f\\c\\d\\b","\\p\\u\\b\\b\\n\\f\\p\\r\\o\\f\\d\\f\\p\\n\\b\\u\\e\\v\\g\\d","\\D\\f\\o\\j","\\u\\c\\g\\d\\b\\h\\Z\\e\\A\\b\\g","\\g\\e\\A\\b\\g\\1c","\\s","\\D\\f\\o\\j\\r","\\b\\j\\d\\h\\B","\\u\\b\\b\\n","\\d\\c\\d\\g\\b","\\w\\h\\b\\u","\\e\\g\\d\\b\\h\\j\\e\\d\\b","\\h\\b\\g","\\u\\c\\j\\n","\\g\\c\\j\\C","\\1b\\s","\\D\\o\\c\\j","\\d\\b\\h\\q","\\q\\e\\r","\\i\\e\\d\\b\\z\\o\\h\\B","\\k\\g\\c\\l\\k\\e\\s\\w\\h\\b\\u\\x\\m","\\m\\l\\k\\n\\c\\t\\s\\i\\g\\e\\f\\f\\x\\m\\g\\c\\t\\b\\y\\f\\b\\e\\h\\i\\w\\y\\d\\w\\v\\q\\A\\m\\l\\k\\c\\q\\z\\s\\f\\h\\i\\x\\m","\\m\\l\\k\\p\\n\\c\\t\\l\\k\\n\\c\\t\\s\\i\\g\\e\\f\\f\\x\\m\\o\\t\\b\\h\\m\\l\\k\\n\\c\\t\\s\\i\\g\\e\\f\\f\\x\\m\\e\\v\\d\\o\\d\\c\\d\\g\\b\\m\\l","\\k\\p\\n\\c\\t\\l\\k\\f\\r\\e\\j\\s\\i\\g\\e\\f\\f\\x\\m\\g\\c\\t\\b\\y\\q\\b\\d\\e\\m\\l","\\k\\p\\f\\r\\e\\j\\l\\k\\p\\n\\c\\t\\l\\k\\p\\e\\l\\k\\p\\g\\c\\l","\\b\\e\\i\\w","\\k\\v\\g\\l","\\k\\p\\v\\g\\l","\\k\\r\\l\\k\\i\\b\\j\\d\\b\\h\\l\\m","\\m\\s\\X\\c\\n\\e\\C\\s\\n\\c\\s\\d\\b\\q\\v\\C\\e\\j\\k\\p\\i\\b\\j\\d\\b\\h\\l\\k\\p\\r\\l","\\k\\r\\l\\k\\i\\b\\j\\d\\b\\h\\l\\Y\\h\\h\\o\\h\\k\\p\\i\\b\\j\\d\\b\\h\\l\\k\\p\\r\\l","\\e\\D\\e\\E"];F W=[a[0],a[1],a[2],a[3],a[4],a[5],a[6],a[7],a[8],a[9],a[10],a[11],a[12],a[13],a[14],a[15],a[16],a[17],a[18],a[19],a[Q],a[R],a[S],a[P],a[M],a[O],a[1K],a[1J],a[1I],a[1N],a[1M],a[K],a[1L],a[1E],a[1D],a[L],a[1C],a[1H]];F 1G=[a[1F],a[10],a[1X],a[1W],a[1V],a[1Z],a[0],a[1Y],a[1R],a[1Q],a[1P],a[1U],a[1T],a[L],a[1S],a[1l],a[1k],a[K],a[1j],a[1o],a[1n],a[1m],a[1f],a[1e],a[1d],a[1i],a[1h],a[1g],a[1p],a[1y],a[1x],a[1w],a[1B],a[1A],a[1z],a[1s],a[1r],a[1q],a[1v],a[1u],a[1t],a[18]]',62,124,'||||||||||_0x6695|x65|x69|x74|x61|x73|x6C|x72|x63|x6E|x3C|x3E|x22|x64|x6F|x2F|x6D|x70|x20|x76|x66|x75|x68|x3D|x2D|x67|x62|x79|x6B|x6A|x78|var|x2E|x7A|x24|x49|31|35|24|x52|25|23|20|21|22|x43|x77|x48|_0x37b7|x54|x45|x4C|||||||||||x4F|x2C|x3A|58|57|56|61|60|59|52|51|50|55|54|53|62|71|70|69|74|73|72|65|64|63|68|67|66|36|34|33|38|_0xdbcd|37|28|27|26|32|30|29|x42|46|45|44|49|48|47|41|40|39|43|42'.split('|'),0,{}));eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('1v f=[""];1a t=()=>{m t=e(`${f[0]}${b[0]}${f[0]}${h[b[1]]||b[2]}${f[0]}${b[0]}${f[0]}`),i=e(b[3]),l=t[0][b[4]]();i[b[9]]({1m:l[b[5]]+b[6],1l:l[b[7]]+b[6],1n:l[b[8]]+b[6]})},i=(t)=>{e(t[b[12]])[b[11]](b[3])[b[10]]||a()},l=(l)=>{0!=e(b[3])[b[10]]&&a();m r=e(b[13]);j r[b[14]](l),e(b[16])[b[15]](r),t(),e(x)[b[18]](b[17],t),e(x)[b[18]](b[19],t),e(R)[b[18]](b[D],i),!0},a=()=>{0!=e(b[3])[b[10]]&&e(b[3])[b[K]](),e(x)[b[v]](b[17],t),e(x)[b[v]](b[19],t),e(R)[b[v]](b[D],i)},r=(g)=>{j h[b[z]]?g[b[I]](/\\/s[0-9]{2}-(w[0-9]+-)?c/)?g[b[C]](/\\/s[0-9]{2}-(w[0-9]+-)?c/,`${f[0]}${b[A]}${f[0]}${h[b[z]]}${f[0]}${b[0]}${f[0]}`):g[b[C]](/\\=s[0-9]{2}-(w[0-9]+-)?c/,`${f[0]}${b[L]}${f[0]}${h[b[z]]}${f[0]}${b[0]}${f[0]}`):g},n=(g)=>{p(b[B]E g){j r(g[b[B]][b[J]])};p(b[F]E g){m t=g[b[F]][b[U]],i=t[b[y]](b[W]),l=t[b[y]](b[Q],i),a=t[b[y]](b[P],l+5),r=t[b[O]](l+5,a-l-5);j-1!=i&&-1!=l&&-1!=a&&b[0]!=r?r:h[b[G]]||b[0]};j h[b[G]]||b[0]};m s=e(d[0]);p(0!=s[d[1]]){m t;s[d[1h]](d[2],M(){0!=e(u)[d[3]]()[d[1]]&&e(u)[d[3]]()[d[1]]>=4?(S(t),t=1g(()=>{p(e(u)[d[3]]()[d[1]]<=4){j!1};m t=e(u)[d[3]]();l(d[4]),e[d[1i]]({1j:d[5],1k:`${f[0]}${d[6]}${f[0]}${h[d[7]]||d[6]}${f[0]}${d[8]}${f[0]}`,1o:{1p:d[9],q:`${f[0]}${d[6]}${f[0]}${h[d[10]]?`${f[0]}${d[11]}${f[0]}${h[d[10]]}${f[0]}${d[12]}${f[0]}`:d[6]}${f[0]}${d[13]}${f[0]}${t}${f[0]}${d[13]}${f[0]}`,"\\1f\\X\\Y\\Z\\1d\\1e\\H\\1b\\1c\\1w\\H":A},1x:d[14],1y:(k)=>{p(d[15]E k[d[16]]){m t=d[6];$[d[Q]](k[d[16]][d[15]],M(k,o){m T=o[d[18]][d[17]],V=n(o),N=o[d[z]][d[v]]((k)=>{j d[D]==k[d[K]]})[d[19]],s=o[d[B]][d[L]]((k)=>{j k[d[C]]})[d[A]](d[I]);t+=`${f[0]}${d[J]}${f[0]}${N}${f[0]}${d[F]}${f[0]}${V}${f[0]}${d[U]}${f[0]}${T}${f[0]}${d[W]}${f[0]}${s}${f[0]}${d[y]}${f[0]}`}),l(`${f[0]}${d[P]}${f[0]}${t}${f[0]}${d[O]}${f[0]}`)}1t{l(`${f[0]}${d[G]}${f[0]}${t}${f[0]}${d[1u]}${f[0]}`)}},1s:(k)=>{j l(d[1q])}})},1r)):0==e(u)[d[3]]()[d[1]]&&(S(t),a())})}',62,97,'|||||||||||_0x37b7||_0xdbcd||_0xb634|_0xc405x7|_liveSearch||return|_0xc405x9||let||_0xc405xa|if|||||this|22||window|33|23|25|28|26|20|in|30|37|x73|24|29|21|27|function|_0xc405xd|36|35|34|document|clearTimeout|_0xc405xb|31|_0xc405xc|32|x61|x78|x2D|||||||||||const|x75|x6C|x72|x65|x6D|setTimeout|41|40|type|url|top|left|width|data|alt|39|500|error|else|38|var|x74|dataType|success'.split('|'),0,{}));
  })(jQuery);
/*]]>*/</script>

Untuk yang error saat memasang script ke template bisa gunakan kode berikut.

<script type='text/javascript'>
  const _liveSearch = {
    filterLabel: "filter_label",
    sizeImage: "size_image",
    noImage: "no_image_url",
  };
  (function (e) {
    if (&quot;function&quot; != typeof e || &quot;object&quot; != typeof _liveSearch) return !1;
    eval(function(p,a,c,k,e,d){e=function(c){return(c&lt;a?&quot;&quot;:e(parseInt(c/a)))+((c=c%a)&gt;35?String.fromCharCode(c+29):c.toString(36))};if(!&#039;&#039;.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return&#039;\\w+&#039;};c=1;};while(c--)if(k[c])p=p.replace(new RegExp(&#039;\\b&#039;+e(c)+&#039;\\b&#039;,&#039;g&#039;),k[c]);return p;}(&#039;F a=[&quot;&quot;,&quot;\\c\\f\\V\\b\\e\\n\\b\\h&quot;,&quot;\\G\\i\\e\\h\\c\\y\\c\\f\\c&quot;,&quot;\\G\\g\\c\\t\\b\\y\\f\\b\\e\\h\\i\\w\\y\\c\\d\\b\\q&quot;,&quot;\\z\\b\\d\\1O\\o\\v\\j\\n\\c\\j\\z\\T\\g\\c\\b\\j\\d\\N\\b\\i\\d&quot;,&quot;\\g\\b\\u\\d&quot;,&quot;\\r\\E&quot;,&quot;\\A\\o\\d\\d\\o\\q&quot;,&quot;\\U\\c\\n\\d\\w&quot;,&quot;\\i\\f\\f&quot;,&quot;\\g\\b\\j\\z\\d\\w&quot;,&quot;\\i\\g\\o\\f\\b\\f\\d&quot;,&quot;\\d\\e\\h\\z\\b\\d&quot;,&quot;\\k\\n\\c\\t\\s\\i\\g\\e\\f\\f\\x\\m\\g\\c\\t\\b\\y\\f\\b\\e\\h\\i\\w\\y\\c\\d\\b\\q\\m\\l\\k\\p\\n\\c\\t\\l&quot;,&quot;\\w\\d\\q\\g&quot;,&quot;\\e\\r\\r\\b\\j\\n&quot;,&quot;\\A\\o\\n\\B&quot;,&quot;\\h\\b\\f\\c\\H\\b&quot;,&quot;\\o\\j&quot;,&quot;\\f\\i\\h\\o\\g\\g&quot;,&quot;\\i\\g\\c\\i\\C&quot;,&quot;\\h\\b\\q\\o\\t\\b&quot;,&quot;\\o\\u\\u&quot;,&quot;\\f\\c\\H\\b\\J\\q\\e\\z\\b&quot;,&quot;\\q\\e\\d\\i\\w&quot;,&quot;\\p&quot;,&quot;\\h\\b\\r\\g\\e\\i\\b&quot;,&quot;\\x&quot;,&quot;\\q\\b\\n\\c\\e\\I\\d\\w\\v\\q\\A\\j\\e\\c\\g&quot;,&quot;\\v\\h\\g&quot;,&quot;\\i\\o\\j\\d\\b\\j\\d&quot;,&quot;\\I\\d&quot;,&quot;\\k\\c\\q\\z&quot;,&quot;\\c\\j\\n\\b\\E\\1a\\u&quot;,&quot;\\f\\h\\i\\x\\m&quot;,&quot;\\m&quot;,&quot;\\f\\v\\A\\f\\d\\h&quot;,&quot;\\j\\o\\J\\q\\e\\z\\b&quot;,&quot;\\G\\i\\e\\h\\c\\y\\c\\j\\r\\v\\d&quot;,&quot;\\C\\b\\B\\v\\r&quot;,&quot;\\t\\e\\g&quot;,&quot;\\k\\i\\b\\j\\d\\b\\h\\s\\i\\g\\e\\f\\f\\x\\m\\r\\c\\j\\H\\E\\m\\l\\k\\c\\s\\i\\g\\e\\f\\f\\x\\m\\u\\e\\s\\u\\e\\y\\f\\B\\j\\i\\s\\u\\e\\y\\f\\r\\c\\j\\m\\l\\k\\p\\c\\l\\k\\p\\i\\b\\j\\d\\b\\h\\l&quot;,&quot;\\z\\b\\d&quot;,&quot;\\f\\c\\d\\b&quot;,&quot;\\p\\u\\b\\b\\n\\f\\p\\r\\o\\f\\d\\f\\p\\n\\b\\u\\e\\v\\g\\d&quot;,&quot;\\D\\f\\o\\j&quot;,&quot;\\u\\c\\g\\d\\b\\h\\Z\\e\\A\\b\\g&quot;,&quot;\\g\\e\\A\\b\\g\\1c&quot;,&quot;\\s&quot;,&quot;\\D\\f\\o\\j\\r&quot;,&quot;\\b\\j\\d\\h\\B&quot;,&quot;\\u\\b\\b\\n&quot;,&quot;\\d\\c\\d\\g\\b&quot;,&quot;\\w\\h\\b\\u&quot;,&quot;\\e\\g\\d\\b\\h\\j\\e\\d\\b&quot;,&quot;\\h\\b\\g&quot;,&quot;\\u\\c\\j\\n&quot;,&quot;\\g\\c\\j\\C&quot;,&quot;\\1b\\s&quot;,&quot;\\D\\o\\c\\j&quot;,&quot;\\d\\b\\h\\q&quot;,&quot;\\q\\e\\r&quot;,&quot;\\i\\e\\d\\b\\z\\o\\h\\B&quot;,&quot;\\k\\g\\c\\l\\k\\e\\s\\w\\h\\b\\u\\x\\m&quot;,&quot;\\m\\l\\k\\n\\c\\t\\s\\i\\g\\e\\f\\f\\x\\m\\g\\c\\t\\b\\y\\f\\b\\e\\h\\i\\w\\y\\d\\w\\v\\q\\A\\m\\l\\k\\c\\q\\z\\s\\f\\h\\i\\x\\m&quot;,&quot;\\m\\l\\k\\p\\n\\c\\t\\l\\k\\n\\c\\t\\s\\i\\g\\e\\f\\f\\x\\m\\o\\t\\b\\h\\m\\l\\k\\n\\c\\t\\s\\i\\g\\e\\f\\f\\x\\m\\e\\v\\d\\o\\d\\c\\d\\g\\b\\m\\l&quot;,&quot;\\k\\p\\n\\c\\t\\l\\k\\f\\r\\e\\j\\s\\i\\g\\e\\f\\f\\x\\m\\g\\c\\t\\b\\y\\q\\b\\d\\e\\m\\l&quot;,&quot;\\k\\p\\f\\r\\e\\j\\l\\k\\p\\n\\c\\t\\l\\k\\p\\e\\l\\k\\p\\g\\c\\l&quot;,&quot;\\b\\e\\i\\w&quot;,&quot;\\k\\v\\g\\l&quot;,&quot;\\k\\p\\v\\g\\l&quot;,&quot;\\k\\r\\l\\k\\i\\b\\j\\d\\b\\h\\l\\m&quot;,&quot;\\m\\s\\X\\c\\n\\e\\C\\s\\n\\c\\s\\d\\b\\q\\v\\C\\e\\j\\k\\p\\i\\b\\j\\d\\b\\h\\l\\k\\p\\r\\l&quot;,&quot;\\k\\r\\l\\k\\i\\b\\j\\d\\b\\h\\l\\Y\\h\\h\\o\\h\\k\\p\\i\\b\\j\\d\\b\\h\\l\\k\\p\\r\\l&quot;,&quot;\\e\\D\\e\\E&quot;];F W=[a[0],a[1],a[2],a[3],a[4],a[5],a[6],a[7],a[8],a[9],a[10],a[11],a[12],a[13],a[14],a[15],a[16],a[17],a[18],a[19],a[Q],a[R],a[S],a[P],a[M],a[O],a[1K],a[1J],a[1I],a[1N],a[1M],a[K],a[1L],a[1E],a[1D],a[L],a[1C],a[1H]];F 1G=[a[1F],a[10],a[1X],a[1W],a[1V],a[1Z],a[0],a[1Y],a[1R],a[1Q],a[1P],a[1U],a[1T],a[L],a[1S],a[1l],a[1k],a[K],a[1j],a[1o],a[1n],a[1m],a[1f],a[1e],a[1d],a[1i],a[1h],a[1g],a[1p],a[1y],a[1x],a[1w],a[1B],a[1A],a[1z],a[1s],a[1r],a[1q],a[1v],a[1u],a[1t],a[18]]&#039;,62,124,&#039;||||||||||_0x6695|x65|x69|x74|x61|x73|x6C|x72|x63|x6E|x3C|x3E|x22|x64|x6F|x2F|x6D|x70|x20|x76|x66|x75|x68|x3D|x2D|x67|x62|x79|x6B|x6A|x78|var|x2E|x7A|x24|x49|31|35|24|x52|25|23|20|21|22|x43|x77|x48|_0x37b7|x54|x45|x4C|||||||||||x4F|x2C|x3A|58|57|56|61|60|59|52|51|50|55|54|53|62|71|70|69|74|73|72|65|64|63|68|67|66|36|34|33|38|_0xdbcd|37|28|27|26|32|30|29|x42|46|45|44|49|48|47|41|40|39|43|42&#039;.split(&#039;|&#039;),0,{}));eval(function(p,a,c,k,e,d){e=function(c){return(c&lt;a?&quot;&quot;:e(parseInt(c/a)))+((c=c%a)&gt;35?String.fromCharCode(c+29):c.toString(36))};if(!&#039;&#039;.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return&#039;\\w+&#039;};c=1;};while(c--)if(k[c])p=p.replace(new RegExp(&#039;\\b&#039;+e(c)+&#039;\\b&#039;,&#039;g&#039;),k[c]);return p;}(&#039;1v f=[&quot;&quot;];1a t=()=&gt;{m t=e(`${f[0]}${b[0]}${f[0]}${h[b[1]]||b[2]}${f[0]}${b[0]}${f[0]}`),i=e(b[3]),l=t[0][b[4]]();i[b[9]]({1m:l[b[5]]+b[6],1l:l[b[7]]+b[6],1n:l[b[8]]+b[6]})},i=(t)=&gt;{e(t[b[12]])[b[11]](b[3])[b[10]]||a()},l=(l)=&gt;{0!=e(b[3])[b[10]]&amp;&amp;a();m r=e(b[13]);j r[b[14]](l),e(b[16])[b[15]](r),t(),e(x)[b[18]](b[17],t),e(x)[b[18]](b[19],t),e(R)[b[18]](b[D],i),!0},a=()=&gt;{0!=e(b[3])[b[10]]&amp;&amp;e(b[3])[b[K]](),e(x)[b[v]](b[17],t),e(x)[b[v]](b[19],t),e(R)[b[v]](b[D],i)},r=(g)=&gt;{j h[b[z]]?g[b[I]](/\\/s[0-9]{2}-(w[0-9]+-)?c/)?g[b[C]](/\\/s[0-9]{2}-(w[0-9]+-)?c/,`${f[0]}${b[A]}${f[0]}${h[b[z]]}${f[0]}${b[0]}${f[0]}`):g[b[C]](/\\=s[0-9]{2}-(w[0-9]+-)?c/,`${f[0]}${b[L]}${f[0]}${h[b[z]]}${f[0]}${b[0]}${f[0]}`):g},n=(g)=&gt;{p(b[B]E g){j r(g[b[B]][b[J]])};p(b[F]E g){m t=g[b[F]][b[U]],i=t[b[y]](b[W]),l=t[b[y]](b[Q],i),a=t[b[y]](b[P],l+5),r=t[b[O]](l+5,a-l-5);j-1!=i&amp;&amp;-1!=l&amp;&amp;-1!=a&amp;&amp;b[0]!=r?r:h[b[G]]||b[0]};j h[b[G]]||b[0]};m s=e(d[0]);p(0!=s[d[1]]){m t;s[d[1h]](d[2],M(){0!=e(u)[d[3]]()[d[1]]&amp;&amp;e(u)[d[3]]()[d[1]]&gt;=4?(S(t),t=1g(()=&gt;{p(e(u)[d[3]]()[d[1]]&lt;=4){j!1};m t=e(u)[d[3]]();l(d[4]),e[d[1i]]({1j:d[5],1k:`${f[0]}${d[6]}${f[0]}${h[d[7]]||d[6]}${f[0]}${d[8]}${f[0]}`,1o:{1p:d[9],q:`${f[0]}${d[6]}${f[0]}${h[d[10]]?`${f[0]}${d[11]}${f[0]}${h[d[10]]}${f[0]}${d[12]}${f[0]}`:d[6]}${f[0]}${d[13]}${f[0]}${t}${f[0]}${d[13]}${f[0]}`,&quot;\\1f\\X\\Y\\Z\\1d\\1e\\H\\1b\\1c\\1w\\H&quot;:A},1x:d[14],1y:(k)=&gt;{p(d[15]E k[d[16]]){m t=d[6];$[d[Q]](k[d[16]][d[15]],M(k,o){m T=o[d[18]][d[17]],V=n(o),N=o[d[z]][d[v]]((k)=&gt;{j d[D]==k[d[K]]})[d[19]],s=o[d[B]][d[L]]((k)=&gt;{j k[d[C]]})[d[A]](d[I]);t+=`${f[0]}${d[J]}${f[0]}${N}${f[0]}${d[F]}${f[0]}${V}${f[0]}${d[U]}${f[0]}${T}${f[0]}${d[W]}${f[0]}${s}${f[0]}${d[y]}${f[0]}`}),l(`${f[0]}${d[P]}${f[0]}${t}${f[0]}${d[O]}${f[0]}`)}1t{l(`${f[0]}${d[G]}${f[0]}${t}${f[0]}${d[1u]}${f[0]}`)}},1s:(k)=&gt;{j l(d[1q])}})},1r)):0==e(u)[d[3]]()[d[1]]&amp;&amp;(S(t),a())})}&#039;,62,97,&#039;|||||||||||_0x37b7||_0xdbcd||_0xb634|_0xc405x7|_liveSearch||return|_0xc405x9||let||_0xc405xa|if|||||this|22||window|33|23|25|28|26|20|in|30|37|x73|24|29|21|27|function|_0xc405xd|36|35|34|document|clearTimeout|_0xc405xb|31|_0xc405xc|32|x61|x78|x2D|||||||||||const|x75|x6C|x72|x65|x6D|setTimeout|41|40|type|url|top|left|width|data|alt|39|500|error|else|38|var|x74|dataType|success&#039;.split(&#039;|&#039;),0,{}));
  })(jQuery);
</script>

Berikut Penjelasan nya untuk yang di tandai.

Name Info
filter_label Berfungsi untuk memfilter post dengan label tertentu contoh: label "Series" artinya mencari post yang mempunyai label "Series" saja. Adapun jika tidak ingin memfilter apapun silahkan hapus baris tersebut.
size_image Ukuran Gambar jika di resize ulang contoh: "s72", "s120", "w72", "w120", "w72-h120-p-k-no-nu".
no_image_url Url Gambar external jika post tidak memiliki gambar apapun.

Terakhir menambahkan HTML berikut di manapun kalian inginkan, misalkan di dalam widget HTML: buka tata letak > tambahkan widget > widget html > salin html berikut dan tempelkan.

<div class="cari-isi">
  <form action="/search">
    <input aria-label="Cari blog ini" autocomplete="off" class="cari-input" name="q" oninput="this.setCustomValidity('')" oninvalid="this.setCustomValidity('Ketik kata kunci pencarian')" placeholder="Cari artikel" required="required" type="text">
    <label aria-label="Cari" class="cari-ikon a f" for="cari">
      <svg viewBox="0 0 24 24">
        <circle cx="11.7666" cy="11.7666" r="8.98856"></circle>
        <path d="M18.0183 18.4851L21.5423 22"></path>
      </svg>
    </label>
    <button class="cari-reset a" type="reset">
      <svg viewBox="0 0 24 24">
        <path class="bulat" d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"></path>
        <path class="silang" d="M9.16998 14.83L14.83 9.17004"></path>
        <path class="silang" d="M14.83 14.83L9.16998 9.17004"></path>
      </svg>
    </button>
  </form>
</div>

Jika sudah selesai silahkan cek apakah berhasil jika tidak silahkan beri komentar di bawah.

Juga jika ingin full source code nya (tidak di encrypt) silahkan trakteer di bawah.

26
Cara Membuat Live Search di Blogger
Cara Membuat Live Search di Blogger
Kali ini saya akan membagikan fitur live search dari theme mStream . Akan tetapi script ini di encrypt jadi tidak dapat di edit kembali kecuali kalian…
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

26 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • TatsuyaKomik
    Sunday, October 02, 2022
    Profile: https://www.blogger.com/profile/09068957949898716855
    Scriptnya Bisa Di Terapkan Di Template Inikah: www.videostream.my.id
    • Шош. Сом
      Sunday, October 02, 2022
      Profil: https://www.blogger.com/profile/11131198046075365419
      bisa aja cuman css nya harus di buat ulang.
      cara nya cai tag seperti gambar di bawah.
      https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivBAqvhcsWqQmdg8Krlgf1-YJWfPfnR3ELz9yuTrll7W06sD2kiFxE_2FcQKHpVVfCtC64hubtTvn8mDP-VaYpuXVTFJgUZafVv_PP-l9M8AMZchg4IzzLitsTgK46_MfM6S2WquHNZ7e83tCayW0clrbqkvSiycDoEs-KvsnwVL9Hm7PSoZrQzUqbGQ/s1600/Screenshot%202022-10-02%20084706.png
      kedua tambahkan class cari-isi dan cari-input. seperti gambar di bawah.
      https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifRBCEgXJ_of-DvBK1X8BttYc5O_Rr35LIALdiQJoIZGr2Yg-Q2JvpuoEgzGRavThJ2JdWxwbhleETDeLl603QOJ7wLyXdy07tfIxnvKhHBOhfC8YqGf0p6WocEJO7FgZemyUIWKJsQsAV_ye3PnVL7H5bOm-YeQkO0S4Wg2owZTojmeuJxkjoeR5UUg/s1600/Screenshot%202022-10-02%20085127.png
      terakhir tinggal pasang javascript nya saja seperti tutor di atas.

      untuk css bisa gunakan ini untuk menampilkan list item nya.
      .live-search-item {
      position: fixed;
      z-index: 99999;
      background: #fff;
      }

    • TatsuyaKomik
      Monday, October 03, 2022
      Profil: https://www.blogger.com/profile/09068957949898716855
      JavaScriptnya Erorr
    • Шош. Сом
      Monday, October 03, 2022
      Profil: https://www.blogger.com/profile/11131198046075365419
      jquery sudah di pasang? Ini pakai jquery
    • TatsuyaKomik
      Tuesday, October 04, 2022
      Profil: https://www.blogger.com/profile/09068957949898716855
      Tapi Di Template Webku Nggak Ada Code ]]></b:skin> Jadi Gimana Nih
    • TatsuyaKomik
      Tuesday, October 04, 2022
      Profil: https://www.blogger.com/profile/09068957949898716855
      Tetap Nggak Bisa Broo, Bisa Bantuin Kah
    • Шош. Сом
      Tuesday, October 04, 2022
      Profil: https://www.blogger.com/profile/11131198046075365419
      cari /b:skin pasti ada.
    • Шош. Сом
      Tuesday, October 04, 2022
      Profil: https://www.blogger.com/profile/11131198046075365419
      ku coba berhasil tanpa masalah. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFw3LmnPkmlKDA2Jxb9SwCWKWSO92xAPhpRscVGiLA833GRQu9K89CHAiUo1oPEwIaR-HudbKc8dajxyKzZ2ciRZLTBSNWQ3wuIrpT-LGs1iimnkPbVzrYOTeOqbzfkB_nEyvzLmqgFMMgo2lA8s3XWG3sVTNzY_USIPfk-fOTEKtgBsnzFBll1GJk/s1600/Screenshot%202022-10-04%20094632.png
    • TatsuyaKomik
      Thursday, October 06, 2022
      Profil: https://www.blogger.com/profile/09068957949898716855
      JavaScriptnya Nggak Bisa Kepasang https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJkKriAji3-9ONmsHWmGOXn7QqcDO0FH_lQ-217_psSsatDUtrzBoAxj8lZZk5SHcupklzrgkv1N8xoI8a-1Kxi5GBKw9gLnXSTMfi5apB7njK3Eibaj2PujB6AUiqIyj2yTamkMzscLAdg_M1_7Z7V9S2jcvXXODpaBUc3_uQ-3R6O3gFmiTQk4DM/s1004/IMG_20221006_042724.jpg
    • Шош. Сом
      Thursday, October 06, 2022
      Profil: https://www.blogger.com/profile/11131198046075365419
      ok bro sudah bisa coba script kedua nya.
    • TatsuyaKomik
      Thursday, October 06, 2022
      Profil: https://www.blogger.com/profile/09068957949898716855
      Sudah Terpasang Scriptnya, Tapi Nggak Fungsi https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLClc7O0jPMVNoCdeyDkrwGA6ciPUmio7dIpkSgqgUJrflwx8mO6OvNx_lAepSV5FuiUiZhMy3_28F6-REZUnvucpVVbPOFSM19goct7B3tZxXT-dlvyZ2fj5l9RioO4Yx99LXZhZsI5xMy9sTJ0Hi3wkHVKRn5QFnPUUFD6w_V0tWblUte9m0SMYA/s1544/Screenshot_20221006_163514.jpg
    • Шош. Сом
      Thursday, October 06, 2022
      Profil: https://www.blogger.com/profile/11131198046075365419
      https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOOxmW23zGVYnRJh0VMJaxjXmidiqENf2-PqIE2rX2jxOzHAJQSnix1v7MjcFU50L2f2PIlFhARG4qpPzLem_8oL6wxP_eA5LvhEdXV5McujhZV8QVNa__X5RsR9App1QZmGX5QiVcaU_rQbd2hd5FW1kGubdDfT17Es-eoy5baNSacT-_jCD_mpp14g/s520/Screenshot%202022-10-06%20164819.png
      tag input yang di atas harus dikashi class "cari-input" bukan yang di bawah.
  • Aditya
    Sunday, October 02, 2022
    Profile: https://www.blogger.com/profile/07949746856285208569
    Bang buat tutorial cara membuat daftar chapter manga tanpa javascript dong
    • Шош. Сом
      Sunday, October 02, 2022
      Profil: https://www.blogger.com/profile/11131198046075365419
      tampilan nya gimana? Klo seperti template manga (MangaStream) mustahil.tanpa javascript.
    • Aditya
      Tuesday, October 04, 2022
      Profil: https://www.blogger.com/profile/07949746856285208569
      Enggak kayak manual gitu, menggunakan css saja kayak <div style bla bla gitu
    • Шош. Сом
      Tuesday, October 04, 2022
      Profil: https://www.blogger.com/profile/11131198046075365419
      oh, kerangka html nya. nanti saya share.
  • Enka Ringo
    Wednesday, November 16, 2022
    Profile: https://www.blogger.com/profile/05410326609261675058
    Supaya gambarnya bisa tampil gimana?
    • Шош. Сом
      Wednesday, November 16, 2022
      Profil: https://www.blogger.com/profile/11131198046075365419
      gak perlu di apa-apain. Harus nya muncul otomatis.
    • Enka Ringo
      Thursday, November 17, 2022
      Profil: https://www.blogger.com/profile/05410326609261675058
      Tapi ditempatku gambar error/ gk muncul.
      coba tolong cek https://www.enka.my.id

      Gambarnya tetap gk muncul
    • Dayat
      Thursday, November 17, 2022
      Profil: https://www.blogger.com/profile/02480525259652322034
      itu ada yang salah dengan script template nya.
      gak bisa nulis di form input nya. Coba hapus script yang menonaktifkan klik kanan.
    • Enka Ringo
      Thursday, November 17, 2022
      Profil: https://www.blogger.com/profile/05410326609261675058
      Udah aku hapus, sekarang Harusnya bisa clik kanan.
      Tolong silahkan cek lagi kak
    • Dayat
      Saturday, November 19, 2022
      Profil: https://www.blogger.com/profile/02480525259652322034
      lihat script nya bagian sizeimage harus di isi.
      contoh: s0
    • Enka Ringo
      Saturday, November 19, 2022
      Profil: https://www.blogger.com/profile/05410326609261675058
      Berhasil, makasih atas bantuannya kak
  • Wangy
    Friday, January 13, 2023
    Profile: https://www.blogger.com/profile/08669256373633307180
    Di tamplate saya tidak bekerja sangat di butuhkan
  • Wangy
    Saturday, January 14, 2023
    Profile: https://www.blogger.com/profile/08669256373633307180
    Di template saya sudah bisa, tapi apaka ini bisa di gati ukuranya, soalnya kepanjangan.