Kode Kotak Box Download Menarik

Codepelajar – Kotak box download yang akan saya bagikan kali ini adalah kotak yang dapat diisikan berbagai konten baik untuk website anime atau website download software.

Maka dari itu silahkan gunakan untuk blogger atau wordpress yang bertujuan untuk membagikan link file konteks dari artikel yang di buat.

Cara membuat box download menarik

Sebelum dimulai harap ketahui bahwa kode ini hanya pernah saya gunakan di bloggee dan belun tentu berjalan pada wordpress atau website lainnya.

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .container {
    max-width: 640px;
    margin: 40px auto 0 auto;
  }

/* CSS DOWNLOAD BOX */
#cp-db {
  font-family: -apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;
  line-height: 1.6;
}
#cp-db h4 {
  text-align: center;
  color: #fff;
  background-color: #444;
  line-height: 2;
}
#cp-db ul {
  list-style: none;
  padding: 10px;
  border: 2px solid #444;
  margin-bottom: 10px;
}
#cp-db ul li {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 2px dashed rgba(0,0,0,0.2);
}
#cp-db a {
  text-decoration: none;
}
#cp-db ul li span {
  font-size: 12px;
  color: #fff;
  display: inline-block;
  padding: 2px 4px;
  border-radius: 5px;
  margin-right: 5px;
}
#cp-db ul li span.scsize {
  background-color: red;
}
#cp-db ul li span.fsize {
  background-color: green;
}

HTML

<div class="container"> 
  <script type="text/javascript">
    var anime = [
      // Episode 1
      {
        judul : "Sword Art Online Episode 1",
        download : [
          {
            screensize : "480p", filesize : "40mb",
            dlink : [
              { server : "GoogleDrive", url : "https://www.google.com"},
              { server : "Zippyshare", url : "https://www.zippyshare.com"},
              { server : "MirrorCreator", url : "https://www.mirrorcreator.com"},
            ]
          },{
            screensize : "720p", filesize : "70mb",
            dlink : [
              { server : "GoogleDrive", url : "https://www.google.com"},
              { server : "Zippyshare", url : "https://www.zippyshare.com"},
              { server : "MirrorCreator", url : "https://www.mirrorcreator.com"}
            ]
          },{
            screensize : "1080p", filesize : "90MB",
            dlink : [
              { server : "GoogleDrive", url : "https://www.google.com"},
              { server : "Zippyshare", url : "https://www.zippyshare.com"},
              { server : "MirrorCreator", url : "https://www.mirrorcreator.com"}
            ] 
          }
        ]
      },{
        judul : "Sword Art Online Episode 2",
        download : [
          {
            screensize : "480p", filesize : "40mb",
            dlink : [
              { server : "GoogleDrive", url : "https://www.google.com"},
              { server : "Zippyshare", url : "https://www.zippyshare.com"},
              { server : "MirrorCreator", url : "https://www.mirrorcreator.com"},
            ]
          },{
            screensize : "720p", filesize : "70mb",
            dlink : [
              { server : "GoogleDrive", url : "https://www.google.com"},
              { server : "Zippyshare", url : "https://www.zippyshare.com"},
              { server : "MirrorCreator", url : "https://www.mirrorcreator.com"}
            ]
          },{
            screensize : "1080p", filesize : "90MB",
            dlink : [
              { server : "GoogleDrive", url : "https://www.google.com"},
              { server : "Zippyshare", url : "https://www.zippyshare.com"},
              { server : "MirrorCreator", url : "https://www.mirrorcreator.com"}
            ] 
          }
        ]
      },
      // Episode 2 tinggal copas dan ganti isinya dari yang pertama
    ];

    function downloadBox() {
      for (var i = 0; i < anime.length; i++) {
        document.write('<h4>'+anime[i].judul+'</h4>');
        document.write('<ul>');
        for (var j = 0; j < anime[i].download.length; j++) {
          document.write('<li><span class="scsize">'+anime[i].download[j].screensize+'</span><span class="fsize">'+anime[i].download[j].filesize+'</span> ');
          for (var k = 0; k < anime[i].download[j].dlink.length; k++) {
            document.write('<a href="'+anime[i].download[j].dlink[k].url+'">'+anime[i].download[j].dlink[k].server+'</a> | ');
          }
          document.write('</li>');
        }
        document.write('</ul>');
      }
    }
    function abracadabra(){
      setTimeout(function(){
        if (typeof anime != "object"){
          console.log("tidak ada data download")
        } else {
          downloadBox();
          console.log("download box dibuat!")
        }
      },1000)
    }

  </script> 
  
  <div id='cp-db'>
    <script>downloadBox()</script>
  </div>
</div>

Silahkan ganti hal yang perlu di ubah dan untuk tulisan dan lainnya bisa anda costum secara mandiri karena kode ini sangat mudah digunakan.