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.

39 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
  5. naruh a:visited{color:red} dimana min

    BalasHapus
  6. bg cara atasin kek gimana
    https://blogger.googleusercontent.com/img/a/AVvXsEhQ2LE7QcBX-NREtTOacAsaggpuwCm3G59aRq-1hRsBlL-bhS9kE-XIhwzk9kcbqWrf_B5n881iCACijHEY-u5QSLNgo-tvmlcuHeww1aDNqBe2pmD2_woio-1l2ZhuO0N5xFHcPQPtGBMTy-UrzebuGdsyGtA0BI1FtYeSeAiqk1x4XhivO57bZftG

    BalasHapus
    Balasan
    1. cari ini di dalam mainScript nya.
      (".listV1-item a").length-2]
      ganti angka 2 jadi 1.

      Hapus
  7. bang cara ubah ke time ago gimana ya punya ku malah jadi NaN tahun yang lalu

    BalasHapus
    Balasan
    1. penulisan tanggal nya gimana klo gak pakai timeAgo
      itu kesalahan dalam format tanggal nya aja, cek di sini.
      https://www.w3schools.com/code/tryit.asp?filename=GOP91P0SO04N

      Hapus
    2. gak paham, tapi ini dah bener kan?
      $(".listV1-date").each(function(){
      $(this).html(timeAgo(new Date($(this).attr("datetime"))));
      });

      Hapus
    3. gk perlu pasang script itu untuk chapter list ini. sdh otomatis

      Hapus
    4. udah ku hapus bang tapi format tanggal nya kayak gini
      14 Nov 2020 bukan timeago, maaf ngerepotin

      Hapus
    5. script time ago nya taruh di atas tag </head>
      <script type='text/javascript'>
      /*<![CDATA[*/
      function timeAgo(o){var t=(new Date).getTime()-o.getTime(),e=Math.floor(t/1e3),r=Math.floor(e/60),a=Math.floor(r/60),g=Math.floor(a/24),h=Math.floor(g/30),n=Math.floor(h/12);return 0===t?"Baru saja":e<60?e+" detik yang lalu":r<60?r+" menit yang lalu":a<24?a+" jam yang lalu":g<30?g+" hari yang lalu":h<12?h+" bulan yang lalu":n+" tahun yang lalu"}
      /*]]>*/
      </script>

      Hapus
    6. bang kalo misalnya listV1site nya diganti di javascript langsung bisa gak ya? jadi kalo ganti domain tinggal edit di script langsung gak usah satu-satu edit postingan

      Hapus
    7. hapus listV1site+ di script utama nya.

      Hapus
  8. min kalo episode pertama dan terbaru dihaling kalo episode nya cuman satu bisa gak?

    BalasHapus
    Balasan
    1. gak bisa harus di buat ulang klo mau di hapus

      Hapus
    2. max list nya berapa bang?

      Hapus
    3. Unlimited akan tetapi jika jumlah post nya berkelipatan 150 maka tidak akan muncul.
      150, 300, 450, 600, 750, 900, dst = maka list nya tidak akan muncul.

      Hapus
    4. jadi kalo misalnya postnya 200 bisa bang?

      Hapus
  9. Balasan
    1. letak ke postingan.
      <h2 class="oploverzLisz">List Oploverz</h2>
      <div id="listV1">
      <script>
      var listV1Label = "Jaku-Chara Anime",
      listV1site = "https://seleseven-v2.blogspot.com";
      runListV1();
      </script>
      </div>

      Hapus
    2. url blog? biar tak cek.

      Hapus
  10. min cara mengecualikan gimana? Seriesnya mau aku masukin label episode tapi biar tidak ikut masuk ke listnya

    BalasHapus
    Balasan
    1. pakai css.
      .listV1-item:last-child{display:none!important;}

      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>
  • Gunakan Shortcode berikut untuk menambahkan gambar atau Video. Contoh:
    <i rel="spoiler image">url_gambar</i>
    <i rel="spoiler">spoiler_text</i>
    <i rel="iframe">url_embed</i>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!