Cara Membuat Info Anime Untuk Blogger dan Wordpress

Cara Membuat Info Anime Untuk Blogger dan Wordpress
Kali ini kita akan belajar cara membuat Info Anime untuk Blogger dan Wordpress, contoh info anime ini saya ambil dari Wardhanime, seperti biasa postingan ini hanya untuk bahan pembelajaran mengenai cara membuat info anime untuk fansub. Nanti akan saya posting juga info anime dari fansub yang lain sebagai contoh nanti, tapi untuk sekarang kita pakai yang ini dulu.

Pertama, kalian masuk Blogger > Theme > Edit HTML. Kemudian kalian cari kode </style> atau ]]></b:skin> bisa kalian pilih mana saja bebas. Lalu copy CSS di bawah ini tepat di atas atau sebelum kode tersebut.

/* CSS Info Anime Wardhanime */
.imganime {
    float: left;
    margin-right: 1px;
}
.imganime img {
    width: 166px;
    height: 223px;
    border: 1px solid #E7E7E7;
    padding: 4px;
    margin-top: 0px;
    border-radius: 0px;
    background: none repeat scroll 0% 0% #FFF;
}
.data {
    position: relative;
}
.infos {
    font-family: "Open sans",sans-serif;
    font-size: 12px;
    line-height: 25px;
    padding: 0px 5px;
    border-bottom: 1px solid #FFF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.infos:nth-child(2n+1) {
    background: none repeat scroll 0% 0% #FAFAFA;
}
.infos b {
    display: block;
    float: left;
    width: 95px;
}
.infos a {
    color: #333;
}
.deskripsi {
    text-align: justify;
    font-size: 14px;
    margin: 1px 0px;
    font-family: "Open sans",sans-serif;
    border: 1px solid #E1EAF0;
    padding: 10px;
}
.deskripsi b {
    text-align: justify;
    font-size: 14px;
    font-family: "Open sans",sans-serif;
}
.isi {
    color: #333;
    font-size: 12px;
    font-family: "Open sans",sans-serif;
}
.judulanime {
    position: relative;
    padding: 6px 5px;
    color: #646464;
    font-weight: bold;
    font-size: 11px;
    font-family: helvetica,sans-serif;
    border-bottom: 1px solid #FFF;
    background: linear-gradient(to bottom, #FCFCFC 0%, #E8E8E8 100%) repeat scroll 0% 0% transparent;
}
.pdate {
    position: absolute;
    top: 0px;
    line-height: 26px;
    right: 0px;
    padding: 0px 6px;
    text-align: center;
    border-left: 1px solid #FFF;
    width: 120px;
}
.anilist:nth-child(2n) {
    background: none repeat scroll 0% 0% #F5F5F5;
}
.anilist {
    list-style: outside none none;
    padding: 0px 5px;
    border-bottom: 1px solid #FFF;
    line-height: 25px;
    height: 25px;
}
.tautan {
    width: 467px;
    font-size: 12px;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-size: 14px auto;
    background-position: 0px center;
}
.tautan a {
    color: #505050;
}
.ldate {
    float: right;
    width: 132px;
    font-size: 12px;
    text-align: center;
    margin-right: -5px;
    color: #505050;
    font-family: "Open sans",sans-serif;
    border-left: 1px solid #FFF;
    background: none repeat scroll 0% 0% #E5E8F0;
}
.ldate a {
    color: #555;
}

Kemudian kalian save, dan buat halaman baru untuk membuat info animenya. Kemudian masukkan HTML dibawah ini, untuk informasi nya bisa kalian ganti sesuai dengan anime nya.
Disini saya pakai anime Grisaia no Kajitsu.

 <div class="kanan">
<div class="imganime">
<img src="https://myanimelist.cdn-dena.com/images/anime/10/73591.jpg" class="attachment-post-thumbnail wp-post-image" alt="Grisaia_no_Kajitsu" height="350" width="247"></div>
</div>
<div class="kiri">
<div class="data">
<div class="infos"><b>Japanese</b>: <a href="#">グリザイアの果実</a></div>
<div class="infos"><b>Producer</b>: <a href="#">8bit</a>, <a href="#">NBCUniversal Entertainment</a>, <a href="#" rel="tag">Sentai Filmworks</a></div>
<div class="infos"><b>Type</b>: <a href="#">TV Series</a></div>
<div class="infos"><b>Status</b>: <a href="#">Ongoing</a></div>
<div class="infos"><b>Genre</b>: <a href="#">Drama</a>, <a href="#">Psychological</a>, <a href="#">Romance</a>, <a href="#">School</a></div>
<div class="infos"><b>Durasi</b>: <a href="#">23 min. per episode</a></div>
<div class="infos"><b>Episode</b>: <a href="#">-</a></div>
<div class="infos"><b>Rating</b>: <a href="#">7.83</a></div>
<div class="infos"><b>Added On</b>: October 6th, 2014</div>
</div>
<div class="deskripsi"><b>Sinopsis:</b><br><span class="isi"><p style="text-align: justify;"><span style="color: #000000;">Akademi Mihama, sekolah khusus yang dibuat untuk melestarikan 5 buah yang sudah jatuh terlalu jauh dari pohonnya. Di Akademi tersebut hanya ada 5 siswi yang masing-masing memiliki masalah pribadi. Lalu datanglah seorang siswa laki-laki bernama Kazami Yuuji. apa yang akan dilakukan oleh Kazami Yuuji disekolah barunya?</span></p>
<p></p><center><p></p>

</center></span></div>
<div class="judulanime">Grisaia no Kajitsu Anime Episodes <div class="pdate">Download</div></div>
</div>

<li class="anilist">
<div class="tautan">
<a href="#">Grisaia no Kajitsu Episode 9 Subtitle Indonesia</a></div><div class="ldate"><a href="http://wardhanime.net/grisaia-no-kajitsu-episode-9-subtitle-indonesia/">Download Now!</a></div></li>
<li class="anilist">
<div class="tautan">
<a href="#">Grisaia no Kajitsu Episode 8 Subtitle Indonesia</a></div><div class="ldate"><a href="#">Download Now!</a></div></li>
<li class="anilist">
<div class="tautan">
<a href="#">Grisaia no Kajitsu Episode 7 Subtitle Indonesia</a></div><div class="ldate"><a href="#">Download Now!</a></div></li> 

Setelah itu selesai.

Catatan: Untuk info animenya pasti kalian sudah pada tau bagaimana cara menggantinya, kalo belum silakan tinggalkan komentar.

See the Pen Info Anime by hilmanfad (@hilmanfad) on CodePen.