Membuat Tools Generator Download Drive

Google Drive Generator merupakan sebuah tools atau alat yang bisa Anda gunakan untuk membuat link unduhan langsung ke file yang telah Anda simpan di Google Drive. Tautan unduhan langsung akan otomatis mengunduh file yang Anda bagikan tanpa membuka pertinjau file di Google Drive.

Disini akan saya jelaskan bagaimana cara membuat halaman Tools Google Drive Generator di Blogger. Selamat mencoba, semoga bermanfaat.

Namun, sebelum membuat tools ini kita perlu menganalisa setiap link yang ada di akun google drive terlebih dahulu, agar saat kita membuat tools tersebut tidak terjadi error.

Mengatahui ID File GDrive

Secara umum, kebanyakan link google drive ketika klik share akan muncul link sebagai berikut:

https://drive.google.com/file/d/1ZS7LpElwnxuGeg1UV0pJjM3OViDRqiDh/view?usp=sharing

Dari link tersebut sebenarnya kita hanya butuh ID Filenya untuk mengubah link tersebut agar bisa langsung kita download tanpa menuju tampilan google drive terlebih dahulu. Dari link tersebut ID Filenya adalah: 1ZS7LpElwnxuGeg1UV0pJjM3OViDRqiDh.

Ketika sudah mendapatkan ID File, kita bisa menambahkannya dengan url berikut:

https://drive.google.com/uc?export=download&id=

Agar file bisa kita download langsung, akhir url tersebut ditambahkan ID File sehingga menjadi seperti dibawah ini:

https://drive.google.com/uc?export=download&id=1ZS7LpElwnxuGeg1UV0pJjM3OViDRqiDh

Bila secara default Google Drive output share seperti itu semua, maka kita bisa menggunakan script yang lebih sederhana dan simple. Cukup menggunakan metode split, join, dan repleace Generator Google drive sudah bisa dibuat.

Kurang lebih kodenya seperti dibawah ini:

function getButton(){
    var dataID = document.getElementById("driveID").value;
    if (dataID != ""){
      var input = dataID.split("https://drive.google.com/file/d/").join("").replace("/view?usp=sharing", "");
      var output = "https://drive.google.com/uc?export=download&id="+input;
      document.getElementById("output").value = output;
    } else {
      document.getElementById("driveID").value = "url Gdrive belum diisi";
    }
  }
  document.getElementById("get-button").onclick = getButton;

Dengan menggunakan script tersebut, Anda sudah bisa membuat Tools Generator Google Drive sendiri. Namun sayangnya setelah saya analisis, link google drive tidak hanya ekstensi file saja, setidaknya ada 4 jenis linis link yang berbeda. Berikut penjelasannya.

Jenis Link Google Drive

File (Berkas Media)

Contoh Link jenis file seperti dibawah ini:

https://drive.google.com/file/d/1ZS7LpElwnxuGeg1UV0pJjM3OViDRqiDh/view?usp=sharing

Apabila jenis linknya seperti ini, maka untuk output downloadnya seperti contoh di atas.

Dan link tersebut biasanya file berupa .rar, .zip, .exe, .mp3, mp4, .png, .jpeg, suara, video, dan image.

Document (File berupa Word)

Contoh Link jenis dokumen seperti dibawah ini:

https://docs.google.com/document/d/1AMtkbAq__O2hOxStFGot97ZmLw-q3VjzaxpNmqHPZgE/edit?usp=sharing

Link tersebut bila file berupa document (.docx), untuk output downloadnya seperti dibawah ini:

https://docs.google.com/document/d/1AMtkbAq__O2hOxStFGot97ZmLw-q3VjzaxpNmqHPZgE /export?format=docx

Spreadsheets (File berupa Excel)

Contoh Link jenis excel seperti dibawah ini:

https://docs.google.com/spreadsheets/d/1V8G2y5joJF07xbZVEg5bM87v5bUMs0Xs_HQ5XEbvwvE/edit?usp=sharing

Link tersebut bila file berupa spreadsheets (.xlsx), untuk output downloadnya seperti dibawah ini:

https://docs.google.com/spreadsheets/d/1V8G2y5joJF07xbZVEg5bM87v5bUMs0Xs_HQ5XEbvwvE/export?format=xlsx

Presentation (File berupa PPT)

Contoh Link jenis excel seperti dibawah ini:

https://docs.google.com/presentation/d/1bvrtogt785ZqcD2XFIBrvXgmCR4kFZ7U/edit?usp=sharing

Link tersebut bila file berupa presentation (.pptx), untuk output downloadnya seperti dibawah ini:

https://drive.google.com/uc?export=download&id=1bvrtogt785ZqcD2XFIBrvXgmCR4kFZ7U

Dari keempat jenis url tersebut tentunya kita tidak bisa hanya menggunakan split, join, dan repleace. Kita harus terlebih dahulu mengidentifikasi link tersebut dengan menggunakan indexOf, setelah itu kita scale dan replace.

Dari sini kita bisa membuat Tools Generator yang lebih kompleks. Untuk tutorialnya bisa simak langkah-langkahnya berikut ini:

Cara Membuat Tools GDrive Generator

Pertama, login ke akun blogger - Theme - Edit HTML.

Kedua, setelah di Edit HTML copy code CSS berikut kemudian taruh di bagian <style>...</style> atau <b:skin> ... </b:skin>.

.generator-gdrive {
    position: relative;
    display: block;
    margin: auto;
    padding: 20px 0;
    max-width: 800px;
    text-align: center;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    line-height: 1.5;
}
.form-gdrive {
    position: relative;
    display: block;
    margin: 5px 0;
    padding: 10px;
    width: calc(100% - 20px);
}
.form-gdrive.output, .tombol-copy-reset {
    display: none;
}
.form-gdrive label {
    position: relative;
    display: block;
    margin: 20px 0;
    font-size: 16px;
    font-weight: 600;
    color: #444;
}
.form-gdrive span {
    position: relative;
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    color: #444;
}  
.form-gdrive input {
    position: relative;
    display: block;
    margin: auto;
    padding: 10px 15px;
    width: calc(100% - 30px);
    background: #ebeff3;
    color: #444;
    border: none;
    outline: none;
    border-radius: 5px;
}
.form-gdrive input:focus, .form-gdrive input:hover {
    background: #fff;
    border: 1px solid #ebeff3;
}  
.form-gdrive:after {
    position: absolute;
    content: "";
    left: 10px;
    bottom: 10px;
    background: #007bff;
    color: #fff;
    padding: 5px 15px 7px 15px;
    border-radius: 5px 0 0 5px;
    font-size: 12px;
    line-height: 2;
    z-index: 2;
}
.form-gdrive.input input {
    width: calc(100% - 80px);
    padding: 10px 15px 10px 65px;
}
.form-gdrive.output input{
    width: calc(100% - 90px);
    padding: 10px 15px 10px 75px;
}  
.form-gdrive.input:after {
    content: "Link :";
}
.form-gdrive.output:after {
    content: "Result :";
} 
button#get-button {
    color: #fff;
    background-color: #007bff;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    padding: 7px 15px;
    margin: 0 auto;
}  
button#copy,button#download,button#reset {
    color: #fff;
    background-color: #007bff;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    padding: 7px 15px;
    margin: 0 auto;
}

Ketiga, tetap berada di Edit HTML, copy code javascript di bawah ini kemudian taruh di atas kode </body>.

<script>
//<![CDATA[
function getButton(){
    var input = document.getElementById("driveID").value,
        drive = input.indexOf("google.com");
    if (-1 != drive) {
        var textd = input.indexOf("d/"),
            textEdit = input.indexOf("/edit"),
            driveID = input.slice(textd + 2, textEdit),
            output = "https://docs.google.com/$type/d/" + driveID + "/export?format=pdf";
        -1 !== input.indexOf("document")
            ? (output = output.replace("$type", "document").split("pdf").join("docx"))
            : -1 !== input.indexOf("spreadsheet")
            ? (output = output.replace("$type", "spreadsheets").split("pdf").join("xlsx"))
            : -1 !== input.indexOf("presentation")
            ? (output = "https://drive.google.com/uc?export=download&id=" + (driveID = input.slice(textd + 2, textEdit)))
            : ((textEdit = input.indexOf("/view")), (output = "https://drive.google.com/uc?export=download&id=" + (driveID = input.slice(textd + 2, textEdit))));
      document.getElementById("output").value = output;
      document.querySelector(".input").style.display = "none";
      document.querySelector(".output").style.display = "block";
      document.querySelector(".tombol-copy-reset").style.display = "block";
      document.getElementById("get-button").style.display = "none";
    } else {
      document.getElementById("driveID").value = "Url tidak sesuai format";
    }
  }
  function copy(){
    document.getElementById("output").select();
    document.execCommand('copy');
    document.getElementById("text-keterangan").innerHTML = "Link berhasil disalin";
    document.getElementById("text-keterangan").style.margin = "10px 0";
  }
  function download(){
    var linkUnduh = document.getElementById("output").value;
    window.open(linkUnduh,'_blank');
  }
  function reset(){
    window.location.href = window.location.href;
  }
  window.onload = function() {
    document.getElementById("driveID").focus(), document.getElementById("get-button").onclick = getButton, document.getElementById("copy").onclick = copy, document.getElementById("download").onclick = download, document.getElementById("reset").onclick = reset;
  };
//]]>
</script>

Keempat, bila sudah, klik Save Template kemudian klik untuk refresh.

Kelima, menuju menu Halaman dan buatlah sebuah Halaman Baru. Beri judul halamannya seperti Tools Generator Google Drive setelah itu ganti mode HTML (bukan Compose) dan copy kode HTML berikut ini, kemudian pastekan kodenya di halaman yang baru Anda buat.

<div class='generator-gdrive'>
  <div class='form-gdrive input'>
    <label for='gdrive'>Tools Generator Google Dirve</label>
    <span>*Contoh: https://drive.google.com/file/d/0Bz4YdwRI3rnCMFRoTmtSS0M1VHM/view?usp=sharing</span>
    <input name='gdrive' id='driveID' placeholder='Input Link Disini' type='text'/>
  </div>
  <div class='tombol-get'>
    <button id='get-button'>Ubah Link</button>
  </div>
  <div class='form-gdrive output'>
    <label for='gdrive'>Result</label>
    <input name='gdrive' id='output' placeholder='Input Link Disini' type='text' readonly='readonly'/>
  </div>
  <div class='tombol-copy-reset'>
    <div id='text-keterangan'></div>
    <button id='copy'>Copy Link</button>
    <button id='download'>Download</button>
    <button id='reset'>Reset</button>
  </div>
</div>

Keenam, Klik Publish Halaman. Selesai.

Demo Direct GDrive

Demikianlah tutorial saya tentang Cara Membuat Tools Genartor Direct Link Download Google Drive, semoga bermanfaat. Amin

Plus UI

Membuat Tools Generator Download Drive

Mengatahui ID File GDrive

Jenis Link Google Drive

File (Berkas Media)

Document (File berupa Word)

Spreadsheets (File berupa Excel)

Presentation (File berupa PPT)

Cara Membuat Tools GDrive Generator

Demo Direct GDrive

Posting Komentar

Cara menghapus ?m=1 secara permanen dari URL di Blogger

Penghitung Tampilan Realtime menggunakan Database Firebase

Cara lazyload Javascript menggunakan LocalStorage