Cara Membuat Table List Download Berdasarkan Episode/Chapter di Blog - Table list download berdasarkan episode atau chapter yang akan saya bagikan di artikel kali ini biasanya digunakan pada situs-situs streaming film anime yang memiliki banyak episode atau chapter.
Bagi kamu yang memiliki website streaming film anime, mungkin tutorial membuat table list download berdasarkan chapter/episode ini akan berguna supaya tampilan website kamu menjadi lebih rapih dan profesional.
Selain itu, table list download ini juga dapat memudahkan para pengunjung ketika mereka ingin mengunduh film berdasarkan episode atau chapter. Untuk demo atau tampilannya kamu bisa lihat langsung pada table list download di yang sudah saya buat di bawah ini.
Cara Membuat Table List Download di Blog Berdasarkan Episode atau Chapter
- Masuk ke dashboard Blogger kamu
- Masuk ke menu Theme » Edit HTML
- Kemudian salin dan taruh CSS berikut tepat di atas tag </style> atau ]]></b:skin>
#epX { --postBg: #fff; --postText: #000; --bodyBg: #fafafa; --bodyText: #555; --linkColor: #333; --border: #f1f1f1; --hoverBg: #6e4f9d; --hoverText: #fff; } /* CSS Untuk Mode Gelap */ .drK #epX { --postBg: #fff; --postText: #000; --bodyBg: #fafafa; --bodyText: #555; --linkColor: #333; --border: #f1f1f1; --hoverBg: #6e4f9d; --hoverText: #fff; } #epX{line-height:1.5;background:var(--postBg);border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;margin-bottom:18px;overflow:hidden;-webkit-box-shadow:0 2px 3px rgb(0 0 0 / 10%);-khtml-box-shadow:0 2px 3px rgba(0,0,0,.1);-moz-box-shadow:0 2px 3px rgba(0,0,0,.1);-ms-box-shadow:0 2px 3px rgba(0,0,0,.1);-o-box-shadow:0 2px 3px rgba(0,0,0,.1);box-shadow:0 2px 3px rgb(0 0 0 / 10%)}#epX *{box-sizing:border-box}#epX .releases{position:relative;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--border);padding:8px 15px}#epX .releases h2{font-size:15px;color:var(--postText);line-height:20px;font-weight:500;margin:0;position:relative}#epX .search-chapter{overflow:hidden;position:relative;margin:15px}#epX #searchchapter{width:100%;color:va(--bodyText);font-family:inherit;padding:7px 10px;outline:0;background:var(--bodyBg);border:1px solid var(--border);border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}#epX .clstyle{padding:0;list-style:none;overflow:auto;max-height:297px;margin:15px}#epX .chbox{display:-moz-box;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;justify-content:space-between;align-items:center;overflow:hidden;padding:5px 10px;border:1px solid var(--border);font-size:14px;margin:0 5px;margin-left:0;margin-bottom:10px;position:relative;border-radius:5px}#epX .chbox:hover{background-color:var(--hoverBg)}#epX .eph-num{flex:1 0 auto}#epX a{color:var(--linkColor);text-decoration:none;transition:color .1s linear;-moz-transition:color .1s linear;-webkit-transition:color .1s linear}#epX .chbox:hover a{color:var(--hoverText)}#epX .eph-num span{display:block}#epX .chapternum{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-weight:400}#epX .chapterdate{font-size:12px;color:var(--bodyText)}#epX .dt{font-size:20px;margin-top:8px;margin-right:5px}#epX .dt a{color:var(--hoverBg)}#epX .chbox:hover .chapterdate,#epX .chbox:hover .dt a{color:var(--hoverText)}Ganti tulisan yang ditandai dengan warna yang kamu inginkan.
- Setelah itu salin dan taruh script berikut tepat di atas tag penutup </body>
<script>/*<![CDATA[*/ const epX={ arr:new Array, config: { max:150, start:1, labelMain:"Series" }, getDate:e=>{if(/([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/.test(e)){var t=e,a=t.substring(0,4),r=t.substring(5,7),i=t.substring(8,10),n=new Array;return n[1]="Jan",n[2]="Feb",n[3]="Mar",n[4]="Apr",n[5]="May",n[6]="Jun",n[7]="Jul",n[8]="Aug",n[9]="Sep",n[10]="Oct",n[11]="Nov",n[12]="Dec",i+" "+n[parseInt(r,10)]+" "+a}return!1},sort:e=>e.sort((e,t)=>e.title.localeCompare(t.title,void 0,{numeric:!0})),compile:function(){let e=this.sort(this.arr).reverse(),t=this.config,a="";$.each(e,function(e,r){if(!r.cat.some(e=>e==t.labelMain)){let e=["Episode","Eps","Chapter","Ch.","Ep"].find(e=>r.title.includes(e)),t=e?r.title.split(e)[1].replace(/[^0-9\.-]+/g,""):r.title.replace(/\D/g,"");if(a+=`<li data-numb="${t}"><div class="chbox"><div class="eph-num"><a href="${r.url}"><span class="chapternum">${e?e+" "+t:r.title}</span><span class="chapterdate">${r.date}</span></a></div>`,r.content){let e=$(r.content.replaceAll("src=","scr=")).find("#downloadBtn");0!=e.length&&(a+=`<div class="dt"><a href="${e.attr("href")}" rel="nofollow" class="dload" target="_blank"><i class="fa-solid fa-cloud-arrow-down"></i></a></div>`)}a+="</div></li>"}}),$("#epX").append(`<div class="releases"><h2>${$("#epX").data("title")||t.title||"Episode List"}</h2></div>`),e.length>=25&&$("#epX").append(`<div class="search-chapter"><input id="searchchapter" onkeyup="epX.search(this)" type="text" placeholder="${t.placeholder||"Cari Chapter. Contoh: 25 atau 178"}" autocomplete="off"/></div>`),$("#epX").append(`<ul class="clstyle">${a}</ul>`)},jqCheck:()=>"function"==typeof jQuery,xhr:function(){const e=this,t=e.config;$.ajax({type:"get",url:`${t.site||""}/feeds/posts/default/-/${t.cat}`,data:{alt:"json","start-index":t.start,"max-results":t.max},dataType:"jsonp",success:a=>{"entry"in a.feed?($.each(a.feed.entry,(t,a)=>{e.arr.push({title:a.title.$t,date:e.getDate(a.published.$t),url:a.link.find(e=>"alternate"==e.rel).href,cat:a.category.map(e=>e.term),content:"content"in a&&a.content.$t})}),a.feed.entry.length>=t.max?(e.config.start+=e.config.max,e.xhr()):e.compile()):0!=e.arr.length&&e.compile()},error:()=>{$("#epX").html(`<p>${t.textError||"Error"}</p>`)}})},run:function(){return this.jqCheck()?0==$("#epX").length?"element tidak ada":(this.config.cat=$("#epX").data("label")||!1,0==this.config.cat?"Category Tidak ada":void this.xhr()):"jquery tidak ada"},search:e=>{let t=$(e),a=t.val().toUpperCase(),r=$("#epX .clstyle"),i=r.find("li");$.each(i,(e,t)=>{let r=$(t).data("numb").toString().toUpperCase();r.indexOf(a)>-1?$(t).show():$(t).hide()})}};epX.run(); /*]]>*/</script>Ganti tulisan yang ditandai dengan label yang kamu inginkan.
- Jika semuanya sudah, jangan lupa klik simpan.
- Untuk membuat table list download dalam postingan, gunakan kode HTML di bawah ini
<div> <a id="downloadBtn" <div id='epX' data-label='nama label' data-title='Judul Chapter/Episode'></div> </a> </div>Ubah nama label dan juga judul chapter/episode sesuai dengan judul film.
- Selesai!
Nah, itu dia tutorial cara membuat table list download berdasarkan episode/chapter di blog menggunakan CSS dan jQuery di blog. Semoga artikel ini bisa membantu dan bermanfaat. Jika ada yang ingin ditanyakan atau script tidak berfungsi, komen di bawah.
