30 Oktober 2016

Cara Membuat Anime Info Seperti Wardhanime

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.

Cara Membuat Anime Info Seperti Wardhanime, Cara Membuat Anime Info Seperti Fansub, Cara Membuat Anime Info Fansub, Cara Membuat Fansub, Cara Membuat Seperti Wardhanime, Aka321, Aka321.blogspot.com, Tutorial Fansub, Cara Membuat Fansub

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.


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

Artikel Terkait

Seorang Blogger yang mengharapkan recehan dari blog kecilnya.

4 komentar

Komentar ini telah dihapus oleh pengarang.

sob kok gak respon ya pa gara" gue ngeditnya gk cocok, btw previewnya mati

ga respon bagaimana gan? untuk preview yang mati sudah diberi tahu di sidebar ada pemberitahuannya.

maaf di saya kok pas untuk preview YT kok malah ada tulisan "www.youtube.com menolak untuk tersambung."
kira" kenapa ya min ?

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.
EmoticonEmoticon