Cara Membuat Live Search di Blogger

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.

Artikel Terkait

22 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • 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>

Emoticon

  • Tatsuya Pratama
    2 Oktober 2022 01.04
    Profil: https://www.blogger.com/profile/09068957949898716855
    Scriptnya Bisa Di Terapkan Di Template Inikah: www.videostream.my.id
    • Шош. Сом
      2 Oktober 2022 07.57
      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;
      }

    • Tatsuya Pratama
      3 Oktober 2022 05.35
      Profil: https://www.blogger.com/profile/09068957949898716855
      JavaScriptnya Erorr
    • Шош. Сом
      3 Oktober 2022 18.27
      Profil: https://www.blogger.com/profile/11131198046075365419
      jquery sudah di pasang? Ini pakai jquery
    • Tatsuya Pratama
      4 Oktober 2022 01.40
      Profil: https://www.blogger.com/profile/09068957949898716855
      Tapi Di Template Webku Nggak Ada Code ]]></b:skin> Jadi Gimana Nih
    • Шош. Сом
      4 Oktober 2022 08.39
      Profil: https://www.blogger.com/profile/11131198046075365419
      cari /b:skin pasti ada.
    • Шош. Сом
      4 Oktober 2022 08.47
      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
    • Tatsuya Pratama
      6 Oktober 2022 03.32
      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
    • Шош. Сом
      6 Oktober 2022 09.15
      Profil: https://www.blogger.com/profile/11131198046075365419
      ok bro sudah bisa coba script kedua nya.
    • Tatsuya Pratama
      6 Oktober 2022 15.42
      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
    • Шош. Сом
      6 Oktober 2022 15.51
      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.
  • Nox
    2 Oktober 2022 16.10
    Profil: https://www.blogger.com/profile/07949746856285208569
    Bang buat tutorial cara membuat daftar chapter manga tanpa javascript dong
    • Шош. Сом
      2 Oktober 2022 17.56
      Profil: https://www.blogger.com/profile/11131198046075365419
      tampilan nya gimana? Klo seperti template manga (MangaStream) mustahil.tanpa javascript.
    • Nox
      4 Oktober 2022 15.53
      Profil: https://www.blogger.com/profile/07949746856285208569
      Enggak kayak manual gitu, menggunakan css saja kayak <div style bla bla gitu
    • Шош. Сом
      4 Oktober 2022 16.07
      Profil: https://www.blogger.com/profile/11131198046075365419
      oh, kerangka html nya. nanti saya share.
  • Enka Ringo
    16 November 2022 00.07
    Profil: https://www.blogger.com/profile/05410326609261675058
    Supaya gambarnya bisa tampil gimana?
    • Шош. Сом
      16 November 2022 09.42
      Profil: https://www.blogger.com/profile/11131198046075365419
      gak perlu di apa-apain. Harus nya muncul otomatis.
    • Enka Ringo
      17 November 2022 13.38
      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
    • Dagruel.com
      17 November 2022 14.38
      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
      17 November 2022 20.42
      Profil: https://www.blogger.com/profile/05410326609261675058
      Udah aku hapus, sekarang Harusnya bisa clik kanan.
      Tolong silahkan cek lagi kak
    • Dagruel.com
      19 November 2022 10.43
      Profil: https://www.blogger.com/profile/02480525259652322034
      lihat script nya bagian sizeimage harus di isi.
      contoh: s0
    • Enka Ringo
      19 November 2022 23.23
      Profil: https://www.blogger.com/profile/05410326609261675058
      Berhasil, makasih atas bantuannya kak