Cara Membuat Download Box Untuk Web Anime Mirip Onikuro

Kali ini Tutorial Style Download Box untuk web Anime yang di ambil dari web ane satu lagi hehhe

Download box ini sedikit menggunakan style CSS 3 menjadikan ada animasi yang enak untuk dilihat

tanpa banyak cingxong cuss ke tutorialnya

Cara membuat Download Box Mirip Onikuro.com

1.Masukan Code ini di tepat atas </style> setelah itu simpan

.dlbox ul{margin:5px 0;list-style:none;border:0px;padding:2px;color:#fff}
.dlbox h3{margin:0;text-align:center;background:#185e99;color:#ffffff;font:normal 700 17px sans-serif;padding:8px;margin-bottom:1px;box-shadow:none;}
.dlbox ul li{background:transparent;margin:0 0 3px;padding:0 8px;line-height:25px;color:#1B1B1B;font-size:14px;color:#fff}
.dlbox ul li a {display:inline-block;background:#026b48;color:#fff;font-weight:400;padding:1px 3px;line-height:25px}
.dlbox ul li a:hover{background:#05baab;font-weight:500;transform:skewX(2deg) translateX(2px);}
.dlbox ul li b,.dl ul li strong{padding:1px 3px;font-weight:600;background:#0072BB;color:#000;line-height:25px;font-size:15px;display:block;padding:1px 6px;margin-right:6px;float:left;min-width:79px;border-right:2px solid #383333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:-5px}
@media (max-width: 640px) {.dl ul li b,.dl ul li strong{display:inline-block;float:none;width:98%}.dl ul li{text-align:center}}

2.Setelah itu kita tinggal memakainya

<div class="dl">
<ul>
<h3>
Episode Anime</h3>
<li><b>3gp</b>
<a href="Link Download" rel="nofollow" target="_blank" >ZippyShare</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Tusfiles</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Solidfiles</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Mirror</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Upload</a>
</li>

<li><b>Mp4</b>
<a href="Link Download" rel="nofollow" target="_blank" >ZippyShare</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Tusfiles</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Solidfiles</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Mirror</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Upload</a>
</li>

<li><b>480p</b>  
<a href="Link Download" rel="nofollow" target="_blank" >ZippyShare</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Tusfiles</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Solidfiles</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Mirror</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Upload</a>
</li>

<li><b>720p</b> 
<a href="Link Download" rel="nofollow" target="_blank" >ZippyShare</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Tusfiles</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Solidfiles</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Mirror</a>    
<a href="Link Download" rel="nofollow" target="_blank" >Upload</a>
</li>
</ul>
</div> 

Note:Ganti yang di tandai warna hijau dengan link download

Sebenarnya ada cara yang mudah untuk memakainnya

baik inilah dia cara mudahnya

1.Buat Entri Baru
2.Buat lah teks seperti di bawah

Note:
1.Buat teks (1) Menjadi Subheading
2.Buat List teks download
3.Kasih style Bold pada angka resolusi
4.Tinggal kasih link dengan cara biasa

3.Setelah itu Buka mode HTML

 Maka menjadi seperti itu,Lalu kita hanya memasang <div class='dlbox'> dan </div>

• DEMO

Baik itulah Cara membuat Download Box Anime Terimakasih sudah berkunjung ke situs ini

Author : Hiruko Kagetane

Share this