Cara Membuat Download Box di Blogger

Download box ini tentunya sangat cocok apabila digunakan oleh blog download, seperti blog film, blog anime, blog software / aplikasi, blog game, dan sebagainya.

Jenis-jenis blog download yang saya sebutkan di atas tentu membutuhkan sebuah widget tombol download yang mendukung, agar pengunjung dapat dengan mudah menguduh atau mendownload film maupun aplikasi yang diinginkannya.

Dengan alasan tersebut saya membuat sebuah kotak download yang sangat mendukung untuk blog download Anda.

Kotak download ini memiliki desain yang responsive dan cukup keren walaupun desainnya yang sederhana.

Saya sengaja tidak menambahkan desain lainnya seperti font awesome atau icon lainnya agar tidak memperngaruhi kecepatan loading blog Anda.

Baca juga: Cara Membuat Tombol Dengan Efek Animasi Border

Download box ini mendukung judul dari film atau nama aplikasi, kualitas video misalnya 480p, 720p, 1080p, file part, dan juga sumber atau server downloadnya.

Jika Anda memiliki kemampuan dalam mengolah blog, mungkin bisa mendesainnya kembali sesuai dengan keinginan Anda, tapi dengan desain ini juga saya rasa sudah cukup.

Baik langsung saja, jika Anda tertarik untuk membuat download box di blogger, silahkan ikuti langkah-langkahnya di bawah ini.

Cara Membuat Tombol Download Box di Blogger

DEMO

1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Kemudian letakkan kode css berikut di atas kode ]]></b:skin> atau </style>

/* CSS Download Box by caramanual.com */
.dbox-title {
    padding: 8px 10px;
    margin: 8px 0 3px;
    color: #FFF;
    background: #3498db;
}
.dbox-wrap {
font-size: 11px;
font-weight: bold;
background: #F5F5F5;
padding: 10px;
margin: 10px 0;
}
.dbox {
margin: 0;
padding: 0;
list-style: none;
}
.dbox-list {
background: #E4E4E4;
margin-bottom: 2px;
line-height: 26px;
padding: 0 5px;
}
.dbox-list strong {
background: #3498db;
border-right: 2px solid #F5F5F5;
width: 65px;
display: block;
float: left;
margin-left: -5px;
margin-right: 5px;
color: #FFF;
padding: 0 5px;
text-align: center;
}
.dbox-list a {
color: #6d6d6d;
}
.dbox-list a:hover {
color: #222;
}
@media only screen and (max-width: 360px) {
  .dbox-list strong {width:100%}
  .dbox-title {text-align:center}
}

4. Kemudian masukan kode berikut di bagian HTML Tab pada saat posting artikel

<div class="dbox-wrap">
<div class="dbox">
<div class="dbox-title">Judul Film</div>
<div class="dbox-list">
<strong>480p</strong>
<a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a>
</div>
<div class="dbox-list">
<strong>720p</strong>
<a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a>
</div>
<div class="dbox-list">
<strong>1080p</strong>
<a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a>
</div>
</div>
<div class="dbox">
<div class="dbox-title">Nama Software</div>
<div class="dbox-list">
<strong>Part1</strong>
<a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a>
</div>
<div class="dbox-list">
<strong>Part2</strong>
<a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a>
</div>
<div class="dbox-list">
<strong>Part3</strong>
<a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a>
</div>
</div>
</div>

5. Silahkan edit sesuai dengan keinginan Anda, lalu klik Publikasikan atau Perbarui artikel

Itulah artikel mengenai cara membuat download box di blogger, jika Anda masih bingung menerapkannya di blog Anda silahkan hubungi kami melalui halaman kontak yang ada atau dengan memberikan komentar pada postingan ini. Semoga bermanfaat.

Cara Manual

Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

Bagikan Artikel ini