Tools Auto Generate Download Box

Setelah sebelum nya Tools Auto Generate Data From MyAnimeList kali ini saya akan membagikan Tools untuk membuat Download Box.

Dengan Tools ini kalian hanya perlu mengisi Judul Anime, Resolusi Dan Link Download saja. Kemudia klik tombol result maka html akan muncul.

Tools  Auto Generate Download Box
Dagruel

Langsung saja klik di sini untuk menggunakan nya. Sebelum menggunakan patuhi 1 Syarat berikut.

  1. Batas Tambah Resolusi dan Url Hanya 5 saja, jika lebih maka sisanya akan blank.

Untuk Mempercantik Download Box gunakan Css dan Javascript Dibawah.

.mctnx{font-size:14px;line-height:1.2em;margin-bottom:20px;}
.mctnx .soraddl .content,.soraddl{overflow:hidden}
.mctnx .content{max-height:0;overflow:hidden;transition:max-height .2s ease-out;padding:0}
.soraddl{margin-bottom:5px}
.soraddl .sorattl{padding:9px 10px;background:#0c70de;border-radius:2px;cursor:pointer;line-height:0}
.soraddl .sorattl: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}
.soraddl .sorattl 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}
.soraddl .sorattl.downSible.active{background:#333}
.soraddl .sorattl.downSible.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}
.soraddl .soraurl{padding:4px 0;border-bottom:1px solid #ebebeb}
.soraddl .soraurl a{display:inline-block;background:#f0f2f3;padding:4px 7px;border-radius:3px;margin:2px;font-size:13px}
.soraddl .soraurl a:hover,.soraddl.dlone .soraurl a:nth-child(1):hover{background:#444!important;color:#fff}
.soraddl .soraurl a:nth-child(1){background:#0c70de;color:#fff;font-weight:500}
.soraddl.dlone .soraurl{display:flex;flex-wrap:wrap}
.soraddl.dlone .soraurl .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}
.soraddl.dlone .soraurl .slink{flex-basis:0;-webkit-box-flex:1;flex-grow:1;max-width:100%;padding-left:0;padding-right:15px}
.soraddl.dlone .soraurl a:nth-child(1){background:#f0f2f3!important;color:inherit;font-weight:400}
var coll = document.getElementsByClassName('downSible');
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';
    }
  });
}

Comments