Cara Membuat Anime Info Seperti Wardhanime

Kijin Tutorial on

Sunday, 30 October 2016

Cara Membuat Anime Info Seperti Wardhanime - Anime Info atau Informasi Anime biasa digunakan Fansub atau Fanshare agar pengunjung mengetahui sinopsis, jumlah episode, rating, genre, durasi dari anime tersebut. Biasanya dalam Anime Info juga terdapat tabel episode anime untuk mempermudah pengunjung mendownload anime favoritnya.

Sebelumnya saya sudah membagikan ilmu tentang Cara Membuat Anime Info Seperti Oploverz. Pada kesempatan kali ini saya akan berbagi ilmu tentang Cara Membuat Anime Info Seperti Wardhanime. Langsung saja mari ikuti langkah-langkah yang ada di bawah ini.

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

/* CSS Anime Info Wardhanime - Aka321 */
.aiaws321{font-size: 12px;font-family: 'Open sans', sans-serif}
.aiaws321 h2{font-weight: bold;font-size: 14px;border-bottom: 3px solid #2977BE;margin-bottom: 1px;padding: 4px 0}
.aiaws321 .infoimg{float: left;margin-right: 1px}
.aiaws321 .infoimg img{width: 166px;height: 223px;border: 1px solid #E7E7E7;padding: 4px;background: #FFF}
.aiaws321 .infolist .item{line-height: 25px;padding: 0 5px;border-bottom: 1px solid #FFF;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.aiaws321 .infolist .item:nth-child(odd){background: #FAFAFA}
.aiaws321 .infolist .item:nth-child(even){background: #F5F5F5}
.aiaws321 .infolist .item b{display: block;float: left;width: 95px}
.aiaws321 .infolist .item a{color: #333;text-decoration: none}
.aiaws321 .synopsis{text-align: justify;font-size: 14px;margin: 1px 0;border: 1px solid #E1EAF0;padding: 10px}
.aiaws321 .synopsis0{font-size: 12px}
.aiaws321 .synopsis0 p{margin: 1em 0 !important}
.aiaws321 .epslist{width: 100%;margin: 0;padding: 0;border-collapse: collapse;border-spacing: 0}
.aiaws321 .epslist th, .epslist td{border: 1px solid #fff}
.aiaws321 .epslist th{text-align: left;padding: 6px 5px;color: #646464;font-weight: bold;font-size: 11px;background: rgb(252,252,252);background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(232,232,232,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(232,232,232,1)));background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(232,232,232,1) 100%);background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(232,232,232,1) 100%);background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(232,232,232,1) 100%);background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(232,232,232,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#e8e8e8',GradientType=0 )}
.aiaws321 .epslist th.dl{text-align: center}
.aiaws321 .epslist tr:nth-child(odd){background: #FAFAFA}
.aiaws321 .epslist tr:nth-child(even){background: #F5F5F5}
.aiaws321 .epslist tr:hover{background: #FAFAFA !important}
.aiaws321 .epslist td{padding: 0 5px;line-height: 25px;height: 25px}
.aiaws321 .epslist td.dl{width: 130px;text-align: center;background: #E5E8F0}
.aiaws321 .epslist a{font-size: 12px;color: #505050;font-family: 'Open sans', sans-serif;text-decoration: none}

• Jika Sudah, Silahkan Simpan Template.

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

<div class="aiaws321">
 <h2>Judul Anime</h2>
 <div class="infoanime">
  <div class="infoimg">
    <img src="Link Gambar/Cover Anime" alt="Judul Anime">
  </div>
  <div class="infolist">
    <div class="item"><b>Japanese</b>: Nama Lain / Nama Jepang Anime</div>
    <div class="item"><b>Producer</b>: Produser Anime</div>
    <div class="item"><b>Type</b>: Tipe Anime</div>
    <div class="item"><b>Status</b>: Status Anime</div>
    <div class="item"><b>Genres</b>:
     <a href="Link Genre">Genre Anime</a>,
     <a href="Link Genre">Genre Anime</a>,
     <a href="Link Genre">Genre Anime</a>
    </div>
    <div class="item"><b>Durasi</b>: Durasi Anime</div>
    <div class="item"><b>Episode</b>: Episode Anime</div>
    <div class="item"><b>Rating</b>: Rating Anime</div>
    <div class="item"><b>Added On</b>: Tanggal Rilis Anime</div>
  </div>
 </div>
 <div class="synopsis">
   <b>Sinopsis:</b></br>
   <span class="synopsis0">
    <p>Sinopsis Anime</p>
    <center><iframe src="Link Trailer Anime" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></center>
   </span>
 </div>
 <table class="epslist">
  <thead>
   <tr>
    <th>Nama Anime Anime Episodes</th>
    <th class="dl">Download</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>
     <a href="Link Anime">Judul Anime</a>
    </td>
    <td class="dl">
     <a href="Link Anime">Download Now!</a>
    </td>
   </tr>
  </tbody>
 </table>
</div>

• Setelah itu, dibawah ini merupakan kode untuk menambah episode anime di anime info. Untuk menambahkan episode anime, silahkan salin dan terapkan pada kode diatas sebelum </tbody>.

   <tr>
    <td>
     <a href="Link Anime">Judul Anime</a>
    </td>
    <td class="dl">
     <a href="Link Anime">Download Now!</a>
    </td>
   </tr>

• Jika sudah, silahkan kamu ganti kode yang sudah ditandai sesuai dengan tanda kode tersebut. Lalu, publikasikan dan lihat bagaimana hasilnya.

• Live Preview

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

Labels: Anime Info, Tutorial

Thanks for reading Cara Membuat Anime Info Seperti Wardhanime. Please share...!