Artikel kali ini, dijelaskan cara membuat Anime Info & download box yang cukup mudah & simple.
biasanya saya membuat anime info dan download box secara terpisah seperti diartikel sebelumnya yaitu Cara membuat anime info & Cara membuat download box, tetapi dipost kali ini saya buat menjadi satu artikel yaitu Anime Info & download box. Untuk pratinjau silahkan tekan tombol dibawah :
Cara membuat Anime Info & download box
- Buka blogger > tema > edit html, kemudian cari link css berikut diatas </head>, [jika tidak ada tambahkan]
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
- Langkah berikutnya, tambahkan css berikut kedalam <b:skin>...</b:skin> atau <style>...</style>
/* Animeinfo and Download
============================ */
#inf_anim1,.inf-sinopsis,.inf-detailx,.download-box{clear:both;display:block;overflow:hidden;margin:10px auto}
.inf-sinopsis p,.inf-detailx p,.download-box p{margin:5px auto;padding:5px 0}
.inf-sinopsis{margin-top:0;position:relative}
.inf-sinopsis h3,.inf-detailx h3,.download-box h3{position:relative;font-size:16px;border-bottom:2px solid #222;padding:5px;margin:10px auto;margin-bottom:5px}
.inf-sinopsis h3:after,.inf-detailx h3:after,.download-box h3:after{content:"";position:absolute;bottom:-2px;right:0;width:70%;border-bottom:2px solid darkorange;z-index:1}
.inf-sinopsis ul li{margin:5px auto;font-size:15px;line-height:20px}
.download-box .box-item{margin:0 auto;margin-bottom:5px;position:relative;padding:2px;border:1px solid #ddd;background:#eee}
.download-box .box-item h2{margin:auto;font-size:15px;background-color:#333;display:block;color:white;padding:5px;border-radius:1px}
.download-box .box-item ul{list-style:none;padding:5px;margin:auto}
.download-box .box-item ul li{margin:3px auto}
.download-box .box-item ul li b,.download-box .box-item ul li a{display:inline-block;padding:3px 5px;border-radius:3px;text-decoration:none;color:white}
.download-box .box-item ul li a{background-color:#7e8392}
.download-box .box-item ul li a:hover{text-decoration:underline}
.download-box .box-item ul li:nth-child(even) b{background-color:#F59F3D}
.download-box .box-item ul li:nth-child(odd) b{background-color:#69A9F2}
- Jika sudah Save tema
- langkah terakhir, silahkan buat postingan atau halaman untuk menempatkan Anime info & Download boxnya menggunakan HTML berikut
<div id="inf_anim1">
<div class="inf-sinopsis">
<h3><span class="fa fa-info"></span> Info :</h3>
<ul>
<li>Judul : Example1</li>
<li>Judul Lain : Example2</li>
<li>Type : OVA</li>
<li>Episode : Unknown</li>
<li>Duration : 18 Menit</li>
<li>Category : <a href="#">Action</a> , <a href="#">Ecchi</a> , <a href="#">Hipnotis</a> , <a href="#">Yaoi</a> , <a href="#">Gangbang</a></li>
<li>Aried : 25 Februari 2020</li>
<li>Studio : Unknown</li>
<li>Rating : R 18+</li>
<li>Score : 7.54</li>
</ul>
</div>
<div class="inf-detailx">
<h3><span class="fa fa-file-text-o"></span> Sinopsis</h3>
<p>
Isi Sinopsis
</p>
</div>
<div class="download-box">
<h3><span class="fa fa-cloud-download"></span> Link Download Anime Sub Indo</h3>
<div class="box-item 1">
<h2>Episode 1</h2>
<ul>
<li><b>720p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
<li><b>480p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
<li><b>360p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
<li><b>240p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
</ul>
</div>
<div class="box-item 2">
<h2>Episode 2</h2>
<ul>
<li><b>720p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
<li><b>480p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
<li><b>360p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
<li><b>240p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
</ul>
</div>
<div class="box-item 3">
<h2>Episode 3</h2>
<ul>
<li><b>720p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
<li><b>480p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
<li><b>360p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
<li><b>240p</b> <a href="#">Zippyshare</a> <a href="#">Mega</a> <a href="#">Gdrive</a></li>
</ul>
</div>
</div>
</div>
Comments
Post a Comment