Cara Membuat Download Box Fansub Responsif

Malam sobat Vetizens, tadi saya sudah share tentang tutorial cara membuat page pendaftaran admin, kali ini saya akan membuat tutorial membuat simple download box responsif fansub/fanshare.

Langsung saja ke TKP :

1. Login Blogger kalian

2. Blogger kalian > Template > Edit HTML

3. Tambahkan kode CSS dibawah ini tepat diatas ]]></b:skin> atau </style>

/* Vetizens Download Box */

.veti-download{margin:10px 0}

.veti-item>b{background:#49bafc;color:#fff;font-weight:700;padding:0 10px;line-height:36px;margin:0;font-size:12px;float:left;width:55px}

.veti-item{border-bottom:1px solid #E4E4E4;white-space:nowrap;overflow-x:auto;overflow-y:hidden;background:#FBFBFB}

.veti-item a{float:left;margin:13px 10px;margin-right:0;padding-right:10px;border-right:1px solid #C7C7C7;text-align:center;line-height:10px}

.veti-item a:last-child{border-right:0}

4. Lalu Save Template. kalian sudah bisa memasang download boxnya di post.

5.Untuk memasang download box ditulis secara manual lewat html jangan compose, lalu masukkan script dibawah ini.

<div class='veti-download cl'>

<div class='veti-item cl'><b>1080p</b> <a href='#'>Solidfiles</a> <a href='#'>Uptobox</a> <a href='#'>Tusfiles</a> <a href='#'>Otakushare</a></div>

<div class='veti-item cl'><b>720P</b> <a href='#'>Solidfiles</a> <a href='#'>Uptobox</a> <a href='#'>Tusfiles</a> <a href='#'>Otakushare</a></div>

<div class='veti-item cl'><b>480p</b> <a href='#'>Solidfiles</a> <a href='#'>Uptobox</a> <a href='#'>Tusfiles</a> <a href='#'>Otakushare</a></div>

</div>

Dan hasilnya seperti ini :

Jika kalian ingin seperti yang dibawah ini gunakan Script dibawah.

/* Vetizens Download Box */

.usagi-download{margin:10px 0}

.usagi-item>b{background:#49bafc;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}

Sekian untuk tutorial kali ini semoga bermanfaat untuk kalian semua terutama fansub dan fanshare blogger :D.
Jika ada salah kata saya minta maaf :)
Jika Masih Bingung Silahkan Berkomentar . . .
Kunjungi Vetizens terus untuk informasi terupdate . . . .