Membuat Download Box Anime

Halo lama gak buat postingan di blog ini. Okeh kenny sekarang lagi suka banget nonton anime, dan sekarang makin banyak blog, website download anime. Nah di sini kenny akan membuat tutorial membuat download box anime responsive. 

Mungkin gak sebagus punya website anime besar lainnya tetapi, seengganya kita tau cara membuatnya. Langsung aja cara ikuti tutorialnya. Alat yang di butuhkan cuma notepad dan imajinasi.

• Copy kode CSS berikut dan paste di sebelum /head

<style>
.dl-wraps-dl{text-align:center;font-size:13px;padding-top:10px}
.dl-wraps-item{font-size:13px;border:1px solid #ddd;padding:10px}
.dl-wraps-item>b{display:block;text-align:center;background:#093580;padding:6px 10px;margin:0px;border-bottom:1px solid #FFF;color:#fff}
.dl-wraps-item>b:hover{left:0;transform:none;-webkit-transform:none}
.dl-wraps-item br{display:none}
.dl-wraps-item a{margin:1px 1px 5px;display:inline-block;text-align:center;border:1px solid;line-height:2;border-radius:3px;width:28.5%;white-space:nowrap;text-overflow:ellipsis;background:#24272c;color:#fc4f3f;border-right: 4px solid blue;}
.dl-wraps-item a:hover{color:#FFF;background:blue;border: 2px solid blue; font-family: arial;}
.cl:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}
@media only screen and (max-width: 720px){.dl-wraps-item a{display:inline-block;width: 50%;}}
.dl-epsd{background: #f00;text-align: center;padding: 7px;font-size: 18px;margin-top: 10px;}
.dl-wraps-item b:hover{background: #ddd !important;color: #000;}
.dl-info {line-height: 10px;text-align: center;font-family: cursive;font-size: 15px;padding: 1px;background: #dfdf;
}
</style>

• Masukkan Kode HTML berikut di postingan kalian

<!-- Link Download 1 -->

<div class="dl-epsd">
  <b>Link Download | Episode 00</b>
</div>
<div class="dl-wraps-dl">
 <div class="dl-wraps-item">
  <b>Mkv 720p | [ 146.64 ]</b>
   <br>
    <a href="#">Mega</a>
    <a href="#">Google Drive</a>
    <a href="#">Mediafire</a>
    <a href="#">Mirror</a>
   <br>
 </div>
 <div class="dl-wraps-item">
  <b>480p 10bit</b>
   <br>
    <a href="#">Mega</a>
    <a href="#">Google Drive</a>
    <a href="#">Mediafire</a>
    <a href="#">Mirror</a>
   <br>
 </div>
 <div class="dl-wraps-item">
  <b>360p 10bit</b>
   <br>
    <a href="#">Mega</a>
    <a href="#">Google Drive</a>
    <a href="#">Mediafire</a>
    <a href="#">Mirror</a>
   <br>
 </div>
</div>

<!-- Link Download 2 -->

<div class="dl-epsd">
 <b>Link Download | Episode 2</b>
</div>
<div class="dl-wraps-dl">
 <div class="dl-wraps-item">
  <b>720p 10bit</b>
   <br>
    <a href="#">Mega</a>
    <a href="#">Google Drive</a>
    <a href="#">Mediafire</a>
    <a href="#">Mirror</a>
   <br>
 </div>
 <div class="dl-wraps-item">
  <b>480p 10bit</b>
   <br>
    <a href="#">Mega</a>
    <a href="#">Google Drive</a>
    <a href="#">Mediafire</a>
    <a href="#">Mirror</a>
   <br>
 </div>
 <div class="dl-wraps-item">
  <b>360p 10bit</b>
   <br>
    <a href="#">MEGA</a>
    <a href="#">Google Drive</a>
    <a href="#">Mediafire</a>
    <a href="#">Mirror</a>
   <br>
 </div>
</div>

• Silahkan ganti # dan tulisan berwarna biru dengan server kalian

Untuk Previewnya

Demo
Begitu saja yang bisa kenny bagikan, selebihnya mohon maaf jika membuat anda kecewa, tinggalkan di komentar saran dan kritiknya.