Ads

Source Code Chapter List Dengan Tombol Download Blogger

Memberi Watermark didalam Artikel
Dagruel

Pasang CSS di atas tag ]]></b:skin> atau </style> pada template.

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css);
.bxcl{background:#222;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;margin-bottom:18px;overflow:hidden;-webkit-box-shadow:0 2px 3px rgba(0,0,0,.1);-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 rgba(0,0,0,.1);line-height:1.5}.bxcl a{color:#fff;text-decoration:none}.bixbox *{box-sizing:border-box}.releases{position:relative;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #312f40;padding:8px 15px}.releases:after{position:absolute;left:0;bottom:0;right:auto;top:auto;height:1px;width:100%;background-color:transparent;display:block;z-index:1;transform:scaleY(.5);opacity:.8;background-image:linear-gradient(90deg,rgba(0,0,0,.01) 0,rgba(0,0,0,.1) 10%,rgba(0,0,0,.2) 20%,rgba(0,0,0,.3) 30%,rgba(0,0,0,.3) 70%,rgba(0,0,0,.2) 80%,rgba(0,0,0,.1) 90%,rgba(0,0,0,.01) 100%)}.releases h2{font-size:15px;color:#fff;line-height:20px;font-weight:500;margin:0;position:relative}.lastend{overflow:hidden;position:relative;margin:10px}.lastend .inepcx{width:50%;float:left;text-align:center}.lastend .inepcx[data-id="2"]{float:right}.lastend .inepcx a{display:block;color:#fff;margin:5px;padding:15px;background:#0c70de;border-radius:5px;line-height:normal}.lastend .inepcx a span{display:block;font-size:15px}.lastend .inepcx a span.epcur{font-size:20px;margin-top:6px;font-weight:700}.lastend .inepcx a:hover{background:#333}.bxcl{overflow:hidden}.bxcl ul{padding:0;list-style:none;margin:15px;overflow:auto;max-height:297px}.bxcl ul li{float:left;width:25%}.bxcl ul li .chbox{overflow:hidden;padding:5px 10px;border:1px solid #f466f4;font-size:14px;margin:0 5px;margin-bottom:10px;position:relative;border-radius:5px}.bxcl ul li .chbox:hover{background:#333}.bxcl ul::-webkit-scrollbar-thumb{background:#0c70de}.bxcl ul::-webkit-scrollbar-track{background:0 0}.bxcl ul::-webkit-scrollbar{width:5px}.bxcl ul li .eph-num{float:left}.bxcl ul li .dt{float:right;font-size:20px;margin-top:8px;margin-right:5px}.bxcl ul li .eph-num span{display:block}.bxcl ul li .eph-num span.chapternum{font-weight:400}.bxcl ul li .eph-num span.chapterdate{font-size:12px;color:#888}.bxcl ul li .eph-num a:visited{color:#0c70de}.bxcl ul li .dt a{color:#0c70de}.bxcl ul li .dt a:hover{color:#fff}@media only screen and (max-width:950px){.bxcl ul li{width:33.3333333%}}@media only screen and (max-width:800px){.bixbox{border-radius:0;margin-bottom:5px}}@media only screen and (max-width:570px){.bxcl ul li{width:50%}}@media only screen and (max-width:320px){.bxcl ul li{width:auto;float:none}}.lightmode .quickfilter .filters .filter ul li input:not(:checked)+label:before{background-color:#ddd}.bxcl ul::-webkit-scrollbar-thumb,.lastend .inepcx a{background:#5f458c}.bxcl ul li .dt a,.bxcl ul li .eph-num a:visited,a:hover{color:#5f458c}

Jika blog kalian sudah terpasang font Awesome silahkan hapus yang di tandai.

Selanjut nya javascript pasang di atas tag </head>.

<script type="text/javascript">/*<![CDATA[*/
  const clwd={arr:new Array,compile:function(){const t=this,e=this.arr.length;let n="<ul>",s='<div class="lastend">';jQuery.each(t.arr,function(i,a){let l=a.title;if(jQuery.each(t.settings.title,function(t,e){l.includes(e.in)&&(l=e.out+" "+l.split(e.in)[1].replace(/[^0-9\.-]+/g,""))}),i==e-2&&(s+=`<div class="inepcx" data-id="1"><a href="${a.link}"><span>Chapter Awal</span><span class="epcur epcurfirst">${l}</span></a></div>`),0==i&&(s+=`<div class="inepcx" data-id="2"><a href="${a.link}"> <span>Chapter Baru</span> <span class="epcur epcurlast">${l}</span></a></div>`),i!=e-1){let t=0==a.dLink?"":`<div class="dt"> <a href="${a.dLink}" rel="nofollow" class="dload" target="_blank"><i class="fas fa-cloud-download-alt"></i></a></div>`;n+=`<li><div class="chbox"><div class="eph-num"><a href="${a.link}"><span class="chapternum">${l}</span> <span class="chapterdate">${a.published}</span></a></div>${t}</div></li>`}}),s+="</div>",n+="</ul>",document.getElementById("clwd").innerHTML=`<div class="releases"><h2>${t.settings.judul}</h2></div>${s+n}`},get:function(t){const e=this;t.ajax({url:`/feeds/posts/default/-/${this.settings.cat}?alt=json-in-script&start-index=${this.settings.start}&max-results=${this.settings.max}`,type:"get",dataType:"jsonp",success:function(n){"entry"in n.feed?(n.feed.entry.forEach(n=>{e.arr.push({title:n.title.$t,link:n.link.find(t=>"alternate"==t.rel).href,dLink:"content"in n&&(0!=t(n.content.$t).find("#downBTN").length&&t(n.content.$t).find("#downBTN").attr("href")),published:"function"==typeof timeAgo?timeAgo(new Date(n.updated.$t)):e.timeStirng(n.updated.$t)})}),n.feed.entry.length>=e.settings.max?(e.settings.start+=e.settings.max,e.run(e.settings.cat)):e.compile()):0!=e.arr.length&&e.compile()},error:function(t){console.log(t)}})},run:function(t){this.settings.cat=t,"function"==typeof jQuery&&document.getElementById("clwd")?this.get(jQuery):console.log("Output Nothing")},settings:{max:150,start:1,title:[{in:"Episode",out:"Ep."},{in:"Chapter",out:"Ch."}],judul:"Chapter List"},timeStirng:function(t){if(/([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/.test(t)){var e=t,n=e.substring(0,4),s=e.substring(5,7),i=e.substring(8,10),a=new Array;return a[1]="Jan",a[2]="Feb",a[3]="Mar",a[4]="Apr",a[5]="May",a[6]="Jun",a[7]="Jul",a[8]="Aug",a[9]="Sep",a[10]="Oct",a[11]="Nov",a[12]="Dec",i+" "+a[parseInt(s,10)]+" "+n}return!1}};
/*]]>*/</script>

Selanjut nya buat post baru dan pakai HTML berikut untuk memanggil Chapter List nya.

<div id="clwd" class="bixbox bxcl epcheck">
  <script>
    clwd.run('Nama_Label');
  </script>
</div>

Ganti Nama_Label dengan label yang di inginkan.

Cara menampilkan tombol download. Di dalam post harus berisi tag ini.

<div><a href="url_download" id="downBTN"></a></div>

ganti url_download dengan link yang kalian mau. Jika tidak ada kode ini maka Tombol download di Chapter list nya tidak akan muncul.

14 komentar

Blogger Disqus
  1. Balasan
    1. Gk di tambahin. Cek halaman request Komentar pertama

      Hapus
    2. kalo pengen ditambah search caranya gimana min?

      Hapus
    3. pakai ini.
      https://www.dagruel.com/2021/08/chapter-list-otomatis-blogger.html

      Hapus
  2. Min update Chap List Oplover yang baru dong yang kaya di demo itu :)

    BalasHapus
    Balasan
    1. Eh itu sidah satu paket gak sih? Wkwk belum ane Coba 😂

      Hapus
    2. Oploverz gk ada tombol download nya

      Hapus
  3. Min Saya coba di Tmplt sSv2 kok gak muncul ya Ch Listnya?

    BalasHapus
    Balasan
    1. Sdh di update. Lupa untuk menghapus url tadi

      Hapus
  4. Ini yang dicari, tapi berat min kalau dipake di blog Komik, entah kenapa makan banyak kouta, seperti Ch List ini
    https://www.dagruel.com/2021/08/chapter-list-otomatis-blogger.html {margin:0; https://www.dagruel.com/2021/08/chapter-list-otomatis-blogger.html {margin:0; padding:10px 15px}:10px 15px}

    BalasHapus
    Balasan
    1. Tapi yang ch list oplover ringan, apa bisa diperbaiki min? 🙏

      Hapus
    2. Berat nya loading karena script ini menggunakan jQuery. Jadi gk ada cara ngatasin ny.

      Hapus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
  • Gunakan Shortcode berikut untuk menambahkan gambar atau Video. Contoh:
    <i rel="spoiler image">url_gambar</i>
    <i rel="spoiler">spoiler_text</i>
    <i rel="iframe">url_embed</i>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!