Cara Membuat Anime Info Seperti Oploverz - 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.
Ini merupakan postingan pertama saya dalam membuat Anime Info. Pada kesempatan kali ini saya akan berbagi ilmu tentang Cara Membuat Anime Info Seperti Oploverz. 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>
/* Anime Info Oploverz - Aka321 */
#aiopl321{font-family: 'Open Sans',sans-serif}
#aiopl321 a{text-decoration: none;font-family: 'Open Sans',sans-serif}
#aiopl321 a:hover{text-decoration: underline}
#aiopl321 h1{font-size: 15px;line-height: normal;margin-bottom: 10px}
#aiopl321 .imgdesc{overflow: hidden;margin-bottom: 10px;font-size: 13px}
#aiopl321 .imgdesc img{float: left;width: 150px;height: 210px;padding: 1px;border: 1px solid #DDD;margin-right: 10px}
#aiopl321 .desc{text-align: justify;font-family: segoe ui;color: #4B5360}
#aiopl321 .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}
- Jika Sudah, Silahkan Simpan Template.
- Kemudian, Buat postingan baru di halaman statis > Kemudian tambah kode di bawah ini pada Tab HTML (Bukan Compose).
<div id="aiopl321">
<h1>Tonton atau Download "Judul Anime" Subtitle Indonesia</h1>
<div class="imgdesc">
<img src="Link Gambar/Cover Anime" alt="Judul Anime"/>
<div class="desc">
<b>Sinopsis Judul Anime</b>
<div class="latestwrap">
<div class="latesthead">Episode Terbaru</div>
<div class="latesteps"> Episode #</div>
<div class="latestnow">
<a href="Link Anime yang terakhir di rilis">Tonton Sekarang!</a>
</div>
</div>
<div id="synopsis">
Sinopsis Anime
</div>
</div>
</div>
<div class="infolist">
<ul>
<li>
<b>Judul Asli</b>: Nama Lain Anime / Nama Jepang Anime
</li>
<li>
<b>Tipe</b>: Tipe Anime
</li>
<li>
<b>Episode</b>: 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">Genre Anime</a>,
<a href="Link Genre">Genre Anime</a>,
<a href="Link Genre">Genre Anime</a>,
<a href="Link Genre">Genre Anime</a>
</li>
<li>
<b>Durasi</b>: Durasi Anime
</li>
</ul>
</div>
<table class="epslist">
<thead>
<tr>
<th class="eps">Episode #</th>
<th>Judul Episode</th>
<th>Tanggal Posting</th>
<th class="dl">Download</th>
</tr>
</thead>
<tbody>
<tr>
<td class="eps">
<a href="Link Anime">Episode Anime</a>
</td>
<td>
<a href="Link Anime">Judul Anime</a>
</td>
<td>
Tanggal Rilis
</td>
<td class="dl">
<a href="Link Anime">Download!</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 class="eps">
<a href="Link Anime">Episode Anime</a>
</td>
<td>
<a href="Link Anime">Judul Anime</a>
</td>
<td>
Tanggal Rilis
</td>
<td class="dl">
<a href="Link Anime">Download!</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.
kunjungi marfnkz.blogspot.co.id
ReplyDelete