Membuat Anime List Seperti Samehadaku

Membuat Anime List Seperti Samehadaku
Get Started > Details
  • Details
  • Install

Deskripsi.

Kode ini membuat anime list seperti Samehadaku.

  • Pasang RasganeJS atau BloggerScript v1.2.0 di atas tag </head>.

  • Pasang kode css di dalam tag <b:skin><![CDATA[...]]></b:skin> atau <style>...</style>.

    .box_anime_list_samehadaku{
  --background : #fff;
  --background_second : #f5f7fa;
  --color_primary : #00b7e0;

  --danger_color : #d93024;

  --w-1: 100%;
  --w-2: 50%;
  --w-3: 33.3333333%;
  --w-4: 25%;
  --w-5: 20%;
  --w-6: 16.66666%;
}
.filtersearch > div{padding:24px;line-height:20px;background:var(--background_second)}
.filtersearch table{border-collapse:collapse;border-spacing:0}
.filtersearch tr{margin-bottom:23px;display:block}
.filtersearch tr:last-child{margin-bottom:6px}
.filtersearch .filter_title{padding-right:10px;font-size:15px;text-transform:capitalize;padding-bottom:7px;width:100%;font-weight:500;display:block;border-bottom:solid 1px #eceff5}
.filtersearch .filter_act{display:flex;flex:1;flex-flow:row wrap;overflow:hidden;padding:20px 0 8px;border-radius:3px;padding-left:0}
.filtersearch tr .input{background:#fff;font-weight:300;color:#999;padding:5px;width:100%;border:1px solid #999;border-radius:3px;font-family:inherit;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
.filtersearch .radio{display:block;position:relative;padding-left:18px;margin-right:15px;margin-bottom:5px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:13px}
.filtersearch .radio input{position:absolute;opacity:0;cursor:pointer;display:none}
.checkfilx{position:absolute;top:5px;left:0;height:12px;width:12px;background-color:#e9e9e9;border-radius:50%}
.radiox input:checked ~ .checkfilx,.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.tooltip .towatch a,.listeps span.eps,.filtersearch .radio input:checked~.checkfilx,.widgetseries ul li .ctr{background-color:var(--color_primary)}
.filter-sort{position:relative;margin-right:5px}
.filter-sort li{position:relative;margin:2px 0;height:33px;line-height:33px;cursor:pointer;-webkit-border-radius:3px;-khtml-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;display:inline-block}
.filter-sort li input{display:none}
.filter-sort li label{display:block;cursor:pointer;padding:0 12px;position:relative;font-weight:400;font-size:13px}
.filter-sort li input:checked+label{background:var(--color_primary);color:#fff;-webkit-border-radius:3px;-khtml-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px}
.tax_fil{display:block;position:relative;padding-left:14px;margin-bottom:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;float:left;width:auto;font-size:13px;margin-left:11px;line-height:25px}
.filter_act.genres .tax_fil{width:var(--w-5);margin:0}
.tax_fil input{position:absolute;opacity:0;cursor:pointer}
.checkfil{position:absolute;top:8px;left:0;height:6px;border-radius:50%;width:6px;background-color:#d6d6d6}
.tax_fil:hover input ~ .checkfil{background-color:#ccc}
.tax_fil input:checked ~ .checkfil{background-color:#e3eff2}
.checkfil:after{content:"";position:absolute;display:none}
.tax_fil .checkfil:after{left:0;top:-6px;width:9px;height:14px;border:solid #3c97f3;border-width:0 3px 4px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
.tax_fil .checkfil:after{border:solid var(--color_primary);border-width:0 3px 4px 0}
.tax_fil input:checked ~ .checkfil:after{display:block}
.filtersearch button.filterbtn{margin:0 auto;margin-top:15px;border:1px solid var(--color_primary);color:#FFF;line-height:31px;border-radius:4px;background:var(--color_primary);cursor:pointer;display:block;font-size:16px;width:100%;font-family:'Roboto',sans-serif}
.gnr{font-family:inherit;border:1px solid #FFF;color:#333;line-height:30px;padding:0 15px;border-radius:30px;background:#FFF;cursor:pointer;font-weight:300;display:none;font-size:17px;margin:15px 0;cursor:pointer;text-align:center}
.relat{overflow:hidden;display:block;position:relative;margin:0}
.animepost{float:left;width:var(--w-5);position:relative}
.animepost .animposx{position:relative;overflow:hidden;margin:10px;transition:all .2s;-webkit-transition:all .2s;-moz-transition:all .2s}
.animepost .animposx .content-thumb{padding:140% 0 0;position:relative;overflow:hidden;background:#f1f1f1}
.animepost .animposx .content-thumb .ply{position:absolute;width:100%;z-index:1;height:100%;top:0;background:rgba(0,0,0,0.67);visibility:hidden;opacity:0;transition:visibility 0s,opacity 0.1s linear}
.animepost .animposx:hover .content-thumb .ply{visibility:visible;opacity:1}
.animepost .animposx .content-thumb .ply i{color:#fff;font-size:32px;top:44%;position:absolute;left:44%}
.animepost .animposx .content-thumb img{width:100%;height:100%;top:0;position:absolute;object-fit:cover}
.animepost .animposx .content-thumb .type{position:absolute;left:5px;z-index:1;padding:5px;font-size:12px;font-weight:500;color:#fff;background:var(--color_primary);bottom:5px;text-transform:uppercase;border-radius:2px}
.animepost .animposx:hover .content-thumb .type,.animepost .animposx:hover .content-thumb .score{display:none}
.animepost .animposx .content-thumb .score{position:absolute;right:5px;z-index:1;padding:5px;font-size:12px;font-weight:500;bottom:5px;background:rgba(0,0,0,.8);color:rgba(255,255,255,.9);border-radius:3px}
.animepost .animposx .content-thumb .score i{color:#ffd600}
.animepost .animposx .data{font-size:13px;color:#666;height:78px}
.animepost .animposx .title{font-size:14px;overflow:hidden;bottom:0;line-height:21px;width:100%;color:#222d34;padding-top:8px;font-weight:500;display:block;text-overflow:ellipsis;white-space:nowrap}
.animepost .animposx .data h2{font-size:14px;font-weight:500;margin:0}
.animepost .animposx .data .type{margin-top:6px;color:#999}
.relat .animepost .stooltip{display:none;position:absolute;top:7px;width:312px;height:219px;border:1px solid #eceff5;-webkit-transition:0.2s;-moz-transition:0.2s;transition:0.2s;z-index:2}
.stooltip .title{position:relative;float:left;width:100%}
.stooltip .title h4{float:left;width:100%;padding:13px;padding-bottom:10px;padding-right:50px;font-weight:500;font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0}
.stooltip .metadata{background:#f5f7fa}
.stooltip .metadata{width:100%;float:left;padding:10px 13px;font-size:12px}
.stooltip .metadata span.skor{background:#ffc107;color:#000}
.stooltip .metadata span.skor{padding:5px 10px;font-weight:500;float:left}
.stooltip .metadata span{padding:5px 10px;float:left}
.stooltip .ttls{padding:13px;float:left;width:100%;height:85px;border-bottom:solid 1px #eceff5;line-height:20px;font-size:12px;overflow:hidden}
.stooltip .genres{float:left;width:100%;height:40px;padding:14px 10px;line-height:initial}
.stooltip .genres .mta{width:100%;height:15px;float:left;overflow:hidden}
.stooltip .genres .mta a{float:left;padding:0 12px;font-size:12px;font-weight:500;border-right:solid 1px #ddd;color:#222d34}
#pagination{margin-top:20px;text-align:center}
.page-button{margin:0 5px;padding:5px 10px;cursor:pointer}
#pagination span{display:inline-block;padding:9px 16px!important;margin:5px;color:#333;border-radius:2px;border:1px solid #eceff5}
.page-button[disabled]{cursor:default;background-color:var(--color_primary)!important;color:#fff!important}
#pagination .page-button{display:inline-block;padding:9px 16px!important;margin:5px;color:#333;border-radius:2px;border:1px solid #eceff5;background:none}
.letterlist{text-align:center;padding:10px;margin-bottom:20px;border-bottom:1px solid #f1f1f1;padding-bottom:20px;padding-top:20px}
.letterlist a{text-align:center;display:inline-block;padding:5px 8px;margin:4px;color:#555;border-radius:3px;font-weight:400;font-size:14px;background:#f5f7fa;border:1px solid #f5f7fa;text-transform:capitalize}
.letterlist a:hover{background:var(--color_primary);color:#fff}
.listpst{overflow:hidden}
.listbar{position:relative;margin-bottom:25px;border-bottom:1px solid #f1f1f1;padding-bottom:25px}
.listabj{display:block;margin-bottom:8px;border-bottom:0;overflow:hidden}
.listabj a{color:var(--color_primary);font-weight:700;font-size:18px;padding:5px 15px;display:inline-block;text-transform:capitalize}
.listttl{line-height:25px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listttl ul{padding-left:33px;margin:0;color:var(--color_primary)}
.listttl ul li{width:50%;padding-right:15px;list-style-type:disc;float:left}
.listttl a{font-size:14px;color:#333;text-overflow:ellipsis;overflow:hidden;white-space:normal;font-weight:400}
.listttl a:hover{color:var(--color_primary)}
.mode_anime_list_samehadaku{margin-top:20px;text-align:right;padding:0 20px}
.mode_anime_list_samehadaku span{cursor:pointer;display:inline-block;line-height:28px;padding:0 10px;font-weight:300;white-space:nowrap;font-size:13px;color:#FFF;background:var(--danger_color);border-radius:30px}

@media only screen and (min-width: 900px) {
  .relat .animepost .stooltip{background:#fff;box-shadow:0 10px 5px -7px rgba(0,0,0,.09)}
  .relat .animepost:hover>.stooltip{display:block}
  .stooltip.left{right:-300px}
  .stooltip.right{left:-300px}
  .stooltip{opacity:0}
  .stooltip.left{transform:translateX(0px);transition:opacity 0.3s ease,transform 0.5s ease}
  .stooltip.right{transform:translateX(19px);transition:opacity 0.3s ease,transform 0.5s ease}
  .animepost:hover .stooltip.left{opacity:1;transform:translateX(0)}
  .animepost:hover .stooltip.right{opacity:1;transform:translateX(19px)}
  /* Keyframe animation to animate the X position change */
  @keyframes tooltipSlideleft{0%{transform:translateX(0px);opacity:0}100%{transform:translateX(19px);opacity:1}}
  @keyframes tooltipSlideright{0%{transform:translateX(0px);opacity:0}100%{transform:translateX(-19px);opacity:1}}
  /* Apply the animation to the left and right tooltips */
  .stooltip.left{animation:tooltipSlideleft 0.5s forwards}
  .stooltip.right{animation:tooltipSlideright 0.5s forwards}
}
@media only screen and (max-width: 768px) {
  .filter_act.genres .tax_fil,.animepost{width:var(--w-4)}
  .gnr,.filtersearch .filter_tax.active{display:block}
  .filtersearch .filter_tax{display:none}
  .listttl ul li{width:100%}
}
@media only screen and (max-width: 540px) {
  .filter_act.genres .tax_fil,.animepost{width:var(--w-3)}
}
@media only screen and (max-width: 425px) {
  .filter_act.genres .tax_fil,.animepost{width:var(--w-2)}
}

  • Pasang kode javascript di bawah </body>

    (function () {
  // Settings
  let maxResults = 10;
  let label = "Series" || false;
  let No_Thumbnail = "https://1.bp.blogspot.com/-XSp30PahyTM/YK37Rq_-M7I/AAAAAAAABCc/01K0sUhw-2YI7vr48wqMIAVoMLDEUdK2gCLcBGAsYHQ/s0/No%2BImage%2BBerkas%2BKita.jpg";
  let filterStatus = ["All", "Currently Airing", "Finished Airing"]; //do not change or modify
  let filterType = ["All", "TV", "OVA", "ONA", "Special", "Movie"];
  let filterSort = ["A-Z", "Z-A", "Latest Update", "Latest Added"]; //do not change or modify
  let filterGenre = ["Action", "Adult-Cast", "Adventure", "Anthropomorphic", "Award-Winning", "CGDCT", "Childcare", "Comedy", "Delinquents", "Dementia", "Demons", "Detective", "Drama", "Ecchi", "Fantasy", "Gag-Humor", "GagHumor", "Game", "Gore", "Gourmet", "Harem", "High-Stakes-Game", "Historical", "Horror", "Isekai", "Iyashikei", "Kids", "Love-Polygon", "Magic", "Mahou-Shoujo", "Martial-Arts", "Mecha", "Medical", "Military", "Music", "Mystery", "Mythology", "Organized-Crime", "Otaku-Culture", "Parody", "Performing-Arts", "Police", "Psychological", "Reincarnation", "Romance", "Romantic-Subtext", "Romantic1", "Samurai", "School", "Sci-Fi", "Seinen", "Shoujo", "Shoujo-Ai", "Shounen", "Showbiz", "Slice-Of-Life", "Space", "Sports", "Spring-2023", "Strategy-Game", "Subtext", "Super-Power", "Supernatural", "Survival", "Suspense", "Team", "Team-Sports", "Thriller", "Time-Travel", "Vampire", "Video-Game", "Vidiogame", "Visual-Arts", "Work-Life", "Workplace"];
  
  let text_mode = "Text Mode";
  let image_mode = "Text Image";
  
  let array=[];void 0===window.c_anime_list_text&&(window.c_anime_list_text=()=>{document.querySelector(".relat")&&anime_list_text.run("/feeds/posts/default"+(0==label?"":"/-/"+label),t=>get_anime_list_text(t)),document.querySelector("#pagination").innerHTML=""});const handleShowGenreClick=()=>{var t=document.querySelector(".gnr");document.querySelector(".filter_tax").classList.add("active"),t.style.display="none"},createFilterForm=(window.handleKeyPress=t=>{"Enter"===t.key&&(t.preventDefault(),window.applyFilters())},()=>{let l='<form id="filter-form"><table width="100%"><tbody>';l+='<tr><td class="filter_title">Title</td><td class="filter_act"><input type="text" class="input" name="title" autocomplete="off" onkeypress="handleKeyPress(event)"></td></tr><tr><td class="filter_title">Status</td><td class="filter_act">',filterStatus.forEach((t,e)=>{e=0===e?"checked":"";l+=`<label class="radio">${t} <input type="radio" value="${"All"===t?"":t}" name="status" ${e}> <span class="checkfilx"></span></label>`}),l+='</td></tr><tr><td class="filter_title">Type</td><td class="filter_act">',filterType.forEach((t,e)=>{e=0===e?"checked":"";l+=`<label class="radio">${t} <input type="radio" value="${"All"===t?"":t}" name="type" ${e}> <span class="checkfilx"></span></label>`}),l+='</td></tr><tr><td class="filter_title">Sort By</td><td class="filter_act"><ul class="filter-sort">',filterSort.forEach((t,e)=>{var a=t.replace(/\s/g,"").toLowerCase(),e=0===e?"checked":"";l+=`<li><input type="radio" value="${a}" name="sort" ${e} id="sort_${a}"><label for="sort_${a}">${t}</label></li>`}),l+='</ul></td></tr><tr class="filter_tax"><td class="filter_title">Genre</td><td class="filter_act genres">',filterGenre.forEach(t=>{var e=t.toLowerCase().replace(/\s/g,"-");l+=`<label class="tax_fil">${t} <input type="checkbox" name="genre[]" value="${e}"> <span class="checkfil"></span></label>`}),l+='</td></tr></tbody></table><div class="btnfilter"><button type="button" class="filterbtn" onclick="applyFilters()">Search</button><div class="gnr">Show Genre</div></div></form>',document.querySelector(".filtersearch").innerHTML=l,document.querySelector(".gnr").addEventListener("click",handleShowGenreClick)}),displayPosts=(window.applyFilters=()=>{var t=document.getElementById("filter-form"),t=new FormData(t);const i=t.get("title").toLowerCase().trim();var e=t.get("status");const n=t.get("type");var a=t.get("sort");const o=t.getAll("genre[]");const r={"Currently Airing":"Ongoing","Finished Airing":"Completed"}[e]||e;var l=array.filter(e=>{var t=!i||e.title.toLowerCase().includes(i),a=!r||e.label.includes(r),l=!n||e.label.includes(n),s=!(0<o.length)||o.every(t=>e.label.map(t=>t.toLowerCase().replace(/\s/g,"-")).includes(t));return t&&a&&l&&s});switch(a){case"a-z":l.sort((t,e)=>t.title.localeCompare(e.title));break;case"z-a":l.sort((t,e)=>e.title.localeCompare(t.title));break;case"latestupdate":l.sort((t,e)=>new Date(e.updated)-new Date(t.updated));break;case"latestadded":l.sort((t,e)=>new Date(e.published)-new Date(t.published))}loadPosts(l,1,maxResults)},(t,e,a)=>{var l=document.getElementById("posts-container");let n="";t.slice(e,e+a).forEach(t=>{var e,a=t.label.find(t=>/^\d+(\.\d{1,2})$/.test(t))||"0.0",l=t.label.find(t=>filterType.includes(t)),s=t.label.find(t=>["Completed","Delay","Ongoing"].includes(t)),i=t.label.filter(e=>filterGenre.some(t=>t==e)).map(t=>`<a href="/search/label/${t}" rel="tag">${t}</a>`).join("");"content"in t&&((e=document.createElement("div")).innerHTML=t.content,e=e.querySelector("#Sinopsis"),content=e?e.innerText.slice(0,200):"No Synopsis"),n+=`<article class="post-item" id="post-${t.id}"><div class="animepost"><div class="animposx"><a rel="${t.id}" href="${t.link}" title="${t.title}" alt="${t.title}" data-wpel-link="internal"><div class="content-thumb"><div class="ply"><i class="fa fa-play"></i></div><img fetchpriority="high" src="${t.image}" class="anmsa" title="${t.title}" alt="${t.title}" itemprop="image">${l?`<div class="type ${l}">${l}</div>`:""}<div class="score"><i class="fa fa-star"></i> ${a}</div></div><div class="data"><div class="title"><h2>${t.title}</h2></div>${s?`<div class="type">${s}</div>`:""}</div></a></div><div class="stooltip"><div class="title"><h4>${t.title}</h4></div><div class="metadata"> <span class="skor"><i class="fa fa-star"></i> ${a}</span> ${l?`<span>${l}</span>`:""}</div><div class="ttls">${content}</div><div class="genres"><div class="mta"> ${i}</div></div></div></div></div>`}),l.innerHTML=n,document.querySelector(".mode_anime_list_samehadaku").innerHTML=`<span id="text-mode-btn" onclick="switchToTextMode()">${text_mode}</span><span id="text-image-btn" style="display: none;" onclick="switchToTextImage()">${image_mode}</span>`}),displayPagination=(t,e,a,l)=>{var s=document.getElementById("pagination"),t=Math.ceil(t/a),i=Math.floor(e/a)+1;let n="";var e=Math.max(1,i-1),o=Math.min(t,i+1);n+=`<span>Page ${i} of ${t}</span>`,1<i&&(n=n+'<button class="page-button" data-page="1">&laquo;</button>'+`<button class="page-button" data-page="${i-1}">&lt;</button>`);for(let t=e;t<=o;t++)n+=`<button class="page-button" data-page="${t}" ${t===i?"disabled":""}>${t}</button>`;i<t-1&&(n=n+"<span>...</span>"+`<button class="page-button" data-page="${t}">${t}</button>`),i<t&&(n=n+`<button class="page-button" data-page="${i+1}">&gt;</button>`+`<button class="page-button" data-page="${t}">&raquo;</button>`),s.innerHTML=n,document.querySelectorAll(".page-button").forEach(e=>{e.addEventListener("click",()=>{var t=parseInt(e.getAttribute("data-page"));loadPosts(l,t,a)})})},assignTooltipPosition=()=>{var t=()=>{var t=document.querySelector(".relat");if(t){let s=t.getBoundingClientRect();window.matchMedia("(min-width: 900px)").matches?t.querySelectorAll(".animepost").forEach((t,e)=>{var a=t.getBoundingClientRect(),a=parseInt(s.width/a.width),l=a%2==0?a/2:(a-1)/2+1,t=t.querySelector(".stooltip");t.classList.remove("left","right"),e%a<=l-1?t.classList.add("left"):t.classList.add("right")}):t.querySelectorAll(".animepost .stooltip").forEach(t=>{t.classList.remove("left","right")})}};t(),window.addEventListener("resize",t)},loadPosts=(t,e,a)=>{e=(e-1)*a;displayPosts(t,e,a),displayPagination(t.length,e,a,t),assignTooltipPosition()},post_list_samehadaku=t=>{array=t.sort((t,e)=>t.title.localeCompare(e.title)),loadPosts(array,1,maxResults),createFilterForm()},bloggerSitemap=new BloggerSitemap({noImage:No_Thumbnail,sizeImage:"s320-rw"});bloggerSitemap.run("/feeds/posts/default"+(0==label?"":"/-/"+label),post_list_samehadaku);let anime_list_text=new BloggerSitemap;const get_anime_list_text=t=>{var e=document.querySelector(".relat");let a={};t=t.filter(t=>!a[t.id]&&(a[t.id]=!0)).sort((t,e)=>t.title.localeCompare(e.title));let l="",s=[];t.forEach(t=>{let e=t.title[0].toLowerCase();var a=s.findIndex(t=>t.abjad===e);-1===a?s.push({abjad:e,posts:[t]}):s[a].posts.push(t)});t=s.map(t=>t.abjad);let i="";s.forEach(t=>{i+=`<a href="#${t.abjad}">${t.abjad}</a>`}),[...new Set(t)].forEach(e=>{l+=`<div class="listbar"><div class="listabj"><a name="${e}">${e}</a></div><div class="listttl"><ul>`,s.filter(t=>t.abjad===e).forEach(t=>{t.posts.forEach(t=>{l+=`<li><a href="${t.link}">${t.title}</a></li>`})}),l+="</ul></div></div>"}),e.innerHTML=`<div class="letterlist">${i}</div> <div class="listpst">${l}</div>`};window.switchToTextMode=()=>{document.getElementById("text-mode-btn").style.display="none",document.getElementById("text-image-btn").style.display="inline-block",c_anime_list_text()},window.switchToTextImage=()=>{document.getElementById("text-image-btn").style.display="none",document.getElementById("text-mode-btn").style.display="inline-block",applyFilters()};
})();

    script yang tidak di minify.

    (function() {
  // Settings
  let maxResults = 10;
  let label = "Series" || false;
  let No_Thumbnail = "https://1.bp.blogspot.com/-XSp30PahyTM/YK37Rq_-M7I/AAAAAAAABCc/01K0sUhw-2YI7vr48wqMIAVoMLDEUdK2gCLcBGAsYHQ/s0/No%2BImage%2BBerkas%2BKita.jpg";
  let filterStatus = ["All", "Currently Airing", "Finished Airing"]; //do not change or modify
  let filterType = ["All", "TV", "OVA", "ONA", "Special", "Movie"];
  let filterSort = ["A-Z", "Z-A", "Latest Update", "Latest Added"]; //do not change or modify
  let filterGenre = ["Action", "Adult-Cast", "Adventure", "Anthropomorphic", "Award-Winning", "CGDCT", "Childcare", "Comedy", "Delinquents", "Dementia", "Demons", "Detective", "Drama", "Ecchi", "Fantasy", "Gag-Humor", "GagHumor", "Game", "Gore", "Gourmet", "Harem", "High-Stakes-Game", "Historical", "Horror", "Isekai", "Iyashikei", "Kids", "Love-Polygon", "Magic", "Mahou-Shoujo", "Martial-Arts", "Mecha", "Medical", "Military", "Music", "Mystery", "Mythology", "Organized-Crime", "Otaku-Culture", "Parody", "Performing-Arts", "Police", "Psychological", "Reincarnation", "Romance", "Romantic-Subtext", "Romantic1", "Samurai", "School", "Sci-Fi", "Seinen", "Shoujo", "Shoujo-Ai", "Shounen", "Showbiz", "Slice-Of-Life", "Space", "Sports", "Spring-2023", "Strategy-Game", "Subtext", "Super-Power", "Supernatural", "Survival", "Suspense", "Team", "Team-Sports", "Thriller", "Time-Travel", "Vampire", "Video-Game", "Vidiogame", "Visual-Arts", "Work-Life", "Workplace"];

  let text_mode = "Text Mode";
  let image_mode = "Text Image";

  let array = [];
  void 0 === window.c_anime_list_text && (window.c_anime_list_text = () => {
    document.querySelector(".relat") && anime_list_text.run("/feeds/posts/default" + (0 == label ? "" : "/-/" + label), t => get_anime_list_text(t)), document.querySelector("#pagination").innerHTML = ""
  });
  const handleShowGenreClick = () => {
      var t = document.querySelector(".gnr");
      document.querySelector(".filter_tax").classList.add("active"), t.style.display = "none"
    },
    createFilterForm = (window.handleKeyPress = t => {
      "Enter" === t.key && (t.preventDefault(), window.applyFilters())
    }, () => {
      let l = '<form id="filter-form"><table width="100%"><tbody>';
      l += '<tr><td class="filter_title">Title</td><td class="filter_act"><input type="text" class="input" name="title" autocomplete="off" onkeypress="handleKeyPress(event)"></td></tr><tr><td class="filter_title">Status</td><td class="filter_act">', filterStatus.forEach((t, e) => {
        e = 0 === e ? "checked" : "";
        l += `<label class="radio">${t} <input type="radio" value="${"All"===t?"":t}" name="status" ${e}> <span class="checkfilx"></span></label>`
      }), l += '</td></tr><tr><td class="filter_title">Type</td><td class="filter_act">', filterType.forEach((t, e) => {
        e = 0 === e ? "checked" : "";
        l += `<label class="radio">${t} <input type="radio" value="${"All"===t?"":t}" name="type" ${e}> <span class="checkfilx"></span></label>`
      }), l += '</td></tr><tr><td class="filter_title">Sort By</td><td class="filter_act"><ul class="filter-sort">', filterSort.forEach((t, e) => {
        var a = t.replace(/\s/g, "").toLowerCase(),
          e = 0 === e ? "checked" : "";
        l += `<li><input type="radio" value="${a}" name="sort" ${e} id="sort_${a}"><label for="sort_${a}">${t}</label></li>`
      }), l += '</ul></td></tr><tr class="filter_tax"><td class="filter_title">Genre</td><td class="filter_act genres">', filterGenre.forEach(t => {
        var e = t.toLowerCase().replace(/\s/g, "-");
        l += `<label class="tax_fil">${t} <input type="checkbox" name="genre[]" value="${e}"> <span class="checkfil"></span></label>`
      }), l += '</td></tr></tbody></table><div class="btnfilter"><button type="button" class="filterbtn" onclick="applyFilters()">Search</button><div class="gnr">Show Genre</div></div></form>', document.querySelector(".filtersearch").innerHTML = l, document.querySelector(".gnr").addEventListener("click", handleShowGenreClick)
    }),
    displayPosts = (window.applyFilters = () => {
      var t = document.getElementById("filter-form"),
        t = new FormData(t);
      const i = t.get("title").toLowerCase().trim();
      var e = t.get("status");
      const n = t.get("type");
      var a = t.get("sort");
      const o = t.getAll("genre[]");
      const r = {
        "Currently Airing": "Ongoing",
        "Finished Airing": "Completed"
      } [e] || e;
      var l = array.filter(e => {
        var t = !i || e.title.toLowerCase().includes(i),
          a = !r || e.label.includes(r),
          l = !n || e.label.includes(n),
          s = !(0 < o.length) || o.every(t => e.label.map(t => t.toLowerCase().replace(/\s/g, "-")).includes(t));
        return t && a && l && s
      });
      switch (a) {
        case "a-z":
          l.sort((t, e) => t.title.localeCompare(e.title));
          break;
        case "z-a":
          l.sort((t, e) => e.title.localeCompare(t.title));
          break;
        case "latestupdate":
          l.sort((t, e) => new Date(e.updated) - new Date(t.updated));
          break;
        case "latestadded":
          l.sort((t, e) => new Date(e.published) - new Date(t.published))
      }
      loadPosts(l, 1, maxResults)
    }, (t, e, a) => {
      var l = document.getElementById("posts-container");
      let n = "";
      t.slice(e, e + a).forEach(t => {
        var e, a = t.label.find(t => /^\d+(\.\d{1,2})$/.test(t)) || "0.0",
          l = t.label.find(t => filterType.includes(t)),
          s = t.label.find(t => ["Completed", "Delay", "Ongoing"].includes(t)),
          i = t.label.filter(e => filterGenre.some(t => t == e)).map(t => `<a href="/search/label/${t}" rel="tag">${t}</a>`).join("");
        "content" in t && ((e = document.createElement("div")).innerHTML = t.content, e = e.querySelector("#Sinopsis"), content = e ? e.innerText.slice(0, 200) : "No Synopsis"), n += `<article class="post-item" id="post-${t.id}"><div class="animepost"><div class="animposx"><a rel="${t.id}" href="${t.link}" title="${t.title}" alt="${t.title}" data-wpel-link="internal"><div class="content-thumb"><div class="ply"><i class="fa fa-play"></i></div><img fetchpriority="high" src="${t.image}" class="anmsa" title="${t.title}" alt="${t.title}" itemprop="image">${l?`<div class="type ${l}">${l}</div>`:""}<div class="score"><i class="fa fa-star"></i> ${a}</div></div><div class="data"><div class="title"><h2>${t.title}</h2></div>${s?`<div class="type">${s}</div>`:""}</div></a></div><div class="stooltip"><div class="title"><h4>${t.title}</h4></div><div class="metadata"> <span class="skor"><i class="fa fa-star"></i> ${a}</span> ${l?`<span>${l}</span>`:""}</div><div class="ttls">${content}</div><div class="genres"><div class="mta"> ${i}</div></div></div></div></div>`
      }), l.innerHTML = n, document.querySelector(".mode_anime_list_samehadaku").innerHTML = `<span id="text-mode-btn" onclick="switchToTextMode()">${text_mode}</span><span id="text-image-btn" style="display: none;" onclick="switchToTextImage()">${image_mode}</span>`
    }),
    displayPagination = (t, e, a, l) => {
      var s = document.getElementById("pagination"),
        t = Math.ceil(t / a),
        i = Math.floor(e / a) + 1;
      let n = "";
      var e = Math.max(1, i - 1),
        o = Math.min(t, i + 1);
      n += `<span>Page ${i} of ${t}</span>`, 1 < i && (n = n + '<button class="page-button" data-page="1">&laquo;</button>' + `<button class="page-button" data-page="${i-1}">&lt;</button>`);
      for (let t = e; t <= o; t++) n += `<button class="page-button" data-page="${t}" ${t===i?"disabled":""}>${t}</button>`;
      i < t - 1 && (n = n + "<span>...</span>" + `<button class="page-button" data-page="${t}">${t}</button>`), i < t && (n = n + `<button class="page-button" data-page="${i+1}">&gt;</button>` + `<button class="page-button" data-page="${t}">&raquo;</button>`), s.innerHTML = n, document.querySelectorAll(".page-button").forEach(e => {
        e.addEventListener("click", () => {
          var t = parseInt(e.getAttribute("data-page"));
          loadPosts(l, t, a)
        })
      })
    },
    assignTooltipPosition = () => {
      var t = () => {
        var t = document.querySelector(".relat");
        if (t) {
          let s = t.getBoundingClientRect();
          window.matchMedia("(min-width: 900px)").matches ? t.querySelectorAll(".animepost").forEach((t, e) => {
            var a = t.getBoundingClientRect(),
              a = parseInt(s.width / a.width),
              l = a % 2 == 0 ? a / 2 : (a - 1) / 2 + 1,
              t = t.querySelector(".stooltip");
            t.classList.remove("left", "right"), e % a <= l - 1 ? t.classList.add("left") : t.classList.add("right")
          }) : t.querySelectorAll(".animepost .stooltip").forEach(t => {
            t.classList.remove("left", "right")
          })
        }
      };
      t(), window.addEventListener("resize", t)
    },
    loadPosts = (t, e, a) => {
      e = (e - 1) * a;
      displayPosts(t, e, a), displayPagination(t.length, e, a, t), assignTooltipPosition()
    },
    post_list_samehadaku = t => {
      array = t.sort((t, e) => t.title.localeCompare(e.title)), loadPosts(array, 1, maxResults), createFilterForm()
    },
    bloggerSitemap = new BloggerSitemap({
      noImage: No_Thumbnail,
      sizeImage: "s320-rw"
    });
  bloggerSitemap.run("/feeds/posts/default" + (0 == label ? "" : "/-/" + label), post_list_samehadaku);
  let anime_list_text = new BloggerSitemap;
  const get_anime_list_text = t => {
    var e = document.querySelector(".relat");
    let a = {};
    t = t.filter(t => !a[t.id] && (a[t.id] = !0)).sort((t, e) => t.title.localeCompare(e.title));
    let l = "",
      s = [];
    t.forEach(t => {
      let e = t.title[0].toLowerCase();
      var a = s.findIndex(t => t.abjad === e); - 1 === a ? s.push({
        abjad: e,
        posts: [t]
      }) : s[a].posts.push(t)
    });
    t = s.map(t => t.abjad);
    let i = "";
    s.forEach(t => {
      i += `<a href="#${t.abjad}">${t.abjad}</a>`
    }), [...new Set(t)].forEach(e => {
      l += `<div class="listbar"><div class="listabj"><a name="${e}">${e}</a></div><div class="listttl"><ul>`, s.filter(t => t.abjad === e).forEach(t => {
        t.posts.forEach(t => {
          l += `<li><a href="${t.link}">${t.title}</a></li>`
        })
      }), l += "</ul></div></div>"
    }), e.innerHTML = `<div class="letterlist">${i}</div> <div class="listpst">${l}</div>`
  };
  window.switchToTextMode = () => {
    document.getElementById("text-mode-btn").style.display = "none", document.getElementById("text-image-btn").style.display = "inline-block", c_anime_list_text()
  }, window.switchToTextImage = () => {
    document.getElementById("text-image-btn").style.display = "none", document.getElementById("text-mode-btn").style.display = "inline-block", applyFilters()
  };
})();
    Name Deskripsi
    maxResults Untuk mengatur jumlah postingan yang ingin ditampikan dalam 1 halaman.
    label Untuk menampilkan postingan dengan label yang sudah ditentukan.
    No_Thumbnail Untuk custom tidak ada thumbnail.

  • Dan Terakhir tambahkan tag html ini untuk menampilkan kodenya.

    <div class="box_anime_list_samehadaku">
  <div class="filtersearch" style="overflow:auto!important"></div>
  <div class="mode_anime_list_samehadaku"></div>
  <div class="relat" id="posts-container"></div>
  <div id="pagination"></div>
</div>

Comments

  1. YukineSeptember 14, 2024

    Lupa siapa yang request. hehehe

    ReplyDelete
    Replies
    1. YukineSeptember 15, 2024

      versi Dark mode, harus atur css nya sendiri.

      Delete
  2. IrpnrzkySeptember 17, 2024

    Thanks min , akhirnya dibuatin

    ReplyDelete
  3. IrpnrzkyOctober 03, 2024

    https://ozonenime.blogspot.com/p/blog-page_33.html?m=1


    - Error min buat animestream udah taruh di atas dan dibawah juga sama aja

    ReplyDelete
  4. IrpnrzkyOctober 04, 2024

    This comment has been removed by the author.

    ReplyDelete
  5. IrpnrzkyOctober 04, 2024

    This comment has been removed by the author.

    ReplyDelete
  6. IrpnrzkyOctober 04, 2024

    https://ozonenime.blogspot.com/p/anime-list.html?m=1


    Mau nanya cara mengatasi text mode / text image tidak berfungsi bagaimana

    ReplyDelete
    Replies
    1. YukineOctober 04, 2024

      ada 2 kode yang kamu tambahkan dalam kode Owl Carousel 2 dan diatas </body>

      Delete
    2. YukineOctober 04, 2024

      jika kesulitan bisa tarus css dan javascript nya dalam postingan anime listnya.

      Delete