Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogger

Cara Membuat Kotak Download Link di Blogger

Oleh Hadi Posting Komentar
Cara Membuat Download Box di Blogger

Membuat Download Link Box di Blogger ― Bagi kamu yang sering berselancar di dunia maya dan download berbagai aplikasi atau media mungkin di antara situs download yang pernah kamu kunjungi, kamu pernah menemukan download box seperti yang akan dibahas pada tulisan kali ini.

Download box merupakan salah satu bagian yang biasanya cukup penting untuk tersedia pada blog-blog atau situs yang menyediakan link download yang bervariasi bagi pengunjungnya. Maksudnya bervariasi seperti link download yang menyediakan mirror link pada berbagai server file hosting misalnya, Medifire, Google Drive, Zippy File, dan sebagainya.

Cara Membuat Download Link Box di Blogger

Download box akan membantu pengunjung dalam memilih link mana yang akan mereka gunakan dalam memperoleh file yang ingin di-download. Dengan download box yang seperti tabel tersebut, link yang banyak dan bervariasi atau mirror link yang banyak bisa tertata dan terlihat lebih rapi serta tidak membingungkan orang yang melihatnya.

Membuat Download Box di Blogger

Download box ini cocok untuk kamu pasang jika di blog kamu banyak konten yang mengandung link download yang bervariasi. Sebagai contoh, kamu bisa melihatnya pada halaman demo berikut.


Untuk memasangnya, kamu bisa mengikuti langkah-langkah berikut ini.
  1. Buka Blogger, lalu pada halaman tema klik tombol "Sesuaikan".
    2. Cara Membuat Download Link Box di Blogger
  2. Setelah itu pada Desainer Tema Blogger, pilih Lanjutan lalu buka Tambahkan CSS.
    3. Cara Membuat Download Link Box di Blogger
  3. Kemudian tambahkan kode berikut pada kotak teks yang ada. Menu ini kadang tergantung dari template yang kamu gunakan, jika menu "Tambahkan CSS" tidak dapat kamu temukan silakan buka menu Edit HTML lalu temukan kode ]]></b:skin> dan letakkan kode berikut di atasnya.
    4. .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-wrap br{display:none!important}
.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. Setelah itu klik "Terapkan ke Blog", lalu silakan edit posting di blog kamu.
  5. Pada mode penulisan HTML, atau pada editor Blogger versi terbaru klik tombol ikon ><, lalu gunakan kode berikut ini untuk menampilkan link download yang kamu inginkan.
    6. <div class="dbox-wrap">
  <!-- Tabel Pertama -->
  <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>
  <!-- Tabel Kedua -->
  <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>
  6. Silakan ganti bagian judul atau nama link download serta masukkan URL pada atribut href.

Penutup

Itulah langkah-langkah singkat yang bisa kamu gunakan untuk memasang dan menggunakan download box di Blogger, dengan download box tersebut, blog kamu bisa tampil lebih keren untuk pengunjung. Semoga pembahasan dalam artikel ini bisa bermanfaat untuk kamu, apabila ada hal-hal yang kurang jelas, silakan tanyakan pada kolom komentar di bawah atau melalui halaman contact blog ini. Terima kasih dan sampai jumpa!

Posting Komentar untuk "Cara Membuat Kotak Download Link di Blogger"

Silakan sampaikan komentar kamu dengan mematuhi syarat dan ketentuan berikut:
Diperbolehkan menggunakan link, selama tidak mengarah pada situs yang mengandung perjudian, pornografi, dan konten ilegal lain. Tidak diperbolehkan promosi jualan, produk, jasa, dsb.
Tidak boleh menggunakan kata-kata yang kasar, tidak pantas, mengandung SARA, atau penghinaan. Diharapkan saling menghargai satu sama lain.
Setiap komentar segera diterbitkan setelah moderasi, pastikan komentar kamu sudah benar sebelum dipublikasikan dan backlink tidak akan dihilangkan oleh admin. Admin berhak menghapus komentar yang melanggar.
Blogwalking dan saling memberi salam diperbolehkan. Menerima pemasangan backlink dofollow, tautan ada di menu navigasi.
Gunakan <i rel="code">Text here</i> untuk komentar yang berisi kode singkat.
Gunakan <i rel="pre">Text here</i> untuk komentar yang berisi kode panjang.
Setiap komentar yang mengandung kode/sintaks dengan rel code/pre di atas, wajib di-parse terlebih dahulu pada menu Alat > Script Parse di menu navigasi di atas.
Kamu juga bisa memberikan komentar bergaya <b>cetak tebal</b> maupun <i>cetak miring</i>. Komentar dengan kode HTML selain cetak tebal/miring atau link tidak diperbolehkan untuk dipublikasikan.

Dapatkan Info Terbaru!