Ads

Update: Cara Membuat Chapter List Otomatis Blogger

Pada kesempatan kali ini saya akan membagikan cara membuat Chapter List Otomatis berdasarkan label tertentu untuk Blogger.

Chapter List ini mempunyai fitur pencarian yang mana jika kalian menulis nomor chapter tersebut, maka chapter tersebut akan muncul.

Ada dua cara untuk memasang nya, pertama menambahkan script kedalam template dan taruh pemanggilnya kedalam postingan, cukup mudah bukan? langsung saja.

Chapter List Otomatis Blogger
Dagruel

Chapter List Otomatis

Pertama buka Blogger > Template > Edit HTML > tempelkan script berikut di atas tag </head>.

<script>
 //<![CDATA[
var ep_LISTV1={};ep_LISTV1.start=1,ep_LISTV1.max=150,ep_LISTV1.arr=new Array,ep_LISTV1.compile=function(e){var t=document.getElementById("ep_LISTV1");if(t){t.innerHTML="";var a=e.feed;if(a&&a.entry.length>0){for(var l=0;l<a.entry.length;l++)for(var n=a.entry[l],r=n.title.$t,s=n.published.$t,p=0;p<n.link.length;p++)if("alternate"==n.link[p].rel){var i=n.link[p].href;i&&i.length>0&&r&&r.length>0&&s&&s.length>0&&ep_LISTV1.arr.push({link:i,title:r,time:s});break}if(a.length>=ep_LISTV1.max)ep_LISTV1.start+=ep_LISTV1.max,ep_LISTV1.run();else{for(var c,o="",c=ep_LISTV1.arr,d=0;d<c.length;d++){var m=c[d].time,g=m.substring(0,4),h=m.substring(5,7),u=m.substring(8,10),I=new Array;I[1]="Jan",I[2]="Feb",I[3]="Mar",I[4]="Apr",I[5]="May",I[6]="Jun",I[7]="Jul",I[8]="Aug",I[9]="Sep",I[10]="Oct",I[11]="Nov",I[12]="Dec";var T=m;if(T="function"==typeof timeAgo?timeAgo(new Date(T)):u+" "+I[parseInt(h,10)]+" "+g,c[d].title.includes("Episode")){var f=c[d].title.split("Episode")[1];f=f.replace(/[^0-9\.-]+/g,"")}else if(c[d].title.includes("Chapter")){var f=c[d].title.split("Chapter")[1];f=f.replace(/[^0-9\.-]+/g,"")}else var f=" N/A";o+='<li class="char"><div class="ep-right"><span class="eps"><a href="'+c[d].link+'"><chapter>'+f+'</chapter></a></span></div><div class="ep-left"><span class="eps-jdl"><a href="'+c[d].link+'">'+c[d].title+'</a></span><span class="eps-date">'+T+"</span></div></li>"}t.innerHTML='<ul class="ep-item">'+o+"</ul>"}}}},ep_LISTV1.run=function(e){ep_LISTV1.label=e;var t=document.createElement("script");t.src="/feeds/posts/default/-/"+ep_LISTV1.label+"?alt=json&callback=ep_LISTV1.compile&start-index="+ep_LISTV1.start+"&max-results="+ep_LISTV1.max,document.body.appendChild(t)},ep_LISTV1.search=function(){var e,t,a,l,n,r,s;for(e=document.getElementById("searchchapter"),t=e.value.toUpperCase(),a=document.getElementById("listItem"),l=a.getElementsByTagName("li"),r=0;r<l.length;r++)n=l[r].getElementsByTagName("chapter")[0],s=n.textContent||n.innerText,s.toUpperCase().indexOf(t)>-1?l[r].style.display="":l[r].style.display="none"};
//]]>
</script>

Untuk mempercantik tampilan nya, tempelkan css berikut di atas tag </style>.

#listItem{background:#fff;margin-bottom:20px}
#listItem *{box-sizing:border-box}
.list-judul{padding:9px 19px;border-bottom:1px solid #f1f1f1}
.list-judul h3{margin:0;font-size:19px;font-weight:500}
.searcch{padding:9px 8px}
input#searchchapter{font-weight:300;background:#fff;box-shadow:none!important;width:100%;height:34px;font-size:14px;line-height:1.42857143;color:#000;border:2px solid #f5f7fa;border-radius:3px;-webkit-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;padding:10px}
input#searchchapter::placeholder{color:#555}
.ep-item{padding:0;list-style:none;margin:0;max-height:250px;overflow-y:auto}
.ep-right{margin-right:9px}
ul.ep-item::-webkit-scrollbar{width:2px;height:2px}
ul.ep-item::-webkit-scrollbar-thumb{border-radius:7px;background-color:#a20a0a}
.ep-item .char{padding:11px 15px 11px 8px;font-size:14px;position:relative;width:100%;border-bottom:1px solid #eceff5;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between}
.ep-item .char:first-child{padding-top:11px}
.ep-item .char:last-child{display:none}
.ep-right .eps{background:#a20a0a;padding:10px;color:#fff;display:block;text-align:center}
.ep-left,.ep-left .eps-jdl{overflow:hidden;width:100%}
.ep-left{flex:1}
.ep-left .eps-jdl{line-height:21px;text-overflow:ellipsis;white-space:nowrap;float:left}
span.eps a{color:#fff}
span.eps a:hover,span.eps-jdl a:hover{color:#a20a0a}
span.eps-jdl a{color:#000}
.file-list span{font-size:7px}
.file-list span.eps-date{font-size:14px}

Jika sudah klik Save, setelah itu tempelkan HTML beserta script berikut kedalam postingan.

<div id="listItem">
  <div class="list-judul">
    <h3>Judul</h3>
  </div>
  <div class="searcch">
    <input id="searchchapter" onkeyup="ep_LISTV1.search()" placeholder="Search by Chapter Ex: 99" type="text">
  </div>
  <div id="ep_LISTV1">
    <script>
      ep_LISTV1.run('NamaLabel')
    </script>
  </div>
</div>
Pada text yang di tandai dapat kalian ubah sesuai keterangan nya.

Script Sdh di update agar Support script TimeAgo

Sekian dari saya terima kasih, jika ada yang ingin di tanyakan silahkan berkomentar di bawah.

https://demo.eastheme.com/eastmanga/

9 komentar

Blogger Disqus
  1. gini bang saya kan ada 2 chapter tuh tapi yang muncul di list nya ya cuman chapter yang kedua yg kesatu ga muncul

    BalasHapus
    Balasan
    1. hapus css ini .ep-item .char:last-child{display:none}

      Hapus
  2. min aku pake auto list chapter yg ini kalau chapternya puma 1 ko gak ke index ya ? ga muncul chapternya gitu. kira kira masalahnya ada di mana ya?

    BalasHapus
  3. kira kira bisa lebih dari 1000 gak chapter nya

    BalasHapus
    Balasan
    1. letakin ini a:visited{color:red} di mana bg

      Hapus
    2. pakai ini pasang di bawah css chapter list nya.span.eps-jdl a:visited,span.eps a:visited{color:red}

      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>