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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsQvVf8DMHVWLyZDGuzWdc4_X6qYRsMxEhzLMWdZY9ZEWN6A2SSGVUXYjMnKnPqxzfz0xHZfoJM4JO2G8w-UNb6njrTpb5SosjvSjGWoL8UVL0-cXEwVOCte-AiQ2Ac2RjoJUgBzuYkLQb/s0/No+Image+Berkas+Kita.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">«</button>'+`<button class="page-button" data-page="${i-1}"><</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}">></button>`+`<button class="page-button" data-page="${t}">»</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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsQvVf8DMHVWLyZDGuzWdc4_X6qYRsMxEhzLMWdZY9ZEWN6A2SSGVUXYjMnKnPqxzfz0xHZfoJM4JO2G8w-UNb6njrTpb5SosjvSjGWoL8UVL0-cXEwVOCte-AiQ2Ac2RjoJUgBzuYkLQb/s0/No+Image+Berkas+Kita.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">«</button>' + `<button class="page-button" data-page="${i-1}"><</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}">></button>` + `<button class="page-button" data-page="${t}">»</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>
- Error min buat animestream udah taruh di atas dan dibawah juga sama aja
//kode
//]]></script>
Mau nanya cara mengatasi text mode / text image tidak berfungsi bagaimana
e.querySelector(".Sinopsis"), mengambil dari Class Sinopsis