Cara Membuat Download Box Sederhana - ACREZY

Download Box atau DL Box sering digunakan pada situs download.

Biasanya saya sering menjumpainya di Fansub atau Fanshare.

Mereka sering menggunakan DL Box agar terlihat rapi dan link tidak tercecer, hihi.

Nah, pada kesempatan kali ini saya akan membagikan tutorial Cara Membuat Download Box Simple

Download Box ini sangat simple dan gak terlalu memperberat loading web.

Sangat cocok untuk kamu yang mempunyai Fansub ataupun Fanshare.

Tertarik untuk mencobanya?

Yuk simak baik-baik!

Cara Membuat Download Box Simple

---

Salin dan terapkan kode CSS berikut ini sebelum ]]></b:skin> atau </style>

/* CSS DOWNLOAD BOX SIMPLE V.1 - ACREZYBLOG */
.dl-box{padding-top:15px;}
.dl-box h3:before{content:"Download";margin-right:5px;}
.dl-box h3{font-weight:bold;font-size:14px;margin:0;}
.dl-box i{background-color: #c70909;color:#fff;font-weight:700;padding:1px 5px;border-radius:3px;display:inline-block;font-size:12px}
.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;}

Setelah itu jangan lupa Simpan

Kemudian, salin dan letakan kode HTML Download Box Simple berikut ini didalam postingan kamu

Jangan lupa mengganti mode Compose ke HTML

    <div class="dl-box">
      <h3 style="text-align: left;">
Tatte no Yuusha Episode 01 Subtitle Indonesia</h3>
      <hr/>
      <div style="text-align: left;">
        <i>360P</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>480p</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>720p</i>
        <a href="#">Hugesfiles</a>
        <a href="#">Solidfiles</a>
        <a href="#">Tusfiles</a>
        <a href="#">Uppit</a>
        <a href="#">Mirrorcreator</a></div>
      <hr/>
    </div>

Jangan lupa ganti yang bertanda merah dengan judul dan link download kamu.

Untuk demonya bisa kamu lihat dengan menekan tombol berikut ini

Result

Sekian tutorial tentang Cara Membuat Download Box Simple, semoga bermanfaat dan terima kasih telah berkunjung!