Cara Membuat Anime Info Seperti Tonansub
Cara Membuat Anime Info Seperti Tonansub - 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 Nekonime. Pada kesempatan kali ini saya akan berbagi ilmu tentang Cara Membuat Anime Info Seperti Tonansub. 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 Tonansub - Aka321 */
.aitaf321{font-size: 12px;font-family: 'Open sans', sans-serif}
.aitaf321 .aijdl321{position: relative;margin-top: 0;margin-bottom: 5px;text-align: center;display: block;font-size: 18px}
.aitaf321 .aijdl321:before{position: absolute;top: 50%;z-index: 1;display: block;width: 100%;height: 1px;border-top: 2px solid #ccc;content: ""}
.aitaf321 .aijdl321 span{position: relative;z-index: 1;padding: 0 20px;background: #fff;display: inline-block}
.aitaf321 .infoanime{margin-top: 20px;overflow: hidden}
.aitaf321 .infoimg{float: left;margin-right: 10px}
.aitaf321 .infoimg img{width: 230px;height: 307px;background: #FFF}
.aitaf321 .infolist .item{line-height: 17px;padding: 8px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 13px}
.aitaf321 .infolist .item:nth-child(odd){background: #f7fcfd;border-bottom: 1px solid #ebebeb;border-top: 1px solid #ebebeb}
.aitaf321 .infolist .item:nth-child(even){background: #ffffff}
.aitaf321 .infolist .item b{display: block;float: left;width: 85px}
.aitaf321 .infolist .item a{color: #333;text-decoration: none}
.aitaf321 .synopsis{text-align: center;font-size: 13px;margin: 10px 0;border: 1px solid #deedf1;padding: 10px;background: #f7fcfd}
.synopsis b{font-size: 14px}
.aitaf321 .synopsis0{font-size: 12px}
.aitaf321 .synopsis0 p{margin: 1em 0 !important}
.aitaf321 .epslist{border-collapse: initial;border-spacing: initial;width: 100%;margin: 0;padding: 15px;border-radius: 5px;border: 1px solid #ebebeb;box-shadow: 0 3px 0 0 rgba(0,0,0,0.12)}
.aitaf321 .epslist thead{position: relative;margin-top: 0;margin-bottom: 5px;text-align: center;display: block;font-size: 18px;color: #5e5e5e}
.aitaf321 .epslist thead tr:before{position: absolute;top: 50%;z-index: 1;display: block;width: 100%;height: 1px;border-top: 2px solid #ccc;content: ""}
.aitaf321 .epslist thead th{font-size: 18px;position: relative;z-index: 1;padding: 0 20px;background: #fff;display: inline-block;border: 0px !important}
.aitaf321 .epslist tr{margin-bottom: 12px;display: block}
.aitaf321 .epslist td{line-height: 27px;padding: 10px 25px;font-weight: bold;text-align: center;font-size: 15px;display: block;border: 1px dashed #ebebeb;color: #75c5cf}
.aitaf321 .epslist a:hover{color: #5e5e5e;-webkit-transition: color 0.2s ease-in;-moz-transition: color 0.2s ease-in;-ms-transition: color 0.2s ease-in;-o-transition: color 0.2s ease-in;transition: color 0.2s ease-in}
.aitaf321 .epslist a{color: #75c5cf;text-decoration: none;-webkit-transition: color 0.2s ease-in;-moz-transition: color 0.2s ease-in;-ms-transition: color 0.2s ease-in;-o-transition: color 0.2s ease-in;transition: color 0.2s ease-in}
- 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="aitaf321">
<h2 class="aijdl321">
<span>Nama Anime Subtitle Indonesia</span>
</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>Tipe</b>: Tipe Anime</div>
<div class="item"><b>Genre</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>Status</b>: Status Anime</div>
<div class="item"><b>Durasi</b>: Durasi Anime</div>
<div class="item"><b>Rating</b>: Rating Anime</div>
<div class="item"><b>Episode</b>: Episode Anime</div>
<div class="item"><b>Produser</b>: Produser Anime</div>
<div class="item"><b>Mulai Rilis</b>: Tanggal Rilis Anime</div>
</div>
</div>
<div class="synopsis">
<b>Sinopsis</b></br>
<span class="synopsis0">
<p>Sinopsis Anime</p>
</span>
</div>
<table class="epslist">
<thead>
<tr>
<th>Download Nama Anime</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Nama Anime Episode # Subtitle Indonesia</br>
[ 480p = Server 1 | Server 2 | Server 3 ]</br>
[ 720p = Server 1 | Server 2 | Server 3 ]</br>
</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>
Nama Anime Episode # Subtitle Indonesia</br>
[ 480p = Server 1 | Server 2 | Server 3 ]</br>
[ 720p = Server 1 | Server 2 | Server 3 ]</br>
</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.
