Tutorial Membuat Anime Info Style 1 - Banyak Fansub atau Fanshare yang memakai widget ini untuk melatakkan informasi Anime, disini Sobat bisa Melatakkan info Anime seperti Nama,Genre,Producer,synopsis dll. untuk DemoNya Kalian bisa Lihat di bawah ini :
Tutorial Membuat Anime Info Style 1
CMS Blogspot :
1.Masukkan Kode CSS di bawah ini Tepat di atas tag </style> atau </b:skin> .
CMS Wordpress/Dll :
1. Masukkan CSS di bawah ini Di File CSS yang kalian buat.
2. Atau Jika Kalian tidak ingin ribet bisa juga dengan Membuat Internal CSS.
Selain Blogspot & Worpdress :
1.Kalian Bisa Taro dimana saja asalkan Pemanggilan CSS nya ada. sisanya tinggal Kalian Kreasikan Sendiri.
Jika Kalian Masih bingung dengan Internal CSS kurang lebih internal CSS akan Seperti ini :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Inline Style CSS</title>
<style type="text/css">
h2 {
background-color:black;
color:white;
}
</style>
</head>
<body>
<h2>
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html> Jenis Pemanggilan sama aja kaya di Blogger tepat di atas tag </head> kalian buat tag <style></style>
oke (y) hehe.
/*====================================
CSS Anime Info Style 1 - Akhtarvis
======================================*/
.L-Akhtar{font-size: 12px;font-family: 'Open sans', sans-serif}
.L-Akhtar h2{font-weight: bold;font-size: 14px;border-bottom: 3px solid #2977BE;margin-bottom: 1px;padding: 4px 0}
.L-Akhtar .infoimg{float: left;margin-right: 1px}
.L-Akhtar .infoimg img{width: 166px;height: 223px;border: 1px solid #E7E7E7;padding: 4px;background: #FFF}
.L-Akhtar .infolist .item{line-height: 25px;padding: 0 5px;border-bottom: 1px solid #FFF;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.L-Akhtar .infolist .item:nth-child(odd){background: #FAFAFA}
.L-Akhtar .infolist .item:nth-child(even){background: #F5F5F5}
.L-Akhtar .infolist .item b{display: block;float: left;width: 95px}
.L-Akhtar .infolist .item a{color: #333;text-decoration: none}
.L-Akhtar .synopsis{text-align: justify;font-size: 14px;margin: 1px 0;border: 1px solid #E1EAF0;padding: 10px}
.L-Akhtar .synopsis0{font-size: 12px}
.L-Akhtar .synopsis0 p{margin: 1em 0 !important}
.L-Akhtar .epslist{width: 100%;margin: 0;padding: 0;border-collapse: collapse;border-spacing: 0}
.L-Akhtar .epslist th, .epslist td{border: 1px solid #fff}
.L-Akhtar .epslist th{text-align: left;padding: 6px 5px;color: #646464;font-weight: bold;font-size: 11px;background: rgb(252,252,252);background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(232,232,232,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(232,232,232,1)));background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(232,232,232,1) 100%);background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(232,232,232,1) 100%);background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(232,232,232,1) 100%);background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(232,232,232,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#e8e8e8',GradientType=0 )}
.L-Akhtar .epslist th.dl{text-align: center}
.L-Akhtar .epslist tr:nth-child(odd){background: #FAFAFA}
.L-Akhtar .epslist tr:nth-child(even){background: #F5F5F5}
.L-Akhtar .epslist tr:hover{background: #FAFAFA !important}
.L-Akhtar .epslist td{padding: 0 5px;line-height: 25px;height: 25px}
.L-Akhtar .epslist td.dl{width: 130px;text-align: center;background: #E5E8F0}
.L-Akhtar .epslist a{font-size: 12px;color: #505050;font-family: 'Open sans', sans-serif;text-decoration: none}
1.Buatlah Sebuah Postingan baru lalu letakkan Kode HTML di bawah ini tepat di Mode HTML [bukan di Compose].
CMS Wordpress :
1.Buatlah Sebuah Postingan baru lalu letakkan Kode HTML di bawah ini tepat di Mode HTML [bukan di Compose].
Selain Blogspot & Worpdress :
1.Kalian Bisa Taro dimana saja asalkan Pemanggilan CSS nya ada. sisanya tinggal Kalian Kreasikan Sendiri.
<div class="L-Akhtar">
<h2>Judul Anime</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>Producer</b>: Produser Anime</div>
<div class="item"><b>Type</b>: Tipe Anime</div>
<div class="item"><b>Status</b>: Status Anime</div>
<div class="item"><b>Genres</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>Durasi</b>: Durasi Anime</div>
<div class="item"><b>Episode</b>: Episode Anime</div>
<div class="item"><b>Rating</b>: Rating Anime</div>
<div class="item"><b>Added On</b>: Tanggal Rilis Anime</div>
</div>
</div>
<div class="synopsis">
<b>Sinopsis:</b></br>
<span class="synopsis0">
<p>Sinopsis Anime</p>
<center><iframe src="Link Trailer Anime" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></center>
</span>
</div>
<table class="epslist">
<thead>
<tr>
<th>Nama Anime Anime Episodes</th>
<th class="dl">Download</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="Link Anime">Judul Anime</a>
</td>
<td class="dl">
<a href="Link Anime">Download Now!</a>
</td>
</tr>
</tbody>
</table>
</div> <tr>
<td>
<a href="Link Anime">Judul Anime</a>
</td>
<td class="dl">
<a href="Link Anime">Download Now!</a>
</td>
</tr>
Semoga Berhasil Sobat, Jika Ada kesulitan silahkan bertanya di kolom Komentar ya .
Baca Artikel Menarik lainnya
Loading...