Jony-Website. Kali ini gue akan share cara membuat kolom download responsive, lu pasti tau kan blog download ataupun blog download anime? Pastinya lu melihat kolom download yang responsive seperti gambar di bawah ini kan?
ATAU
Bagaimana? Mau tau caranya? Sebenarnya tutorial ini bukan gue yang buat melainkan ini tutorial milik Usagilabs yang gue temuin di google, gue repost aja nih tutorial. Baiklah daripada kelamaan nungguin gue ngomong gak jelas mending langsung ke langkah-langkahnya.
Langkah-Langkah
1. Seperti biasa login dulu ke blog lu.
2. Buka template.
3. Edit template.
4. Masukkan kode dibawah ini tepat diatas kode ]]></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}
5. Simpan Template.
Jangan lupa copy kode dibawah ini di dalam postingan.
<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>
Inilah Hasilnya :
Atau jika lu kurang puas dengan itu, lu bisa copy kode di bawah ini tepat diatas kode ]]></b:skin> atau </style>
/* 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}
Hasilnya kayak begini :
0 komentar