Cara Membuat Download Box di Blogger

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


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

HTML Tab

<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.

5 Komentar untuk "Cara Membuat Download Box di Blogger"

  1. Bisa sekalian dengan anime infonya

    BalasHapus
    Balasan
    1. Kalau sempat nanti dibuatkan juga.

      Hapus
    2. Min, cara bikin related post kayak punya blog ini gimana? Di blog saya Related post nya gak muncul

      Hapus
    3. Untuk related post, ini bawaan iklan AdSense. Menggunakan iklan matched content.

      Hapus
  2. Kak, boleh request untuk daftar bab novel atau komik? Contohnya kurang lebih kayak di web batoto, yang bisa discroll. Terima kasih sebelumnya ^^

    BalasHapus
Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel