Cara Membuat Box Download Buka Tutup di Blog

 Halo teman-teman, pada kesempatan kali ini aku bakal memberi tutorial, code Cara Membuat Box Download Buka Tutup. 

Box download ini bisa kalian gunakan di WordPress, Blogger, GitHub, dan juga bisa kalian gunakan di sejenisnya.

Karena tampilan seperti ini sering di pakai di website streaming anime, film, dan sebagainya. 

Dan pastinya saya tidak akan menyebutkan website secara spesifik website mana saja yang menggunakan tampilan download box download seperti ini. 

Nah, untuk kalian yang masih belum paham Apa Itu Box Donwload pada Blog?. 

Download box adalah tampilan yang dimana kalian akan mendownload sesuatu memakai box download yang sudah di sediakan. 

Nah, itu adalah pengertian dari box download yang mungkin kalian tidak tahu. Kalian bisa simak di bawah ini Cara Membuat Box Downloadnya. 

Cara Membuat Box Download Buka Tutup

Step 1 : Buka Dashbord Blogger kalian, setelah itu pilih menu TEMA

Step  2 : Klik Icon DROP BAWAH, lalu pilih EDIT HTML

Step 3 : Salin semua kode CSS di bawah ini, lalu pastekan tepat di atas kode </head> atau kode ]]></b:skin> pada template kalian

/* Box Download By ESP */
.mctnx {font-size: 14px;line-height: 1.2em;margin-bottom: 20p}
.mctnx .dlclass .content,.dlclass {overflow: hidde}
.mctnx .content {max-height: 0;overflow: hidden;transition: max-height .2s ease-out;padding: 0}
.dlclass {margin-bottom: 5px}
.dlclass .dlttl {padding: 9px 10px;background: #0c70de;border-radius: 2px;cursor: pointer;line-height: 0}
.dlclass .dlttl:after {content: '';display: inline-block;min-width: 1.2em;min-height: 1.2em;vertical-align: middle;float: right;background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23fff'/%3E%3C/svg%3E") center/24px no-repeat}
.dlclass .dlttl h3 {margin: 0;font-size: inherit;display: inline-block;max-width: 70%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;line-height: 1.2em;color: #fff;font-weight: 600}
.dlclass .dlttl.collapsible.active {background: #333}
.dlclass .dlttl.collapsible.active:after {background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' fill='%23fff'/%3E%3C/svg%3E") center/24px no-repeat}
.dlclass .dlurl {padding: 4px 0;border-bottom: 1px solid #ebebeb}
.dlclass .dlurl a {display: inline-block;background: #f0f2f3;padding: 4px 7px;border-radius: 3px;margin: 2px;font-size: 13px;color: #555;}
.dlclass .dlurl a:hover {background: #444 !important;color: #fff;text-decoration: none;}
.dlclass.dlone .dlurl {display: flex;flex-wrap: wrap}
.dlclass.dlone .dlurl .res {-webkit-box-flex: 0;-ms-flex: 0 0 16.66667%;flex: 0 0 auto;max-height: 27px;padding: 4px 7px;background: #0c70de;color: #fff;font-weight: 500;font-size: 13px;text-align: center;border-radius: 3px;margin: 2px 4px 2px 0}
.dlclass.dlone .dlurl .slink {flex-basis: 0;-webkit-box-flex: 1;flex-grow: 1;max-width: 100%;padding-left: 0;padding-right: 15px}

Step 4 : Jika semua kode CSS suda terpasang sempurna, selanjutnya kita akan mulai pemasangan JavaScript

Step 5 : Selanjutnya cari kode </body>, dan letakan semua kode JavaScript di bawah ini, tepat di atas kode </body> tersebut

<script>
  /*<![CDATA[*/
  var coll = document.getElementsByClassName("collapsible");
  var i;

  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    });
  } /*]]>*/
</script>

Step 6 : Jika  semua kode sudah terpasang, silahkan tekan Save atau Simpan. 

Cara Penggunaannya

Step 1 : Buat postingan atau halaman baru yang sudah di sediakan Blogger

Step 2 : Jika sudah selesai membuat postingan atau halaman, jangan lupa memberi judul untuk postingan atau halaman tersebut

Step 3 : Silahkan ubah dari MODE MENULIS ke MODE HTML yang ada di sudut atas kiri pada postingan atau halaman

Step 4 : Salin semua kode di bawah ini, dan tempel semua kode di postingan atau halaman yang baru kalian buat tadi

<div class="mctnx">
  <div class="dlclass dlone">
    <div class="dlttl collapsible">
      <h3>Nama Judul</h3>
    </div>
    <div class="content">
      
      <div class="dlurl">
        <div class="res">360p</div>
        <div class="slink">
          <a href="URL Tujuan 1" target="_blank" rel="nofollow noopener noreferrer">Host Tujuan 1</a>
          <a href="URL Tujuan 2" target="_blank" rel="nofollow noopener noreferrer">Host Tujuan 2</a>
          <a href="URL Tujuan 3" target="_blank" rel="nofollow noopener noreferrer">Host Tujuan 3</a>
        </div>
      </div>
      
      <div class="dlurl">
        <div class="res">480p</div>
        <div class="slink">
          <a href="URL Tujuan 1" target="_blank" rel="nofollow noopener noreferrer">Host Tujuan 1</a>
          <a href="URL Tujuan 2" target="_blank" rel="nofollow noopener noreferrer">Host Tujuan 2</a>
          <a href="URL Tujuan 3" target="_blank" rel="nofollow noopener noreferrer">Host Tujuan </a>
        </div>
      </div>
      
      <div class="dlurl">
        <div class="res">720p</div>
        <div class="slink">
          <a href="URL Tujuan 1" target="_blank" rel="nofollow noopener noreferrer">Host Tujuan 1</a>
          <a href="URL Tujuan 2" target="_blank" rel="nofollow noopener noreferrer">Host Tujuan 2</a>
          <a href="URL Tujuan 3" target="_blank" rel="nofollow noopener noreferrer">Host Tujuan 3</a>
        </div>
      </div>

    </div>
  </div>
</div>

Nama Judul : Ubah dengan Judul dari apa yang ingin kalian buat

URL Tujuan : Ubah dengan link tujuan yang akan kalian redirect untuk yang ingin di download

Host Tujuan : Ubah dengan nama tempat kalian upload file itu.

Penutup

Cukup sekian dulu postingan dari saya, bila kalian masih ada yang bingung atau ingin di pertanyakan silahkan komentar pada kolom yang sudah saya sediakan. 

Mari kita cari solusi untuk memecahkannya bersama. 

Jika kalian suka dengan postingan kali ini, jangn lupa komentar di bawah dan jangan lupa share kr grup blog whatsapp kalian, terimakasih.