Ads

Source Code Anime Info Samehadaku Part#3

Lanjut Part#3, Cara Membuat Anime Info Serperti Samehadaku. dalam Part#3 akan membuat daftar episode dari anime yang akan di posting.

Anime Info Samehadaku Part#3
Dagruel

Anime Info Samehadaku Part#3 - Episode List

Dari awal pasang CSS berikut di dalam template masing-masing.

.file-list {padding-left: 14px;padding-right: 14px;padding-bottom: 14px;padding-top: 14px;}
.file-list a {font-size: 14px;font-weight: 500;}
.list-judul {padding: 12px;border-radius: 4px;font-weight: 500;font-size: 20px;padding-left: 8px;padding-top: 5px;border-bottom: 1px solid #f1f1f1;}
.list-judul h3 {margin: 0;font-size: 19px;}
.ep-list ul {padding: 0;list-style: none;margin: 0;max-height: 250px;overflow: auto;}
.ep-list ul::-webkit-scrollbar {width: 2px;height: 2px;}
.ep-list ul::-webkit-scrollbar-thumb {border-radius: 7px;background-color: #009688;}
.ep-list ul li {overflow: hidden;padding: 11px 15px;font-size: 11px;position: relative;margin-right: 9px;width: 100%;border-bottom: 1px solid #eceff5;padding-left: 8px;}
.ep-list ul li:first-child {padding-top: 11px;}
.ep-list ul li .ep-right {float: left;}
.file-list span.eps {background: #3b95f0;padding: 10px;color: #fff;margin-right: 9px;width: 50px;overflow: hidden;display: block;text-align: center;}
.ep-list ul li .ep-left {float: left;}
.ep-list ul li .eps-jdl {line-height: 21px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;float: left;width: 100%;}
span.eps a, span.eps-jdl a {color: #fff !important;font-weight: 500;}
span.eps-jdl a {color: #000 !important;}
span.eps-jdl a:hover {color: #009688 !important;}
.file-list span {font-size: 7px;color: #8e8b8b;}
.file-list span.eps-date {font-size: 14px;display: block;}
@media only screen and (max-width: 769px) {
.ep-list ul li .ep-left {width: 79%;overflow: hidden;}
}

Jika sudah, mulai penerapan nya dengan menyalin HTML berikut.

<div class='file-list'>
  <div class='list-judul'>
    <h3>Judul Anime</h3>
  </div>
  <div class='ep-list'>
    <ul class='ep-item'>
      <li>Tempel Disini</li>
      <li>Tempel Disini</li>
    </ul>
  </div>
</div>
Ganti warna yang ditandai sesuai keinginan kalian. pada Tag <li> ganti tulisan Tempel Disini dengan html dibawah.
<div class='ep-right'>
  <span class='eps'>
    <a href='#'>01</a>
  </span>
</div>
<div class='ep-left'>
  <span class='eps-jdl'>
    <a href='#'>Judul Anime Episode 01</a>
  </span>
  <span class='eps-date'>Tanggal Rilis</span>
</div>
HTML ini untuk menambahkan jumlah eps yang tesedia. misalkan dalam postingan terdapat 3 eps maka harus menempelkan HTML diatas 3x di dalam Tag <li>, ok mengerti. Ganti tulisan yang ditandai sesuai keinginan kalian.

Sekian Postingan saya kali ini semoga bermanfaat, dan jika ada yang ingin di tanyakan silahkan berkomentar dibawah. Sampai jumpa dipostingan selanjutnya Terima Kasih.

https://samehadaku.vip/
https://demo.eastheme.com/eastplay/

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

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!