Ads

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.

13 komentar

Blogger Disqus
  1. entah kenapa pas ku pasang js nya di atau di itu eror dan pas ku coba compress js nya itu eror juga jadi mungkin ada yg salah tolong di perbaiki

    BalasHapus
    Balasan
    1. script untuk di atas tag </head> nya belum di pasang

      Hapus
    2. itu javascript nya gk bisa di pasang di atas head

      Hapus
    3. coba lagi sekarang sdh bisa. kurang tanda seru dibagian/*<![CDATA[*/

      Hapus
  2. how to fix?
    https://1.bp.blogspot.com/-fo4cBJCLUX8/YU0o35w3vAI/AAAAAAAAA04/v2e4mgJG5c4j2QdXhdBEyOOBqRjR_1fewCLcBGAsYHQ/s462/5214312312312412414134144124141.PNG

    BalasHapus
    Balasan
    1. add css @media screen and (max-width: 570px) {
      .listV1-Head>div:nth-child(1),
      .listV1-Head>div:nth-child(3),
      .listV1-date,
      .listV1-titl {
      display: none
      }
      .listV1-numb {
      display: block !important
      }
      .listV1-Head>div:nth-child(1),
      .listV1-numb {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
      }
      }

      Hapus
  3. how to fix : v
    https://1.bp.blogspot.com/-1KaWwMsykgs/YU3zdWnONTI/AAAAAAAAA8Q/6--lxPMij9Qs4Cxgb6YTE7hE_8EMFkSlwCLcBGAsYHQ/s812/3214DADAQDEWDA.PNG

    BalasHapus
  4. min kok gini
    https://ibb.co/gRrwrKm

    BalasHapus
  • 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>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!