Cara Membuat Tools Generator Google Drive Direct Download

www.azid45.web.id - Cara membuat tools generator google drive direct donwload keren. Assalamualaikum.wr.wb semuanya, sudah lama sekali saya tidak update blog lagi, kurang lebih 4 bulanan mungkin. Sebenarnya banyak yang ingin saya share di blog ini seperti tools compress image menggunakan vue js, tools generator google drive, tools generator whatsapp yang support QR Code, memperbaiki multyple upload via google drive serta tutorial terkait onlineshop.

Akan tetapi semuanya itu baru bisa terlealisasikan sekarang ini. Generator Google Drive sendiri saya cek digoogle sudah banyak sekali ada dan saya juga sudah lama menggunakan tools generator ini, seperti misalnya blog milik kang Adhi Suryadi (gdirect.link) secara khusus untuk direct link google drive. Saya juga terinspirasi dari blog ini sehingga blog saya ada tools tersebut.

Disisi lain ada banyak juga blog luar negeri yang menggunakan tools generator google drive, serta include bisa onedrive dan dropbox. Kalo di Indonesia, Anda bisa berkunjung ke blog kakakiky.id. Disana Anda akan menemukan generator 3 in 1 (Google Drive, One Drive, dan Dropbox). 

Bila Anda ingin tutorial terbaru selain ini, Anda juga bisa berkunjung ke blognya Mas Wendy (blog.choipanwendy.com), disana juga sudah terdapat tutorial sejenis dengan tampilan yang keren, selain itu Anda juga bisa lihat-lihat tutorial lainnya yang juga tidak kalah keren dan bermanfaat buat Anda.

Bila Anda ingin mempelajari scriptnya (open source), Anda bisa berkunjung ke akun github golokar di GDlinks. Disana Anda bisa mempelajari setiap kode yang dibutuhkan untuk membuat generator Google drive, dan tentunya Anda dapat mengembangkannya sesuai kebutuhan.

Baiklah, sebelum membuat tools ini kita perlu menganalisa setiap link yang ada di akun google drive terlebih dahulu, agar saat kita buat tools tersebut tidak terjadi error. 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 didownload tanpa menuju tampilan google drive terlebih dahulu. Kurang lebih ID Filenya seperti ini : 1ZS7LpElwnxuGeg1UV0pJjM3OViDRqiDh

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

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

Agar file bisa didownload 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 yaitu:

File

Linknya seperti dibawah ini:

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

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

Document (File berupa Word)

Linknya 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)

Linknya 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)

Linknya 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 memebuat Tools Generator yang lebih kompleks. Untuk tutorialnya bisa simak langkah-langkahnya berikut ini:

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 berikut kemudian taruh kodenya diatas 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 udah Save Template kemudian klik F5 untuk refresh.

Kelima, menuju menu Halaman - 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, Publish Halaman

Selesai.

Direct GDrive

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