Cara Membuat DL Box V.1

Diposting oleh
Kali ini Si Keren mau berbagi
cara membuat DL Box atau yang biasa kalian sebut Kotak Download


DEMO




Kotak Download yang saya bagikan sangat simple dan tidak akan berpengaruh pada loading.
kalo begitu mari kita mulai tutorial cara membuat DL Box

Pertama - tama Silahkan kalian letakan CSS dibawah ini diatas </b:skin> / </style>


/* CSS KOTAK DOWNLOAD */

.dl-box{padding-top:15px;}
.dl-box h3:before{content:"Download";margin-right:5px;}
.dl-box h3{font-weight:bold;font-size:12px;margin:0;}
.dl-box i{background-color: rgba(102,102,118,0.5);color:#fff;font-weight:700;padding:1px 5px;border-radius:3px;display:inline-block;font-size:10px}
.dl-box a{color: #171717;font-weight:bold;padding: 0px 5px;border-right:1px solid #ddd;text-decoration:none;}
.dl-box a:hover{color: rgba(102,102,118,0.5);text-decoration:none;}



Lalu Copykan kode dibawah ini pada postingan kalian


<div class="dl-box">
<h3 style="text-align: left;">
Tokyo Ghoul √A Episode 01 Subtitle Indonesia by Imoechansz</h3><hr/>
<div style="text-align: left;">
<i>3GP</i> <a href="#">Hugesfiles</a> <a href="#">Solidfiles</a> <a href="#">Tusfiles</a> <a href="#">Uppit</a> <a href="#">Mirrorcreator</a></div>
<hr />
<div style="text-align: left;">
<i>MP4</i> <a href="#">Hugesfiles</a> <a href="#">Solidfiles</a> <a href="#">Tusfiles</a> <a href="#">Uppit</a> <a href="#">Mirrorcreator</a></div>
<hr />
<div style="text-align: left;">
<i>MKV</i> <a href="#">Hugesfiles</a> <a href="#">Solidfiles</a> <a href="#">Tusfiles</a> <a href="#">Uppit</a> <a href="#">Mirrorcreator</a></div>
<hr />
</div>

Komentar