How to Make Anime Anime Info or information in Blog

Cara Membuat Anime Info di Blog - Pasti kalian pernah mengunjungi web anime seperti Anime Fansub, Anime Fanshare, Streaming Anime, Anime Batch, dan lain lain. Seperti website Animeindo, Oploverz, Nekonime, Wardhanime, Animekompi dan banyak lagi fansub-fansub dan fanshare anime streaming lainnya. Ketika kita melihat anime yang baru rilis, disitu ada informasi anime yang kita lihat dahulu sebelum kita download maupun kita nonton streaming online nya.

Nah pada kali ini saya akan memberi tutorial Bagaimana Cara Membuat Anime Info seperti Fansub atau Fanshare Video Streaming lainnya. Bagaimana tutorial nya ? Kita langsung praktek tek tek di bawah ini..

Cara Pemasangan Anime Info di Blog

1. Pertama sobat menuju ke Editor Template terlebih dahulu, jika sudah cari Kode </b:skin> atau </style> *Tergantung Template yang sobat pakai. 
2. Dan Copy Kode di bawah ini tepat di atas kode tersebut :

/* Anime Info CSS - Shana Chanz */
#animeinfo{font-family: 'Open Sans',sans-serif}
#animeinfo a{text-decoration: none;font-family: 'Open Sans',sans-serif}
#animeinfo a:hover{text-decoration: underline}
#animeinfo h1{font-size: 15px;line-height: normal;margin-bottom: 10px}
#animeinfo .imgdesc{overflow: hidden;margin-bottom: 10px;font-size: 13px}
#animeinfo .imgdesc img{float: left;width: 150px;height: 210px;padding: 1px;border: 1px solid #DDD;margin-right: 10px}
#animeinfo .desc{text-align: justify;font-family: segoe ui;color: #4B5360}
#animeinfo .desc .synopsis{margin: 0;font-family: arial;font-size: 12px;line-height: 20px}
.desc .latestwrap{float: right;border: 1px solid #DDD;margin-left: 10px;padding: 1px;overflow: hidden;width: 150px;text-align: center}
.desc .latestwrap .latesthead{background: #333;color: #FFF;line-height: 27px;font-size: 13px}
.desc .latestwrap .latesteps{line-height: 34px;font-size: 17px;color: #4B5360}
.desc .latestwrap .latestnow{line-height: 27px;font-size: 13px}
.desc .latestwrap .latestnow a{display: block;background: #F13E3E;color: #FFF}
.infolist{padding: 6px 10px;font-size: 13px;background: #F7F7F7;border: 1px solid #E0DFDF;margin-bottom: 5px;color: #444}
.infolist a{color: #000}
.infolist ul{margin: 0px !important;padding: 0px !important}
.infolist ul li{line-height: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #333;list-style: none}
.infolist ul li b{display: block;float: left;width: 95px;color: #333}
.epslist{width: 100%;margin: 0;padding: 0;border-collapse: collapse;border-spacing: 0;font-family: tahoma}
.epslist tr:hover{background: #555 !important}
.epslist tr:hover th{background:#333}
.epslist tr:hover a, .epslist tr:hover td{color: #fff;transition: all 0.25s;background:transparent}
.epslist tr:hover td.dl {color: #fff;transition: all 0.25s;background: #f13e3e}
.epslist th{background: #333;color: #FFF;text-align:left}
.epslist th.eps, .epslist th.dl{text-align: center}
.epslist th, .epslist td{padding: 3px 5px !important;font-size: 11px;border: 1px solid #fff;font-weight: 400}
.epslist a{color: #000;text-decoration: none}
.epslist tr:nth-child(even){background: #F0F0F0}
.epslist tr:nth-child(odd){background: #F7F7F7}
.epslist td.eps{text-align: center}
.epslist td.dl{text-align: center;background: #F13E3E}
.epslist td.dl a{color: #fff}
.epslist td a:hover{text-decoration: underline}

3. Jika sudah lalu save template kalian
4. Kemudian ke Pages > New Pages (buat laman atau page baru) atau bisa juga di Posts > Create a new Post lalu buka pada tab HTML (bukan ketikan compose!) karena ini bertipe code html maka kita harus menempatkannya pada HTML
5. Selanjutnya Copy Kode di bawah ini, lalu edit sedikit kode yang sudah di tandain untuk postingannya

<div id="animeinfo">
 <h1>Tonton atau Download "Tulis Judul Anime" Subtitle Indonesia</h1>
 <div class="imgdesc">
  <img src="Link URL Gambar anime" alt="Judul Anime"/>
  <div class="desc">
   <b>Sinopsis "Tulis Judul Anime"</b>
   <div class="latestwrap">
    <div class="latesthead">Episode Terbaru</div>
    <div class="latesteps"> Episode 03</div>
    <div class="latestnow">
     <a href="Link URL Episode Terakhir rilis">Tonton Sekarang!</a>
    </div>
   </div>
   <div id="synopsis">
    Sinopsis Serial Anime
   </div>
  </div>
 </div>
 <div class="infolist">
  <ul>
   <li>
    <b>Judul Asli</b>: Nama Lain Anime / Nama Jepang Anime
   </li>
   <li>
    <b>Japanese Title</b>: Title Japan Anime
   </li>
   <li>
    <b>Episode</b>: Total Episode Anime 
   </li>
   <li>
    <b>Status</b>: Status Anime
   </li>
   <li>
    <b>Disiarkan</b>: Tanggal Rilis Anime
   </li>
   <li>
    <b>Produser</b>: Produser Anime
   </li>
   <li>
    <b>Skor</b>: Skor Anime
   </li>
   <li>
    <b>Genres</b>:
     <a href="Link Genre 1">Genre Anime 1</a>,
     <a href="Link Genre 2">Genre Anime 2</a>,
     <a href="Link Genre 3">Genre Anime 3</a>,
     <a href="Link Genre 4">Genre Anime 4</a>,
   </li>
   <li>
    <b>Durasi</b>: Durasi Anime per Episode
   </li>
  </ul>
 </div>
 <table class="epslist">
  <thead>
   <tr>
    <th class="eps">Episode #</th>
    <th>Judul Episode</th>
    <th>Rilisan Tanggal</th>
    <th class="dl">Download</th>
   </tr>
  </thead>
  <tbody>
     <!-- Episode 01 -->
   <tr>
    <td class="eps">
     <a href="#Link Anime">01</a>
    </td>
    <td>
     <a href="#Link Anime">Naruto Shippuden 01 Sub Indo</a>
    </td>
    <td>
     Tanggal Rilis
    </td>
    <td class="dl">
     <a href="#Link Anime">Download!</a>
    </td>
   </tr>

     <!-- Episode 02 -->
   <tr>
    <td class="eps">
     <a href="#Link Anime">02</a>
    </td>
    <td>
     <a href="#Link Anime">Naruto Shippuden 02 Sub Indo</a>
    </td>
    <td>
     Tanggal Rilis
    </td>
    <td class="dl">
     <a href="#Link Anime">Download!</a>
    </td>
   </tr>

     <!-- Episode 03 -->
   <tr>
    <td class="eps">
     <a href="#Link Anime">03</a>
    </td>
    <td>
     <a href="#Link Anime">Naruto Shippuden 03 Sub Indo</a>
    </td>
    <td>
     Tanggal Rilis
    </td>
    <td class="dl">
     <a href="#Link Anime">Download!</a>
    </td>
   </tr>
   
  </tbody>
 </table>
</div>

6. Untuk menambahkan episode banyak kalian hanya tinggal menambahkannya kode berikut di bawah nya

   <tr>
    <td class="eps">
     <a href="#Link Anime">01</a>
    </td>
    <td>
     <a href="#Link Anime">Naruto Shippuden 01 Sub Indo</a>
    </td>
    <td>
     Tanggal Rilis
    </td>
    <td class="dl">
     <a href="#Link Anime">Download!</a>
    </td>
   </tr>

Jika sudah lalu siap untuk di Publikasikan!
Cek Demo
Sekian tutorial yang saya bagikan hari ini tentang Cara Membuat Anime Info di Blog Fansub/Fanshare..
Semoga dapat bermanfaat untuk kita semua, terima kasih :)