Ads

Chapter List Dengan Next Prev Versi (MAID)

Chapter List Dengan Next Prev Versi (MAID)
Dagruel

CSS

Bisa kalian pasang di dalam template tepat nya di atas tag </style> atau ]]></b:skin>.

.ch_LISTV1-sidenav,.nav-chapter{box-shadow:0 5px 20px rgb(0 0 0 / 50%);position:fixed}.nav-chapter{bottom:-70px;left:0;background:#3b3c4c;font-size:25px;color:#ddd;border-radius:10px;margin:10px;display:inline-flex;overflow:hidden;transition:bottom .3s ease-out}.nav-chapter a{padding:15px 25px;cursor:pointer;transition:.2s}.ch_LISTV1-sidenav .closebtn:hover,.nav-chapter a:hover{background:rgb(0 0 0 / 50%)}.nav-chapter .list{background:#369}.ch_LISTV1-sidenav .closebtn:before,.nav-chapter a:before{content:'';display:inline-block;min-width:24px;min-height:24px;vertical-align:text-bottom}.nav-chapter a.list:before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3,11H11V3H3M3,21H11V13H3M13,21H21V13H13M13,3V11H21V3' fill='%23fff'/%3E%3C/svg%3E") center/24px no-repeat}.nav-chapter a[rel=prev]:before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,10V14H11L14.5,17.5L12.08,19.92L4.16,12L12.08,4.08L14.5,6.5L11,10H20Z' fill='%23fff'/%3E%3C/svg%3E") center/24px no-repeat}.nav-chapter a[rel=next]:before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4,10V14H13L9.5,17.5L11.92,19.92L19.84,12L11.92,4.08L9.5,6.5L13,10H4Z' fill='%23fff'/%3E%3C/svg%3E") center/24px no-repeat}.ch_LISTV1-sidenav .closebtn:before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='%23fff'/%3E%3C/svg%3E") center/24px no-repeat}.ch_LISTV1-sidenav{background:#3b3c4c;width:0;z-index:999;top:0;display:block;transition:.1s;line-height:22px;height:100%;overflow-x:hidden}.ch_LISTV1-sidenav.ch_LISTV1{left:0}.ch_LISTV1-sidenav .closebtn{position:absolute;top:13px;right:15px;font-size:25px;margin-left:50px;padding:8px;border-radius:5px;background:#3b3c4c;color:#fff;z-index:999}.ch_LISTV1-sidenav .coverz{overflow:hidden}.ch_LISTV1-sidenav .thumbnail{width:100%;height:180px;position:relative}.ch_LISTV1-sidenav .thumbnail img{width:100%;height:auto;webkit-filter:blur(1px);filter:blur(1px)}.ch_LISTV1-sidenav .titlex{font-size:18px;display:block;width:100%;position:absolute;color:#f1f1f1;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.84) 85%,#111);bottom:0;z-index:40;padding:10px;font-weight:600;border-bottom:solid 4px #369}.ch_LISTV1-sidenav .chapx{padding:0;list-style:none;margin:5px;padding-inline-start:20px}.ch_LISTV1-sidenav .chapx li{padding:10px;border-bottom:dashed 2px #2f303e}.ch_LISTV1-sidenav .chapx li .nomor{border-right:solid 2px #2f303e;padding-right:5px;margin-right:5px;color:#ddd}.ch_LISTV1-sidenav .chapx a{color:#fff;text-decoration:none;transition:.2s}.ch_LISTV1-sidenav .chapx a.active,.ch_LISTV1-sidenav .chapx a:hover{color:#369;font-weight:700}.ch_LISTV1-sidenav .chapx li .datez{display:block;color:#888;float:right;font-size:12px}

Javascript/jQuery

Untuk script nya karena saya di sini menggunakan jQuery pastikan template kalian sudah terpasang jQuery.

Jika sudah terpasang, tempelkan script berikut di atas tag </head>.

<script type="text/javascript">
  /* <![CDATA[ */
  var ch_LISTV1={};ch_LISTV1.start=1,ch_LISTV1.max=150,ch_LISTV1.arr=new Array,ch_LISTV1.compile=function(e){var t=$("#ch_LISTV1-sideNav");if(!(t.length<1)){t.html("");var r=e.feed;if(r.entry.length>0){for(var l=0;l<r.entry.length;l++)for(var n=r.entry[l],i=n.title.$t,h=n.published.$t,o=n.content.$t,p=0;p<n.link.length;p++)if("alternate"==n.link[p].rel){var f=n.link[p].href;f&&f.length>0&&i&&i.length>0&&h&&h.length>0&&ch_LISTV1.arr.push({link:f,title:i,time:h,content:o});break}if(r.length>=ch_LISTV1.max)ch_LISTV1.start+=ch_LISTV1.max,ch_LISTV1.run(ch_LISTV1.label,ch_LISTV1.postURL);else{for(var v="",u="",g=ch_LISTV1.arr.sort(function(e,t){return e.title.localeCompare(t.title,"en",{numeric:!0})}),m=0;m<g.length;m++){var L=g[m].time,S=L.substring(0,4),I=L.substring(5,7),T=L.substring(8,10),V=new Array;V[1]="Jan",V[2]="Feb",V[3]="Mar",V[4]="Apr",V[5]="May",V[6]="Jun",V[7]="Jul",V[8]="Aug",V[9]="Sep",V[10]="Oct",V[11]="Nov",V[12]="Dec";var _=L;if(_="function"==typeof timeAgo?timeAgo(new Date(_)):T+" "+V[parseInt(I,10)]+" "+S,g[m].title.includes("Chapter")){var x=g[m].title.split("Chapter")[1];x="Ch. "+x.replace(/[^0-9\.-]+/g,"")}else if(g[m].title.includes("Episode")){var x=g[m].title.split("Episode")[1];x="Ep. "+x.replace(/[^0-9\.-]+/g,"")}else if(g[m].title.includes("Prolouge"))var x="Ch. Prolouge";else if(g[m].title.includes("Epilouge"))var x="Ch. Epilouge";else var x=g[m].title;if(0==m){if(s=g[m].content,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d)var A=d;else var A="https://1.bp.blogspot.com/-q5XNfPSweVQ/X-Gpih2Z9rI/AAAAAAAAHyo/7VArMT1coTM4n792SDJ6lYMBxpChGjnvgCPcBGAsYHg/s0/dagruel-no-image.png";v+='<div class="coverz"><a href="'+g[m].link+'"><div class="thumbnail"><img src="'+A+'" alt="'+g[m].title+'" title="'+g[m].title+'"><span class="titlex">'+g[m].title+"</span></div></a></div>"}else u+='<li><span class="nomor">'+m+'</span><a class="chapzx" href="'+g[m].link+'" title="'+g[m].title+'"><chx>'+x+'</chx></a><span class="datez">'+_+"</span></li>"}var w=document.createElement("ul");$(w).attr({id:"chxlistz",class:"chapx"}),$(w).html(u),t.append('<a href="javascript:void(0)" class="closebtn" onclick="ch_LISTV1.close()"></a>',v,w);var y=$(t).find('a[href="'+ch_LISTV1.postURL+'"]'),C=$(y).parent().prev().find("a").attr("href"),k=$(y).parent().next().find("a").attr("href");$(y).addClass("active"),$('.nav-chapter a[rel="prev"]').attr("href",C),$('.nav-chapter a[rel="next"]').attr("href",k),$('.nav-chapter a[href=""]').remove()}}}},ch_LISTV1.open=function(){$("#ch_LISTV1-sideNav").css("width","300px")},ch_LISTV1.close=function(){$("#ch_LISTV1-sideNav").css("width",0)},ch_LISTV1.run=function(e,t){ch_LISTV1.label=e,ch_LISTV1.postURL=t;var a=document.createElement("script");a.src="/feeds/posts/default/-/"+ch_LISTV1.label+"?alt=json&callback=ch_LISTV1.compile&start-index="+ch_LISTV1.start+"&max-results="+ch_LISTV1.max,document.body.appendChild(a)},$(document).ready(function(){var e=window.pageYOffset;$(window).scroll(function(){var t=window.pageYOffset;e>t?$(".nav-chapter").css("bottom","-70px"):$(".nav-chapter").css("bottom","0px"),e=t})});
  /* ]]> */
</script>

HTML

Terdapat dua cara yaitu manual dan otomatis. di sarankan pakai cara manual klo kurang ngerti.

1. Cara Manual

Setiap kalian membuat postingan baru sisipkanlah HTML berikut di akhir postingan.

<div class="ch_LISTV1-navi">
  <div class="nav-chapter">
    <a class="list" onclick="ch_LISTV1.open()"></a>
    <a href="" rel="prev"></a>
    <a href="" rel="next"></a>
  </div>
</div>
<div id="ch_LISTV1-sideNav" class="ch_LISTV1-sidenav ch_LISTV1">
  <script type="text/javascript">
    /* <![CDATA[ */
    ch_LISTV1.run("nama_label", "url_post");
    /* ]]> */
  </script>
</div>
Untuk yang di tandai bisa kalian ganti sesuai keterangan.

2. Cara Otomatis

Karena agak susah menjelaskan nya di sini saya ambil contoh dari template SeleSeven.

Untuk template v1 cari kode berikut.

<div id="ec_Select">
  blablablbalba kode yang lain
</div>
<div class="nextPrev">
  blablablbalba kode yang lain
</div>

Di situ kode nya ada banyak, dan kode yang di ganti adalah yang pertama untuk yang lain silahkan di hapus.

Dan untuk template v2 bisa cari kode ini.

<b:includable id="nexPreSelex">
  Kode yang di ganti ada di sini
</b:includable>

Tinggal kalian hapus kode yang ada di dalam nya dengan yang baru.

Dan berikut ini HTML yang harus kalian salin.

<b:if cond='data:post.labels any ( l => l.name in ["nama_label1", "nama_label2"] )'>
  <div class="ch_LISTV1-navi">
    <div class="nav-chapter">
      <a class="list" onclick="ch_LISTV1.open()"></a>
      <a href="" rel="prev"></a>
      <a href="" rel="next"></a>
    </div>
  </div>
  <div id="ch_LISTV1-sideNav" class="ch_LISTV1-sidenav ch_LISTV1">
    <b:loop index='i' values='data:post.labels' var='label'>
      <b:if cond='data:label.name not in ["nama_label1", "nama_label2", "nama_label3"]'>
        <script type="text/javascript">
          ch_LISTV1.run('<data:label.name/>', '<data:post.url.canonical/>');
        </script>
      </b:if>
    </b:loop>
  </div>
</b:if>
Untuk yang di tandai bisa kalian ganti sesuai keterangan.

Keterangan untuk nama_label bagian pertama itu untuk daftar post yang akan menampilkan chapter list ini. sebagai contoh template seleseven label nya: "readManga", "readNovel", "dlStream".

dan untuk nama_label bagian kedua itu mengambil label judul dari postingan. misal postingan chapter memiliki 3 label: "readManga", "Inuyasha", "Coloring".

maka akan kita isi dengan: "readManga", dan "Coloring". agar hanya 1 label yang terpanggil yaitu "Inuyasha".

Sekian Dari saya tentang cara membuat Chapter List Versi (MAID). jika ada request tutor yang lain silahkan tambahkan komentar di sini. Jika tampilan nya sesuai selera saya akan di kerjakan langsung adapun sebaliknya akan tertunda pengerjaan nya.

Comments

Blogger Disqus
  • 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>