Membuat Episode List Dengan Tombol Download - Blogger

Pertama pasang css di atag tag ]]></b:skin> . #epX { --postBg: #fff; --postText: #000; --bodyBg: #fafafa; --bodyText: #555; --linkCo…
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>
24
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; --linkCo…
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

24 komentar

  • 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> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Berkas Kita
    Wednesday, September 14, 2022
    Profile: https://www.blogger.com/profile/05392949523370725401
  • Wernayasa
    Thursday, September 15, 2022
    Profile: https://www.blogger.com/profile/09171272848542294839
    css nya sangat rapi, mudah di custom warnanya
  • Gate
    Thursday, September 22, 2022
    Profile: 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
    • Шош. Сом
      Friday, September 30, 2022
      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"]
    • Id
      Sunday, October 02, 2022
      Profil: https://www.blogger.com/profile/03920800992098277199
      kalo kaya gitu cuma kebaca 1, entah chapter nya doang atau volume nya doang, ngga bisa keduannya
    • Шош. Сом
      Sunday, October 02, 2022
      Profil: https://www.blogger.com/profile/11131198046075365419
      ubah urutan nya.
      ["Volume", "Vol", "Episode","Eps","Chapter","Ch.","Ep"]
    • Gate
      Monday, October 03, 2022
      Profil: https://www.blogger.com/profile/13756915173998753292
      Tetep gabisa bang, yang kebaca cuma yang didepan, kalo volume yang didepan, yang kebaca volume, kalo chapter yang didepan, yang kebaca chapter, jadi ngga bisa duanya, volume sama chapter
    • Шош. Сом
      Tuesday, October 04, 2022
      Profil: https://www.blogger.com/profile/11131198046075365419
      cari ini ${e?e+" "+t:r.title} ganti dengan ${e?e+" "+r.title.split(e)[1]:r.title}
    • Gate
      Wednesday, October 05, 2022
      Profil: https://www.blogger.com/profile/13756915173998753292
      Nah ini baru bisa bang, makasih banget
  • Baca komik
    Saturday, September 24, 2022
    Profile: https://www.blogger.com/profile/05583155505950172982
    Bang bagian list chapter ga bisa di tambahkan? Di situ batasanya hanya 150 ya
  • Owner
    Monday, October 03, 2022
    Profile: https://www.blogger.com/profile/01809506427571520515
    Pak Saya Tidak Bisa Menggunakannya Saya Tidak Bisa Menggunakan Kode Dalam Html Bisakah Anda Memberi Saya Format Posting
    • Шош. Сом
      Monday, October 03, 2022
      Profil: https://www.blogger.com/profile/11131198046075365419
      demo?
    • Owner
      Tuesday, October 04, 2022
      Profil: https://www.blogger.com/profile/01809506427571520515
      saya sudah melakukan CSS dan jQuery tetapi ketika saya memasukkan kode html di pos kemudian periksa Tidak tampilkan daftar episode
    • Шош. Сом
      Tuesday, October 04, 2022
      Profil: https://www.blogger.com/profile/11131198046075365419
      demo Web? Agar bisa di cek letak kesalahan nya.
    • Owner
      Wednesday, October 05, 2022
      Profil: https://www.blogger.com/profile/01809506427571520515
      maaf saya tidak bisa memberikannya saya hanya ingin kode html yang Anda gunakan dalam demo maka saya bisa mengerti semuanya
    • Owner
      Thursday, October 06, 2022
      Profil: https://www.blogger.com/profile/01809506427571520515
      Pak Saya Pikir Anda Tidak Memberi Kami Kode Lengkap Di Mana Kode Pencarian Cara Menambahkan Episode Dan Cara Menambahkan Tombol Unduh Beri Kami Kode
    • Шош. Сом
      Friday, October 07, 2022
      Profil: https://www.blogger.com/profile/11131198046075365419
      buat list https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX44QBtwEfjoDH4tRND3nUIc3qolZyXc8jAglX2FaH3-FT7I9DvVa7c-BTMNbseH_LgFC3GqirE8BserKZwX_QvDbJt7AikysyqFXtVAsRFV96OI3KGwKLeKGNHOIe6TxpcwrZ9KO6fxlACH_8rR8dIBBduvHvIOfyjXlEzZW0a4dHpD1E1y_ixdfJ/s1600/Screenshot%202022-10-07%20094843.png
      buat download button https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh__t11i4TV-wZBgTsXTz6YSfzr2w14I4k2mr0N2QUt10D4Yxu1qGsj51NQ-ZfF-cKbdHW3QRDYzzNfWzT3eukfQj9XMElRk9PhtnQzpLnGNfCYIdAxwE4qM31plXDLUeuR53PDZylvc35w_kCHBxHMEs4kF-IAUrIXVLccEU2SuRInnAqH2oVDPWf0/s1600/Screenshot%202022-10-07%20095335.png
  • Enka Ringo
    Saturday, November 05, 2022
    Profile: https://www.blogger.com/profile/05410326609261675058
    Kenapa tombol downloadnya tetap gk muncul ya?
    • Шош. Сом
      Monday, November 07, 2022
      Profil: https://www.blogger.com/profile/11131198046075365419
      pasang dulu font awesome di template nya.
      atau ganti kode ini ada di script nya.
      <i class="fa-solid fa-cloud-arrow-down"></i>
      ganti dengan "Svg icon", "Text" atau yang lain
    • Enka Ringo
      Monday, November 14, 2022
      Profil: https://www.blogger.com/profile/05410326609261675058
      Oke, makasih banyak
  • Rizal
    Monday, January 16, 2023
    Profile: https://www.blogger.com/profile/05283757175222371330
    Cara buat double label gimana bg? yg bagian ini
    labelMain:"Series"
  • Wangy
    Monday, January 23, 2023
    Profile: https://www.blogger.com/profile/08669256373633307180
    Tombol cari chapter tidak muncul kenapa ya ka?