-->

-


Pertama-tama baca bismilah dulu biar berhasil oke!

Tutorial kali ini saya akan membuat Informasi Anime dari Wardhanime. Siapa tau ada yang lebih bagus kasih tau saya. Ini saya buat karena ada request dari Pengunjung, jadi, blog akan nge post kalau ada requestan dari Kalian. Kalo nunggu saya nge post bisa lama. Silahkan, ambil cemilan dan Ikuti saya.
Seperti biasa masuk ke Blogger->Template->HTML
Masukkanlah CSS di bawah ini

/* CSS Founded by Fansublogger */
.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;
}

AWAS JANGAN ADA YANG KELEWAT!!!! 
Sekarang buat Halaman atau Postingan Baru lalu Copy HTML di bawah. Saya ambil contoh Grisaia no Kajitsu.

<div class="kanan">
<div class="imganime">
<img src="http://wardhanime.net/wp-content/uploads/2014/10/Grisaia_no_Kajitsu.png" 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="#">Judul Anime!</a></div><div class="ldate"><a href="#">Download Now!</a></div></li>
<li class="anilist"><div class="tautan"><a href="#">Judul Anime!</a></div><div class="ldate"><a href="#">Download Now!</a></div></li>
<li class="anilist"><div class="tautan"><a href="#">Judul Anime!</a></div><div class="ldate"><a href="#">Download Now!</a></div></li>

Cukup sekian Turorialnya Insyaallah berhasil.... kalo  berhasil jangan lupa BILANG?

Untuk DEMO nya Silahkan liat di bawah sini!!!