Cara Membuat Download Box Anime Resposisive Di Blog

How to Make Download Box Responsive
How to Make Download Box Responsive

Kali ini saya akan share tutorial cara membuat html download box di blog sobat, post ini juga berhubungan dengan tools yang belum lama saya rilis yaitu tools download box. tapi tools tersebut hanya support dibeberapa template buatan saya. tools saya punya beberapa kelebihan yaitu menghemat waktu sobat jika bandingan dengan membuatnya secara manual.

manfaat download box yaitu memudakan pengunjung ketika mendownload anime hasil garapan fansub sobat / fanshare atau apapun niche ditambah sekarang fanshare rata rata pake download box, awal mula trend download box di indonesia menurut ane dari blog wardhanime yang pakai download box kemungkinan juga bisa jadi blog awesub juga terinspirasi dari animetake yang dulu pakai download box sehingga banyak para fanshare yang ingin juga membuat download box seperti wardhanime :v makanya kalau buat template itu wajib ada download box nya dan tentunya ane usahaiin desainnya berbeda beda sehingga sobat senang :v

nah sobat bisa memilih memakai download box manual (ketik sendiri) atau menggunakan tools buatan saya.

Cara Membuat Download Box Fansub Responsive

1. Masuk ke Blogger
2. Blogmu Template Edit HTML
3. Tambahkan kode CSS dibawah ini tepat diatas ]]></b:skin> atau </style>

/* Usagilabs Download Box */
.usagi-download{margin:10px 0}
.usagi-item>b{background:#DF5B52;color:#fff;font-weight:700;padding:0 10px;line-height:36px;margin:0;font-size:12px;float:left;width:55px}
.usagi-item{border-bottom:1px solid #E4E4E4;white-space:nowrap;overflow-x:auto;overflow-y:hidden;background:#FBFBFB}
.usagi-item a{float:left;margin:13px 10px;margin-right:0;padding-right:10px;border-right:1px solid #C7C7C7;text-align:center;line-height:10px}
.usagi-item a:last-child{border-right:0}

untuk mengganti warna backgroundnya silahkan sobat pergi ke Color Picker.
4. Simpan Template. Sekarang sobat bisa menggunakan html download box di posting.

Untuk Menggunakan Download Boxnya sobat bisa menggunakan tools atau manual.
jika sobat memilih manual, sobat tinggal copy kode dibawah ini lalu paste di kedalem post

<div class='usagi-download cl'>
<div class='usagi-item cl'><b>1080p</b> <a href='#'>Solidfiles</a> <a href='#'>Uptobox</a> <a href='#'>Tusfiles</a> <a href='#'>Otakushare</a></div>
<div class='usagi-item cl'><b>720P</b> <a href='#'>Solidfiles</a> <a href='#'>Uptobox</a> <a href='#'>Tusfiles</a> <a href='#'>Otakushare</a></div>
<div class='usagi-item cl'><b>480p</b> <a href='#'>Solidfiles</a> <a href='#'>Uptobox</a> <a href='#'>Tusfiles</a> <a href='#'>Otakushare</a></div>
</div>

Untuk Hasilnya

1080p Solidfiles Uptobox Tusfiles Otakushare

720P Solidfiles Uptobox Tusfiles Otakushare

480p Solidfiles Uptobox Tusfiles Otakushare

Style Full

buat sobat yang mau judulnya full silahkan ganti css diatas ama css dibawah ini

/* Usagilabs Download Box */
.usagi-download{margin:10px 0}
.usagi-item>b{background:#DF5B52;color:#fff;font-weight:700;padding:7px 10px;margin:0;font-size:12px;width:100%;display:block;border-bottom:1px solid #B9453D;margin-bottom:-1px;line-height:20px;font-size:13px;font-family:'Segoe UI',arial,sans-serif;}
.usagi-item{border-bottom:1px solid #E4E4E4;white-space:nowrap;overflow-x:auto;overflow-y:hidden;background:#FBFBFB}
.usagi-item a{float:left;margin:13px 10px;margin-right:0;padding-right:10px;border-right:1px solid #C7C7C7;text-align:center;line-height:10px}
.usagi-item a:last-child{border-right:0}

Hasil

1080p Solidfiles Uptobox Tusfiles Otakushare

720P Solidfiles Uptobox Tusfiles Otakushare

480p Solidfiles Uptobox Tusfiles Otakushare