Cara Membuat Chapter List Otomatis Blogger

Pada kesempatan kali ini saya akan membagikan cara membuat chapter list seperti website anime atau manga kalian bisa liat demo nya di bawah sini

Demo

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.

Source:
www.dagruel.com

Chapter List Otomatis

1.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>

2.Untuk mempercantik tampilan nya, tempelkan css berikut di atas tag

  #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}

3.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.

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