In this tutorial, we'll create an automatic anime list that lets users filter and explore posts by title initials interactively.
The goal is to enhance user experience by providing a categorized and searchable post index using labels and feed data.
This technique uses JSONP to fetch post titles dynamically, then sorts and displays them based on their starting letter or number.
Open Blogger > Pages > Create a Page > Switch to HTML view, then paste the following script and save:
<style>
.search-list-anime{margin:20px}#searchListAnime{padding:8px;width:100%;max-width:400px;font-size:16px}h2.number,h2.letter{margin-top:20px;font-size:20px}.result-search-anime ul{list-style:disc;padding-left:20px}.result-search-anime li{margin-bottom:6px}.result-search-anime .skeleton-loader{animation:shimmer 1.5s infinite linear;background:linear-gradient(to right,#eee 8%,#ddd 18%,#eee 33%);background-size:1000px 100%;height:16px;margin:6px 0;border-radius:4px}@keyframes shimmer{0%{background-position:-1000px 0}100%{background-position:1000px 0}}.result-search-anime{margin:20px auto}
</style>
<div class="search-list-anime">
<input type="text" id="searchListAnime" placeholder="Search for anime...">
<div class="result-search-anime"></div>
</div>
<script type="text/javascript">
const l=[];
const c={};
const t="XXXXXXXXXX"; // blog ID CTRL+U blog find https://www.blogger.com/feeds/XXXXX/posts/default
const n=`https://www.blogger.com/feeds/${t}/posts/default?alt=json-in-script`;
function _0x3bf1(){var t=["split","2218674eclmeT","replace","614255MJhrDa","fromCharCode","14IKOvYj","6221152ugEuSv","2469954CCwBvd","983368biItyx","||const|document|appendChild|createElement||title|if|function||Object||||forEach|test|flat||innerHTML|values||push|||className|link|feed||||div|skeleton|ul|result|anime||search|querySelector|null|window|toUpperCase|charAt|href|li|let|openSearch|toLowerCase|else|parseInt|width|ABCDEFGHIJKLMNOPQRSTUVWXYZ|h2|filter|random|includes|totalResults|script|src|entry|handleFeed_||assign|letter|return|alternate|rel|find|map|body|start|callback|500|results|number|textContent|style|value|loader|getElementById|searchListAnime|addEventListener|input|index|for|this|container|clearTimeout|sort|itemsPerPage|300|70|delete|_blank|target|setTimeout|Math|30|localeCompare|max","3756976CHwvMe","195568JMUFBy","\\w+"];return(_0x3bf1=function(){return t})()}var _0x83165a=_0x3af7;function _0x3af7(t,e){var n=_0x3bf1();return(_0x3af7=function(t,e){return n[t-=448]})(t,e)}(function(t,e){for(var n=_0x3af7,r=_0x3bf1();;)try{if(505182===-parseInt(n(453))/1+-parseInt(n(450))/2+parseInt(n(449))/3+-parseInt(n(452))/4+parseInt(n(458))/5+-parseInt(n(456))/6+-parseInt(n(460))/7*(-parseInt(n(448))/8))break;r.push(r.shift())}catch(a){r.push(r.shift())}})(),eval(function(t,e,n,r,a,s){var o=_0x3af7;if(a=function(t){var e=_0x3af7;return(t<62?"":a(parseInt(t/62)))+((t%=62)>35?String[e(459)](t+29):t.toString(36))},!""[o(457)](/^/,String)){for(;n--;)s[a(n)]=r[n]||a(n);r=[function(t){return s[t]}],a=function(){return o(454)},n=1}for(;n--;)r[n]&&(t=t[o(457)](new RegExp("\\b"+a(n)+"\\b","g"),r[n]));return t}('9 u(s=1){2 i=`Y${s}`;E[i]=9(t){2 n=t.r.X||[];l.m(...n);2 e=N(t.r.K$U.$t);2 c=N(t.r.K$1r.$t);2 o=s+c;8(o<=e){u(o)}M{d(l)}1u E[i]};2 t=3.5("V");t.W=`${n}&18-1l=${s}&1B-1b=1a&19=${i}`;3.17.4(t)}9 d(t){2 n=t.16(t=>{2 n=t.7.$t;2 e=t.q.15(t=>t.14==="13").H;12{7:n,q:e}});b.10(c,{});n.f(t=>{2 n=t.7.G(0).F();2 e=/^\\d/.g(n)?"#":/^[A-Z]$/.g(n)?n:D;8(e){8(!c[e])c[e]=[];c[e].m(t)}});e(b.k(c).h())}9 e(t){2 c=3.C(".y-B-z");c.j="";2 n=["#",..."P"];2 o={};t.f(t=>{2 n=t.7.G(0).F();2 e=/^\\d/.g(n)?"#":/^[A-Z]$/.g(n)?n:D;8(e){8(!o[e])o[e]=[];o[e].m(t)}});n.f(t=>{8(o[t]){2 n=3.5("Q");n.p=t==="#"?"1c":"11";n.1d=t;2 e=3.5("x");o[t].1q((t,n)=>t.7.1A(n.7)).f(t=>{2 n=3.5("I");n.j=`${t.7}`;e.4(n)});c.4(n);c.4(e)}})}9 o(n){2 t=3.C(".y-B-z");t.j="";2 e=3.5("v");e.p="w-1o";2 c=3.5("x");1m(J t=0;t{8(!n){e(b.k(c).h())}M{2 t=b.k(c).h().R(t=>t.7.L().T(n));e(t)}},1s)});u();',0,100,_0x83165a(451)[_0x83165a(455)]("|"),0,{}));
</script> Once everything is in place, publish the page. Visitors can now search and browse categorized anime posts smoothly with filtering by keyword.