Kauruka

Beranda
Web Code
Cara Membuat Download Box Show & Hide

Cara Membuat Download Box Show & Hide

Yahooo ada post baru nih.. topik kali ini adalah seputar tutorial lagi :) wahahaha.
Untuk kedua kalinya saya membuat posting tentang Download Box yang cocok di gunakan pada Blogger, Wordpress dan sejenisnya. Karena style semacam ini sering di pake di berbagai web anime, film dan semacamnya, saya tidak akan menyebutkan secara spesifik web mana saja yang menggunakan style Download Box Show Hide semacam ini (karena uda kek style pasaran, terlalu banyak yang web memakainya) berbeda dari posting download box yang sebelumnya.

Saya tau kalian yang datang mengunjungi postingan saya tidak akan membaca paragraf paling atas & langsung menuju angka tahap - tahap tutorialnya karena saya juga menyadari paragraf pertama hanyalah tulisan yang gak penting. Dah lah :v

Tutorial Membuat Download Box Show Hide :

  • Pertama, tempelkan pemanggilan css ini di atas kode </head> atau ]]></b:skin> pada tema / template kalian. 
    .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}
  • Selanjutnya cari </body>, Letakkan script javascript ini tepat di atasnya. 
    <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>
  • Jika sudah, silahkan klik Simpan / Save.

Cara Penggunaan

Silahkan buat suatu posting download - download yang kalian inginkan. Jangan lupa gunakan code di bawah ini!!, namun untuk pengeditnya diharap menggunakan "tampilan HTML" jangan "tampilan Menulis".

<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 = Ganti dengan Judul dari apa yang ingin kalian tulis.
URL Tujuan = Ganti dengan link tujuan (hasil upload) file kalian.
Host Tujuan = Ganti dengan nama tempat kalian upload file itu.

Sekian dulu posting dari saya. sekiranya masih bingung, silahkan komentar pada kolom komentar yang tersedia, kita carikan solusi dari masalah itu bersama. Dikarenakan admin disini juga masih belajar, apabila ada kesalahan pada penulisan maupun penjelasan, saya mohon maaf. Terimakasih telah berkunjung.

Thank you our visiting my site Kauruka