Cara membuat download box seperti AWSubs

Dikesempatan ini Kang Taha akan membagikan sebuah tutorial yang sangat dicari-cari oleh para blogger anime. Tutorial tersebut yaitu cara membuat download box seperti AWSubs. Download box yang satu ini berasal dari salah satu fansubs anime yaitu AWSubs (wardhanime). Kelebihan dari download box ini memiliki tampilan yang sangat simpel dan menarik selain itu tata cara membuat download box ini tergolong cukup mudah. bagi yang sudah tidak sabar silah disimak.

Untuk mengawali tutorial ini. Copas CSS dibawah ini dan letakan sebelum kode ]]></b:skin> kemudian klik simpan/save.

/*Download box wardhanime - Anices*/
.dl-box {
    background-color: whitesmoke;
    border: 1px solid #e5e5e5;
    float: left;
    font-family: Arial, Tahoma, 'Lucida Sans Unicode', 'Lucida Grande';
    font-size: 12px;
    line-height: 12px;
    margin: 0px 0px 20px;
    outline: 0px;
    overflow: hidden;
    padding: 20px;
    vertical-align: baseline;
    width: 100%;
}
.dl-title {
    background-color: blue;
    background-position: 7px 6px;
    background-repeat: no-repeat no-repeat;
    border: 1px;
    color: white;
    float: left;
    font-family: Tahoma;
    font-size: 11px;
    font-weight: bold;
    margin: 0px 0px 3px;
    outline: 0px;
    padding: 10px 0px 10px 35px;
    vertical-align: baseline;
    width: 100%;
}
.dl-item {
    background-color: white;
    background-position: 7px 6px;
    background-repeat: no-repeat no-repeat;
    border: 0px;
    float: left;
    font-family: Tahoma;
    font-size: 11px;
    font-weight: bold;
    margin: 0px 0px 2px;
    outline: 0px;
    padding: 10px 0px 10px 35px;
    vertical-align: baseline;
    width: 100%;
}

Selanjutnya copas kode HTML download box dibawah ini dan letakan di dalam posting/halaman tergantung selera.

 <div class="dl-box">
<div class="dl-title">Anime Subtitle Indonesia</div>
<div class="dl-item">
<a href="#" target="_blank" rel="nofollow">Solidfiles</a> | 
<a href="#" target="_blank" rel="nofollow">Tusfiles</a> | 
<a href="#" target="_blank" rel="nofollow">Acefile</a> | 
<a href="#" target="_blank" rel="nofollow">Mirror</a>
</div>
<div class="dl-title">Anime Subtitle Indonesia</div>
<div class="dl-item">
<a href="#" target="_blank" rel="nofollow">Solidfiles</a> | 
<a href="#" target="_blank" rel="nofollow">Tusfiles</a> | 
<a href="#" target="_blank" rel="nofollow">Acefile</a> | 
<a href="#" target="_blank" rel="nofollow">Mirror</a>
</div>
<div class="dl-title">Anime Subtitle Indonesia</div>
<div class="dl-item">
<a href="#" target="_blank" rel="nofollow">Solidfiles</a> | 
<a href="#" target="_blank" rel="nofollow">Tusfiles</a> | 
<a href="#" target="_blank" rel="nofollow">Acefile</a> | 
<a href="#" target="_blank" rel="nofollow">Mirror</a>
</div>
 </div> 

Langkah terakhir yaitu save dan publikasikan postingan/halaman.

Demo

Ket:
Tanda # di isi link download yang akan dituju.
Jika menemukan masalah bug silahkan komentar dibawah.

Artikel Terkait

Cara membuat download box seperti AWSubs

4/ 5

Oleh Tahacak

Tahacak 02.56 3 Komentar