Cara Membuat Tabel Download di Blogger

Akhirnya panduanajib dapat kembali mengupdate artikel seputar blogging di blog yang saya cintai ini hehe. Sudah lama sekali rasanya saya tidak memberikan artikel seputar blogging kepada sahabat pembaca sekalian. Dan dikesempatan kali ini saya akan memberikan sebuah cara membuat download box di blogger dengan mudah. Hem pasti seru ni untuk dibahas, untuk itu silahkan Anda simak artikelnya sampai akhir dan jangan lupa tinggalkan komentarnya ya hehe.

Tabel download responsive di blogger ini sangat cocok untuk Anda yang saat ini sedang membangun sebuah blog download. Seperti blog download apk, software, film dan lain sebagainya.

Dengan adanya widget tombol download yang responsive dan menarik tentunya akan membuat para pengunjung semakin mudah untuk mengunduh isi konten yang sediakan.

Selain memudahkan pengunjung tentunya juga dapat membuat tampilan artikel serta blog sobat lebih rapi dan sehingga enak untuk pandang mata.

Sebelum melanjutkan, tabel box download pada blogger ini bukanlah hasil buatan admin pribadi. Melainkan buatan rekan blogger yakni admin dari blog www.caramanual.com.

Terimakasih untuk beliau karena sudah membagikan kode ini secara gratis dan dapat kita nikmati bersama-sama.

Cara Membuat Box Download Responsive di Blog

Desain dari box ini cukup sederhana dan responsive. Pembuat sengaja tidak menambahkan desain tambahan seperti font awesome, icon dan lainnya. Hal ini pastinya ditujukan supaya tidak mempengaruhi loading blog.

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

Penasaran seperti apa penampakannya? Silahkan Anda lihat demonya saja secara langsung seperti gambar dibawah.

Cara Membuatnya:

• Masuk ke Dashboard Blog Anda
• Klik Tema > Edit HTML
• 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}
}

• Kemudian masukan kode berikut di bagian Tab HTML pada saat akan 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>

• Terakhir silahkan edit sesuai dengan keinginan Anda, kemudian klik Publikasikan atau Perbarui artikel.

Nah demikianlah cara membuat tabel download responsive di blog. Semoga artikel kali ini dapat memberikan manfaat bagi kita semua. Salam blogger.