Chapter / Episode List Versi Oploverz

Chapter / Episode List Versi Oploverz
Dagruel

Cara Membuat "Chapter / Episode List Versi Oploverz" ini adalah remake dari postingan "Chapter List Otomatis Blogger versi Samehadaku".

Langsung saja berikut cara nya, pertama pasang script berikut di atas tag </head>.

<script>
  /*<[CDATA[*/
  function runListV1(){var t=document.createElement("script");t.src=listV1site+"/feeds/posts/default/-/"+listV1Label+"?alt=json&callback=listV1&start-index="+start+"&max-results="+max,document.body.appendChild(t)}function listV1(t){var e=document.getElementById("listV1");if(e){e.innerHTML="";var l=t.feed;if(l.entry.length>0){for(var i=0;i<l.entry.length;i++)for(var r=l.entry[i],s=r.title.$t,a=r.published.$t,n=0;n<r.link.length;n++)if("alternate"==r.link[n].rel){var u=r.link[n].href;u&&u.length>0&&s&&s.length>0&&a&&a.length>0&&listV1Arr.push({url:u,judul:s,tanggal:a});break}if(l.entry.length>=max)start+=max,runListV1();else{for(var d,p="",d="title"===listV1short?listV1Arr.sort(function(t,e){return t.judul>e.judul?1:-1}):listV1Arr,c=0;c<d.length;c++){var o=d[c].tanggal,g=o.substring(0,4),v=o.substring(5,7),h=o.substring(8,10),m=new Array;m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec";var V,f,A=d[c].judul;V="function"==typeof timeAgo?timeAgo(new Date(o)):h+" "+m[parseInt(v,10)]+" "+g,f=d[c].judul.includes("Episode")?d[c].judul.split("Episode")[1].replace(/[^0-9\.-]+/g,""):d[c].judul.includes("Chapter")?d[c].judul.split("Chapter")[1].replace(/[^0-9\.-]+/g,""):"N/A",p+='<li class="listV1-item"><a href="'+d[c].url+'" title="'+A+'"><div class="listV1-numb">'+f+'</div><div class="listV1-titl">'+A+'</div><div class="listV1-date">'+V+"</div></a></li>"}e.innerHTML='<div class="listV1-Head"><div>Episode</div><div>Judul Episode</div><div>Tanggal</div></div><ul class="listV1">'+p+"</ul>";var b=document.querySelectorAll(".listV1-item a")[0],y=document.querySelectorAll(".listV1-item a")[document.querySelectorAll(".listV1-item a").length-2],E=b.getAttribute("href"),C=y.getAttribute("href");if(b.textContent.includes("Episode")||y.textContent.includes("Episode"))var x="Episode "+b.getAttribute("title").split("Episode")[1].replace(/[^0-9\.-]+/g,""),j="Episode "+y.getAttribute("title").split("Episode")[1].replace(/[^0-9\.-]+/g,"");else if(b.textContent.includes("Chapter")||y.textContent.includes("Chapter"))var x="Chapter "+b.getAttribute("title").split("Chapter")[1].replace(/[^0-9\.-]+/g,""),j="Chapter "+y.getAttribute("title").split("Chapter")[1].replace(/[^0-9\.-]+/g,"");else var x=b.getAttribute("title"),j=y.getAttribute("title");var N='<a href="'+C+'" class="V1-NPItem"><span>Terlama</span><span>'+j+'</span></a><a href="'+E+'" class="V1-NPItem"><span>Terbaru</span><span>'+x+"</span></a>",L=document.createElement("div");L.className="listV1-NP",L.innerHTML=N;var T=document.getElementById("listV1");T.insertBefore(L,T.childNodes[0])}}}}var start=1,max=150,listV1Arr=new Array,listV1short="date";
  /*]]>*/
</script>

Kemudian pasang css berikut di atas tag </style> atau ]]></b:skin>

.listV1 .listV1-item,.listV1-Head,h2.oploverzLisz{border-bottom:1px solid #ececec}#listV1 *,h2.oploverzLisz{box-sizing:content-box}.listV1-Head,h2.oploverzLisz{color:#333}h2.oploverzLisz{position:relative;margin:0;background:#fff;padding:8px 15px;font-size:1.1em;line-height:20px;font-weight:500}#listV1{padding:10px;background:#fff}.listV1-NP{display:inline-block;width:100%;max-width:100%;overflow:hidden;position:relative;text-align:center}.listV1-NP>a{display:block;width:calc(50% - 35px);color:#fff;padding:15px;background:#0c70de;border-radius:5px;text-decoration:none}.listV1-NP>a:first-child{float:left;margin-right:5px}.listV1-NP>a:last-child{float:right;margin-left:5px}.listV1-NP>a>span{display:block;font-size:15px}.listV1-NP>a>span+span{font-size:20px;margin-top:6px;font-weight:700}.listV1-Head{display:flex;flex-wrap:wrap;padding:8px 15px;font-weight:500;font-size:1.1em;line-height:20px}.listV1-Head>div:nth-child(1),.listV1-numb{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;max-width:16.66667%}.listV1-Head>div:nth-child(2),.listV1-titl{flex-basis:0;-webkit-box-flex:1;flex-grow:1;max-width:100%;padding-right:15px;padding-left:15px}.listV1-Head>div:nth-child(3),.listV1-date{-webkit-box-flex:0;flex:0 0 25%;max-width:25%}.listV1{padding:0;list-style:none;margin:0;overflow:auto;max-height:392px}.listV1 .listV1-item{overflow:hidden;font-size:14px}.listV1 .listV1-item:nth-child(odd){background:#f7f7f7}.listV1 .listV1-item a{display:flex;flex-wrap:wrap;padding:10px 15px;position:relative;text-decoration:none}.listV1::-webkit-scrollbar{width:10px}.listV1::-webkit-scrollbar-thumb{background:#0c70de}.listV1::-webkit-scrollbar-track{background:#f1f1f1}@media only screen and (max-width:570px){.listV1-Head>div:nth-child(1),.listV1-Head>div:nth-child(3),.listV1-date,.listV1-numb{display:none}}

Jika sudah silahkan Simpan Template kalian, dan buatlah postingan baru. Jika ingin menambahkan list kedalam post tinggal tambahkan kode berikut saja.

<h2 class="oploverzLisz">List Oploverz</h2>
<div id="listV1">
  <script>
  var listV1Label = "Jaku-Chara Anime",
    listV1site = "https://seleseven-v2.blogspot.com";
  runListV1();
  </script>
</div>
Silahkan ganti yang ditandai sesuai keinginan.
  • Jaku-Chara Anime = Nama Label
  • https://seleseven-v2.blogspot.com = Url Web.

Script di atas sudah terintegrasi dengan script TimeAgo. Jadi kalian hanya perlu memasang script TimeAgo tersebut jika ingin mengubah tulisan tanggal nya.

Sampai sini saja postingan nya. Sampai jumpa kembali.

Comments