Membuat Episode List Dengan Tombol Download - Blogger

Membuat Episode List Dengan Tombol Download - Blogger

Pertama pasang css di atag tag ]]></b:skin>.

#epX {
  --postBg: #fff;
  --postText: #000;
  --bodyBg: #fafafa;
  --bodyText: #555;
  --linkColor: #333;
  --border: #f1f1f1;
  --hoverBg: #6e4f9d;
  --hoverText: #fff;
}

/*Color Dark Mode*/
.darkmode #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 bagian yang di tandai dengan nama class darkmode kalian dan jangan lupa untuk mengatur warna nya.

Kedua pasang script berikut di atas tag </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 bagian yang di tandai dengan nama label postingan info. berguna untuk mengecualikan post info dari list.

Selanjut nya pasang html pemanggil ini dimana saja.

<div id='epX' data-label='NAMA_LABEL' data-title='Judul Chapter List'></div>
Ganti bagian yang di tandai sesuai keterangan.

Dan juga, jika ingin menampilkan tombol download harus menambahkan tag ini kedalam post chapter atau episode.

<div><a id="downloadBtn" href="LINK_DOWNLOAD"></a></div>

Artikel Terkait

7 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

  • Berkas Kita
    14 September 2022 20.50
    Profil: https://www.blogger.com/profile/05392949523370725401
  • Wernayasa
    15 September 2022 14.29
    Profil: https://www.blogger.com/profile/09171272848542294839
    css nya sangat rapi, mudah di custom warnanya
    • Baca komik
      24 September 2022 18.41
      Profil: https://www.blogger.com/profile/05583155505950172982
      Admin cek gmail
  • Gate
    22 September 2022 23.23
    Profil: https://www.blogger.com/profile/13756915173998753292
    Bikin untuk blog novel ding min, bukan cuma chapter tapi ada volume nya, jadi misal volume 1 chapter 1
    • Шош. Сом
      30 September 2022 15.58
      Profil: https://www.blogger.com/profile/11131198046075365419
      di dalam script cari ini.
      ["Episode","Eps","Chapter","Ch.","Ep"]
      tambahkan di situ "volume".
      ["Episode","Eps","Chapter","Ch.","Ep", "Volume", "Vol"]
  • Baca komik
    24 September 2022 19.51
    Profil: https://www.blogger.com/profile/05583155505950172982
    Bang bagian list chapter ga bisa di tambahkan? Di situ batasanya hanya 150 ya
    • Шош. Сом
      30 September 2022 15.59
      Profil: https://www.blogger.com/profile/11131198046075365419
      seharus nya tanpa batas.