Cara membuat Ongoing Series seperti AWSubs

Kali ini Kang Taha akan memberikan sebuah tutorial yang sangat dicari oleh blogger anime tutorial tersebut adalah cara membuat Ongoing series seperti salah satu fansubs yaitu AWSubs (wardhanime).
Kelebihan dari fitur ongoing series ini adalah memiliki tampilan yang keren dan dilengkapi dengan gambar cover series anime sehingga memiliki daya tarik sendiri bagi pengunjung. Disamping itu cara pembuatannya cukup mudah juga. jadi tak perlu risau tentang editingnya. Disini Kang Taha akan memberikan tutorial yang begitu mudah dipahami buat para blogger anime. Langsung saja tanpa basa basi lagi berikut ini tutorial cara membuat ongoing series seperti AWSubs.

Yang pertama kali dilakukan seperti biasanya copas CSS dibawah ini dan letakan diatas ]]></b:skin> dan kemudian klik simpan/save.

 /*Ongoing wardhanime - Anices*/
.ongoinginfo {
    overflow: hidden;
    float: left;
    width: 346px;
    height: 139px;
    margin-right: 15px;
    margin-bottom: 15px;
}
a {
    text-decoration: none;
    color: #0033cc;
}
.ongoinginfo img {
    width: 105px;
    padding: 2px;
    border: 1px solid #DDD;
    height: 133px;
    margin-right: 5px;
    float: left;
}
.onleft {
    overflow: hidden;
    position: relative;
}
#animelist .onleft h98 {
    text-transform: none;
    font-size: 13px;
    margin: 0;
    font-family: helvetica;
    border-bottom: 0;
    padding: 0;
}
#animelist .onleft h98 a {
    color: #1A3E74;
}
.onleft .kiri {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
    color: #696969;
}
.onleft .kiri {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
    color: #696969;
}
.onleft .kiri span a {
    color: #696969;
} 

Setelah itu copas kode HTML dibawah ini dan letakan didalam postingan/halaman sobat. jika merasa sudah cocok klik publikasikan.

 <div class="ongoinginfo">
<a href="Link anime">
<img width="225" height="337" src="Link gambar cover" class="attachment-post-thumbnail wp-post-image" alt="Cover"></a>
<div class="onleft">
<h98><a href="Link anime">Judul Anime</a></h98>
<div class="kiri"><span><a href="#" rel="tag">Judul Jepang</a></span></div>
<div class="kiri"><a href="#" rel="tag">TV Series</a></div>
<div class="kiri"><a href="#" rel="tag">Drama</a></div>
<div class="kiri">Total Episode: <a href="#" rel="tag">Episode</a></div>
<div class="cuplik"><z>Drama mafia klasik yang terjadi selama zaman larangan minuman keras. Di distrik tak berhukum di <a class="read-more" href="Link anime">more details…</a></z>
</div>
</div>
</div>

<div class="ongoinginfo">
<a href="Link anime">
<img width="225" height="310" src="Link gambar cover" class="attachment-post-thumbnail wp-post-image" alt="Cover"></a>
<div class="onleft">
<h98><a href="Link anime">Judul Anime</a></h98>
<div class="kiri"><span><a href="#" rel="tag">Judul Jepang</a></span></div>
<div class="kiri"><a href="#" rel="tag">TV Series</a></div>
<div class="kiri"><a href="#" rel="tag">Comedy</a>, <a href="#" rel="tag">Slice of Life</a></div>
<div class="kiri">Total Episode: <a href="#" rel="tag">Episode</a></div>
<div class="cuplik"><z>Setelah kehilangan istrinya, seorang guru Matematika Kouhei Inuzuka berusaha sebaik mungkin <a class="read-more" href="Link anime">more details…</a></z>
</div>
</div>
</div> 

Ya itulah alat2 yang perlu disiapkan. jika ingin melihat demonya kil tombol dibawah ini.

Demo

Bagaimana menarik bukan? lagsung saja untuk membahas keterangannya.
Ket:
- Link anime = ganti dengan link Anime series kalian
- Link gambar cover = ganti dengan link gambar cover series animenya
- Warna kuning = ganti dengan ( Judul anime, Judul jepang, Type, Genre dan jumlah episodenya )
- Warna biru = ganti dengan sinopsis animenya. ( disarangkan tidak lebih dari 95 karakter/huruf )
- Tanda # = Ganti dengan link tujuan sesuai dengan posisinya masing2 ( Jika tidak memiliki link tujuan lebih baik tetap di isi tanda # )

Tambahan:
Jika series anime tersebut memiliki Genre lebih dari satu. caranya pisahkan kode HTML dengan tanda kome (,).

Jika masih kurang mengerti silahkan berkomentar/ chat admin via FB. dan jika ada BUG silahkan berkomentar pada kolom komentar dibawah ini.

Artikel Terkait

Cara membuat Ongoing Series seperti AWSubs

4/ 5

Oleh Tahacak

Tahacak 13.00 3 Komentar