How to Make Download Box Responsive

By 6
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

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
previously I've shared tool Download Box which allow you to make a post, save time, and easy but because the tool only applies in some of my template. therefore I made a tutorial that the tool can serve your template, or any template.

the benefits of the download box is easier for visitors who want to download anime in your blog, and also beautify the look of your blog

for those of you who want to tools download box in your blog, please follow the tutorial below.
you can choose to use the manual (type itself) or use tools.

How To Make Download Box Fansub Responsive

1. Sign in to Blogger
2. Yourblog Template Edit HTML
3. Add the following CSS code just above ]]></b:skin> or </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}
to change the background color please go to Color Picker.
4. Save Template. Now you can use html download box at the post.

To Use Download Box Generator you can use tools or manual.
if you use manual you just copy the code below and paste it in the 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>
Her results

Style Full

for those of you who want the full title style, please change above css with css below.
/* 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}
Her results
Share on Facebook Tweet on Twitter Share on Google+
author
UsagilabsRealase at

nothing ._.

You Might Also Like

Comment now

6 comments

  1. avatar
    Anima Vizon

    Obrigado Obrigado Obrigado
    Gostaria Que me Ajudasse com algo n consegui baixar um Template creio q é seu é bem seu Estilo queria o Recurso de mudar de Aba e permanecer na msm Pagina Link do template http://onestream-bt.blogspot.com.br/

    • avatar
      Tutorial Ku

      obrigado também.
      but can u speak english?
      because i not understand what you mean..
      embora eu usar a traduzir, eu ainda não entendo.

          • avatar
            Tutorial Ku

            http://usagilabs.blogspot.com/2016/11/download-box-tools.html silahkan kesini buat toolsnya, saya juga udah buatin videonya