Cara Membuat Download Box Ala Nekonime

Ada lagi Request dari Animeku. Katanya minta buatin Download Box yang mirip kaya Nekonime. Yaudah nih kalo mau Silahkan disimak. Kalo ngga Di tutup ajah.

Pertama masuk ke Blogger -> Template -> Edit HTML

Simpen CSS di bawah. Tepat di atas ]]></b:skin> atau di bawah <style> Terserah.

/* CSS Founded by Fansublogger */
.download-eps {
    font-size: 11px;
    font-weight: bold;
    background: none repeat scroll 0% 0% #F5F5F5;
    padding: 10px;    margin: 10px 0px;
}
.download-eps ul {
    margin: 0px;
    padding: 0px;
    list-style: outside none none;
}
.download-eps ul li {
    background: none repeat scroll 0% 0% #E4E4E4;
    margin-bottom: 2px;
    line-height: 26px;
    padding: 0px 5px;
}
.download-eps ul li strong {
    background: none repeat scroll 0% 0% #23B95D;
    border-right: 2px solid #F5F5F5;
    width: 65px;
    display: block;
    float: left;
    margin-left: -5px;
    margin-right: 5px;
    color: #FFF;
    padding: 0px 5px;
    text-align: left;
}
.download-eps ul li a {
    color: #857979;
}

Sekarang buat HTML nyah. Tinggal kopiin ajah, terus ganti Informasinya. Seperti 480p, Link DDL

Keterangan: Warna merah untuk masing-masing warna Background bisa kamu ganti sesuai selera, Warna hijau Untuk lebar kotak Kualitas yang di samping kiri.

<div class="download-eps">
<ul>
<li><strong>480p</strong> <a href="#" rel="nofollow" target="_blank">Sharebeast</a> | <a href="#" rel="nofollow" target="_blank">Tusfiles</a></li>
<li><strong>720p</strong> <a href="#" rel="nofollow" target="_blank">Sharebeast</a> | <a href="#" rel="nofollow" target="_blank">Tusfiles</a></li>
<li><strong>Mp4</strong> <a href="#" rel="nofollow" target="_blank">Sharebeast</a> | <a href="#" rel="nofollow" target="_blank">Tusfiles</a></li>
<li><strong>3Gp</strong> <a href="#" rel="nofollow" target="_blank">Sharebeast</a> | <a href="#" rel="nofollow" target="_blank">Tusfiles</a></li>
</ul>
</div>

Kalo mau nambahin Download Box nyah. Tinggal Kopi ulang ajah HTML nyah!

Sekarang buat DEMO nyah bisa di liat di bawah

See the Pen YPWdoN by hilmanfad (@hilmanfad) on CodePen.

Source: Nekonime