Membuat Episode List Versi AnimeStream - Blogger

Membuat Episode List Versi AnimeStream - Blogger

Script yang akan saya bagikan kali ini terdapat 2 versi Yaitu BloggerScript dan Default.

Untuk versi BloggerScript kalian harus memasang script yang ada di sini terlebih dahulu.

Ver. BloggerScript

Pertama pasang javascript berikut di atas tag </body>.

<script type="text/javascript">/*<![CDATA[*/
let _EpisodeListBS=new BloggerScript({
  noImage:"UrlGambar",
  sizeImage:"s640",
  epname:"Eps",
  labelMain:"Series",
  labelStatus:["Completed","Ongoing"]
});"object"==typeof _EpisodeListBS&&"undefined"!=typeof labelListBS&&_EpisodeListBS.siteMap(`/feeds/posts/default/-/${labelListBS}`,function(e){let i=_EpisodeListBS.config,t=document.getElementById("singlepisode"),l=e=>e.split("Episode ")[1]||e.split("Chapter ")[1]||e.replace(/\D/g,""),s="",a='<div class="episodelist"><ul>',n=(window||document).location.pathname;if(!t)return!1;e.sort((e,i)=>e.title.localeCompare(i.title,void 0,{numeric:!0})).reverse().forEach((e,t,r)=>{if(e.label.some(e=>e==i.labelMain)){let t=e.label.find(e=>i.labelStatus.includes(e))||"N/A",l=r.filter(e=>!e.label.some(e=>e==i.labelMain)).map(e=>e.link).reverse(),a=l.indexOf(l.find(e=>e.includes(n)));s=`<div class="headlist"><div class="thumb"><a href="${e.link}"><img src="${e.image}" class="ts-post-image" loading="lazy" width="500" height="354"></a></div><div class="det"><h3><a href="${e.link}">${e.title}</a></h3><span><i>${t}</i> - ${a+1} / ${l.length}</span></div></div>`}else{let t=`${i.epname} ${l(e.title)}`;a+=`<li ${e.link.includes(n)?'class="selected"':""}><a href="${e.link}" itemprop="url" title="${e.title}"><div class="thumbnel"><img src="${e.image}" class="ts-post-image" loading="lazy" title="${e.title}" width="1366" height="768">${e.link.includes(n)?'<div class="nowplay"><i class="far fa-play-circle"></i></div>':""}</div>`,a+=`<div class="playinfo"><h4>${e.title}</h4><span>${t} - ${e.date}</span></div></a></li>`}}),t.innerHTML=`${s+a}</ul></div>`});
/*]]>*/</script>

Bagian yang di tandai silahkan di ganti sesuai keterangan.

  • noImage: gambar jika postingan tidak memiliki gambar.
  • sizeImage: ukuran gambar.
  • epname: replace text Episode menjadi Eps.
  • labelMain: label Postingan utama.
  • labelStatus: label status postingan "ongoing", "completed", "hiatus".

Sampai sini sudah selesai sekarang untuk memanggil nya. Di dalam postingan kalian pasang html dan script berikut.

<div id="singlepisode">
  <script>const  labelListBS = "Label Name";</script>
</div>

Ganti Label Name dengan label postingan contoh: "One Piece". Sekarang tinggal publish postingan dan lihat hasil nya.

Ver. Default

Pertama pasang script berikut di atas tag </head>

<script type="text/javascript">/*<![CDATA[*/
function _EpisodeList(e){
  const isConfig = {
    noImage: 'UrlGambar',
    sizeImage: 's640',
    epname: 'Eps',
    labelMain: 'Series',
    labelStatus: ['Completed', 'Ongoing'],
    arr: new Array
  }
  function i(e){if("media$thumbnail"in e)return t(e.media$thumbnail.url);if("content"in e){let i=e.content.$t,t=i.indexOf("<img"),l=i.indexOf('src="',t),s=i.indexOf('"',l+5),a=i.substr(l+5,s-l-5);return-1!=t&&-1!=l&&-1!=s&&""!=a?a:isConfig.noImage||""}return isConfig.noImage||""}function t(e){return isConfig.sizeImage?e.match(/\/s[0-9]{2}-(w[0-9]+-)?c/)?e.replace(/\/s[0-9]{2}-(w[0-9]+-)?c/,`/${isConfig.sizeImage}`):e.replace(/\=s[0-9]{2}-(w[0-9]+-)?c/,`=${isConfig.sizeImage}`):e}function l(e){if(/([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/.test(e)){var i=e,t=i.substring(0,4),l=i.substring(5,7),s=i.substring(8,10),a=new Array;return a[1]="Jan",a[2]="Feb",a[3]="Mar",a[4]="Apr",a[5]="May",a[6]="Jun",a[7]="Jul",a[8]="Aug",a[9]="Sep",a[10]="Oct",a[11]="Nov",a[12]="Dec",s+" "+a[parseInt(l,10)]+" "+t}return!1}function s(e){return e.split("Episode ")[1]||e.split("Chapter ")[1]||e.replace(/\D/g,"")}function a(e){let t=(window||document).location.pathname,a=e.link.find(e=>"alternate"==e.rel).href,n=`${isConfig.epname} ${s(e.title.$t)}`,r=i(e),d=`<li ${a.includes(t)?'class="selected"':""}><a href="${a}" itemprop="url" title="${e.title.$t}"><div class="thumbnel"><img src="${r}" class="ts-post-image" loading="lazy" title="${e.title.$t}" width="1366" height="768">${a.includes(t)?'<div class="nowplay"><i class="far fa-play-circle"></i></div>':""}</div>`;return d+=`<div class="playinfo"><h4>${e.title.$t}</h4><span>${n} - ${l(e.published.$t)}</span></div></a></li>`,d}const n=document.getElementById("singlepisode");if("entry"in e.feed&&n){let t='<div class="episodelist"><ul>',l="",s=e.feed.entry.sort((e,i)=>e.title.$t.localeCompare(i.title.$t,void 0,{numeric:!0})).reverse();s.forEach((e,s,n)=>{let r=e.link.find(e=>"alternate"==e.rel).href;if(e.category.some(e=>e.term==isConfig.labelMain)){let t=e.category.find(e=>isConfig.labelStatus.includes(e.term)).term||"N/A",s=(window||document).location.pathname,a=n.filter(e=>!e.category.some(e=>e.term==isConfig.labelMain)).map(e=>e.link.find(e=>"alternate"==e.rel).href).reverse(),d=a.indexOf(a.find(e=>e.includes(s)));l=`<div class="headlist"><div class="thumb"><a href="${r}"><img src="${i(e)}" class="ts-post-image" loading="lazy" width="500" height="354"></a></div><div class="det"><h3><a href="${r}">${e.title.$t}</a></h3><span><i>${t}</i> - ${d+1} / ${a.length}</span></div></div>`}else t+=a(e)}),t+="</ul></div>",n.innerHTML=l+t}
}
/*]]>*/</script>

Bagian yang di tandai penjelasan nya sama seperti ver BloggerScript.

Selanjut nya tinggal pasang pemanggil ke dalam postingan berikut html dan script nya.

<div id='singlepisode'>
  <script src='/feeds/posts/default/-/Label Name?alt=json-in-script&max-results=150&callback=_EpisodeList'></script>
</div>

Ganti Label Name dengan label postingan contoh: "One Piece". Sekarang tinggal publish postingan dan lihat hasil nya.

Memasang CSS

Sekarang setelah memilih antara 2 versi di atas kalian bisa memasang css berikut untuk mengubah tampilan nya. pasang di atas tag ]]></b:skin>.

#singlepisode{background:#eceff4;border:1px solid rgba(255,255,255,.1);overflow:hidden;margin-bottom:15px;box-shadow:1px 3px 8px rgba(49,49,49,.1)}#singlepisode img{max-width:100%;height:auto}#singlepisode .headlist{overflow:hidden;padding:15px;border-bottom:1px solid rgba(255,255,255,.1)}#singlepisode .headlist .thumb{float:left;overflow:hidden;width:60px;height:60px;border-radius:50%;border:2px solid #333;margin-right:10px}#singlepisode .headlist .det{overflow:hidden;color:#fff;padding-top:9px}#singlepisode .headlist .det h3{margin:0;margin-bottom:0;margin-bottom:5px;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}#singlepisode .headlist .det h3 a{color:#333}#singlepisode .headlist .det span{font-size:13px;color:#aaa}#singlepisode .headlist .det span i{color:#eda400}#singlepisode .episodelist{position:relative}#singlepisode .episodelist ul{overflow:hidden;list-style:none;margin:0;padding:0;max-height:350px}#singlepisode .episodelist ul li{overflow:hidden;position:relative}#singlepisode .episodelist ul li.selected,#singlepisode .episodelist ul li:hover{background-color:#00000033}#singlepisode .episodelist ul li a{display:block;padding:10px;overflow:hidden}#singlepisode .episodelist ul li .thumbnel{float:left;width:100px;height:60px;overflow:hidden;position:relative;margin-right:10px}#singlepisode .episodelist ul li .thumbnel img{width:100%;min-height:60px}#singlepisode .episodelist ul li .thumbnel .nowplay{position:absolute;top:0;left:0;width:100%;height:100%;line-height:60px;color:rgba(255,255,255,.68);text-align:center;font-size:30px;background:rgba(0,0,0,.8)}#singlepisode .episodelist ul li .thumbnel .nowplay .far{line-height:60px}#singlepisode .episodelist ul li .playinfo{overflow:hidden;color:#000;padding-top:5px}#singlepisode .episodelist ul li .playinfo h4{margin:0;margin-bottom:0;margin-bottom:5px;font-weight:500;font-size:14px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}#singlepisode .episodelist ul li .playinfo span{font-size:12px;color:#000000C0}

Artikel Terkait

28 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>

Emoticon

  • Yoredaze
    14 Agustus 2022 16.18
    Profil: https://www.blogger.com/profile/15275690021887417112
    Min, untuk thumbnail gambar per episodenya apakah bisa berbeda²?
    • Шош. Сом
      14 Agustus 2022 18.01
      Profil: https://www.blogger.com/profile/11131198046075365419
      upload gambar berbeda di setiap postingan.
  • Berkas Kita
    14 Agustus 2022 17.56
    Profil: https://www.blogger.com/profile/05392949523370725401
    akhirnya..... makasih min.
  • Yoredaze
    15 Agustus 2022 08.00
    Profil: https://www.blogger.com/profile/15275690021887417112
    Halo, barusan saya ke warnet untuk memasang tutorialnya, Kenapa tidak bisa ya min?, Oh iya berikut pertanyaan saya, 1. Untuk labelmain (Series) itu apakah harus kita masukan juga di label blogger? 2. Untuk label name pada html apakah harus ada juga di post info? (Btw saya pakai tutorial yang Var.default)
    • Шош. Сом
      15 Agustus 2022 08.19
      Profil: https://www.blogger.com/profile/11131198046075365419
      contoh blog yang di demo bisa kok versi default: kumapoi.my.id.

      labelMain itu untuk membedakan postingan chapter dan Info. contoh: Anime, Ongoing, Action, dll. label tersebut kan tidak ada di post chapter.

      sedangkan label Name ini label yang menggabungkan semua post tersebut contoh: One Piece. di dalam label tersebut terdapat post chapter dan post info nya.
    • Yoredaze
      15 Agustus 2022 19.16
      Profil: https://www.blogger.com/profile/15275690021887417112
      Jadi apabila labelMain saya biarkan series, di label postingan saya juga harus cantumkan series?
    • Шош. Сом
      15 Agustus 2022 20.36
      Profil: https://www.blogger.com/profile/11131198046075365419
      ya khusus post info
  • Drakor
    15 Agustus 2022 15.41
    Profil: https://www.blogger.com/profile/02310403126872582972
    Yeah akhirnya rilis di sini
  • Yare yare
    16 Agustus 2022 01.15
    Profil: https://www.blogger.com/profile/12983379812204079213
    min, saya sudah ikuti sesuai tutorial, tapi tidak bisa, kenapa ya
    • Шош. Сом
      16 Agustus 2022 06.40
      Profil: https://www.blogger.com/profile/11131198046075365419
      mana demo nya biar di cek?
    • Yare yare
      20 Agustus 2022 01.10
      Profil: https://www.blogger.com/profile/12983379812204079213
      https://www.yoredaze.com/2022/07/hataraku-maou-sama-season-2.html
    • Yare yare
      20 Agustus 2022 01.13
      Profil: https://www.blogger.com/profile/12983379812204079213
      https://i.ibb.co/wChm3kn/1.png
    • Yare yare
      20 Agustus 2022 01.14
      Profil: https://www.blogger.com/profile/12983379812204079213
      ini thema lama mimin, yang seleseven, mungkin ga bisa karena bentrok kali ya? btw javascript sama css udah sesuai arahan tutorial
    • Rio Kazuto
      20 Agustus 2022 07.31
      Profil: https://www.blogger.com/profile/16199607135379820616
      letak javasriptny diatas kode
    • Rio Kazuto
      20 Agustus 2022 07.33
      Profil: https://www.blogger.com/profile/16199607135379820616
      peletakan javascriptnya
    • Шош. Сом
      20 Agustus 2022 08.17
      Profil: https://www.blogger.com/profile/11131198046075365419
      ver default pasang script nya di atas tag </head>.
  • Kang Nolep
    16 Agustus 2022 16.02
    Profil: https://www.blogger.com/profile/02724958570048647984
    boleh juga
  • Tim-Tam
    18 Agustus 2022 19.41
    Profil: https://www.blogger.com/profile/00289934741015083141
    grabber MAL nya rilis lagi dong
  • Yare yare
    22 Agustus 2022 08.28
    Profil: https://www.blogger.com/profile/12983379812204079213
    min, kenapa episodenya ga bisa di scroll ya? https://www.yoredaze.com/2022/04/spy-x-family.html
    • Шош. Сом
      22 Agustus 2022 08.57
      Profil: https://www.blogger.com/profile/11131198046075365419
      cari ini di css nya #singlepisode .episodelist ul.
      ganti bagian overflow:hidden; menjadi overflow:auto;
  • Yare yare
    22 Agustus 2022 11.20
    Profil: https://www.blogger.com/profile/12983379812204079213
    https://i.ibb.co/B48cnFQ/Screenshot-2.png Min, di samping tanggal kan ada Eps ya, gimana cara biar cuma ada tanggal min, jadi yang eps di sebelah tanggal di hapus aja, karena diatasnya udah ada episodenya
    • Шош. Сом
      22 Agustus 2022 14.57
      Profil: https://www.blogger.com/profile/11131198046075365419
      di script nya cari ${t} - ${e.date} ganti jadi ${e.date}
    • Шош. Сом
      22 Agustus 2022 15.01
      Profil: https://www.blogger.com/profile/11131198046075365419
      ini yang versi default nya. ${n} - ${l(e.published.$t)} menjadi ${l(e.published.$t)}.

      yang di atas versi BloggerScript
  • Usakami Desu
    3 September 2022 04.39
    Profil: https://www.blogger.com/profile/07922951496975549865
    Bang ada tool grab mal ga.
    Yang udah terintegrasi sama CSS.
    Bayar juga gpp
    • Шош. Сом
      16 September 2022 13.59
      Profil: https://www.blogger.com/profile/11131198046075365419
      https://www.dayat.id/2022/09/grabber-script-dan-template.html
  • Yoredaze
    11 September 2022 06.08
    Profil: https://www.blogger.com/profile/15275690021887417112
    Min, biar gambar yang rounded, sama tulisan ongoingnya muncul, Pokoknya mirip seperti demo deh, itu gimana min? beda ya htmlnya?
    • Шош. Сом
      11 September 2022 08.29
      Profil: https://www.blogger.com/profile/11131198046075365419
      tambahkan css ini.
      #singlepisode .episodelist ul li .thumbnel img {
      object-fit: cover;
      }
      #singlepisode .episodelist ul li .thumbnel {
      width: 60px;
      border-radius: 50%
      }

      Untuk Text Ongoing, tambahkan label Ongoing ke dalam postingan info.
  • audi sw
    14 September 2022 15.26
    Profil: https://www.blogger.com/profile/01231570565589206063
    min, ditambahin mode gelap nya dong episode list nya