Cara Membuat Ongoing List Seperti Wardhanime

Kijin Tutorial on

Saturday, 9 April 2016

Cara Membuat Ongoing List Seperti Wardhanime - Daftar Ongoing biasa dibuat oleh Fansub agar para pengunjung mudah melihat daftar anime yang masih atau sedang dikerjakan oleh Fansub tersebut.

Ini pertama kali saya membuat Ongoing List. Dan pada kesempatan kali ini saya akan membagikan ilmu tentang Cara Membuat Ongoing List Seperti Wardhanime. Langsung saja kita ikuti langkah-langkah di bawah ini.

• Pertama, Buka Blogger > Edit HTML > Salin, Terapkan dan Simpan Kode di bawah ini sebelum </b:skin> atau </style>

/* CSS Ongoing List Wardhanime - Aka321 */
.ogwrap321{overflow: hidden;float: left;width: 346px;height: 139px;margin-right: 15px;margin-bottom: 15px}
.ogwrap321 img{width: 105px;padding: 2px;border: 1px solid #DDD;height: 133px;margin-right: 5px;float: left}
.oginfo321{overflow: hidden;position: relative}
.oginfo321 h2{text-transform: none;font-size: 13px;margin: 0;font-family: helvetica;border-bottom: 0;padding: 0}
.oginfo321 h2 a{color: #1A3E74}
.ogdesc321{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 11px;color: #696969;line-height: 15px}
.ogdesc321 a{color: #696969}
.ogdesc321 .synopsis321{overflow: visible;white-space: normal}

• Jika sudah, Buat postingan baru di halaman statis > Kemudian tambah kode di bawah ini pada Tab HTML (Bukan Compose).

<div id="ogawss321">
 <div class="ogwrap321">
  <a href=" Link Tujuan ">
   <img src=" Link Gambar "/>
  </a>
  <div class="oginfo321">
   <div class="ogdesc321">
   <!-- Total Episode -->
    <h2><a href=" Link Tujuan "> Nama Anime </a></h2>
   <!-- Other Name / Japanese Name -->
    Nama Lain Anime / Nama Jepang Anime
    <br/>
   <!-- Type -->
    <a href=" Link Tipe Anime "> Tipe Anime </a> 
    <br/>
   <!-- Genre -->
    <a href=" Link Genre "> Genre Anime </a>, 
    <a href=" Link Genre "> Genre Anime </a>, 
    <a href=" Link Genre "> Genre Anime </a>, 
    <a href=" Link Genre "> Genre Anime </a>
    <br/>
   <!-- Total Episode -->
    Total Episode: Episode Anime
    <br/>
   <!-- synopsis -->
    <div class="synopsis321">
     Sinopsis Anime
     <a href=" Link Tujuan ">more details...</a>
    </div>
   </div>
  </div>
 </div>
</div>

• Setelah itu, dibawah ini merupakan kode untuk menambah anime di daftar ongoing. Untuk menambahkan anime, silahkan salin dan terapkan pada kode diatas sebelum </div> terakhir.

 <div class="ogwrap321">
  <a href=" Link Tujuan ">
   <img src=" Link Gambar "/>
  </a>
  <div class="oginfo321">
   <div class="ogdesc321">
   <!-- Total Episode -->
    <h2><a href=" Link Tujuan "> Nama Anime </a></h2>
   <!-- Other Name / Japanese Name -->
    Nama Lain Anime / Nama Jepang Anime
    <br/>
   <!-- Type -->
    <a href=" Link Tipe Anime "> Tipe Anime </a> 
    <br/>
   <!-- Genre -->
    <a href=" Link Genre "> Genre Anime </a>, 
    <a href=" Link Genre "> Genre Anime </a>, 
    <a href=" Link Genre "> Genre Anime </a>, 
    <a href=" Link Genre "> Genre Anime </a>
    <br/>
   <!-- Total Episode -->
    Total Episode: Episode Anime
    <br/>
   <!-- synopsis -->
    <div class="synopsis321">
     Sinopsis Anime
     <a href=" Link Tujuan ">more details...</a>
    </div>
   </div>
  </div>
 </div>

• Jika sudah silahkan publikasikan dan lihat bagaimana hasilnya.

• Demo

Sekian ilmu yang saya bagikan hari ini. Semoga bermanfaat. Terima kasih.

Labels: Ongoing List, Tutorial

Thanks for reading Cara Membuat Ongoing List Seperti Wardhanime. Please share...!