Tạo tool get link tải xuống Google Drive

Tạo tool get link tải xuống Google Drive
Vui lòng chờ 0 giây...
Cuộn xuống hoặc nhấp vào Đi tới liên kết đến đích
Chúc mừng! Liên kết được tạo

Xin chào các bạn, nhân dịp này mình sẽ chia sẻ công cụ Google Drive Generator mà các bạn có thể cài đặt trên blog của mình trên một trang tĩnh.

Tạo tool get link tải xuống Google Drive
Tạo tool get link tải xuống Google Drive

Từ đây chúng ta có thể tạo các Trình tạo công cụ phức tạp hơn. Đối với hướng dẫn, hãy xem các bước sau:

Bước 1: Trước hết Đăng nhập vào Trang tổng quan Blogger.

Bước 2: Trên bảng điều khiển Blogger, nhấp vào Chủ đề.

Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'TÙY CHỈNH'.

Bước 4: Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển đến trang chỉnh sửa.

Bước 5: Bây giờ tìm kiếm mã ]]></b:skin> và dán các mã CSS sau ngay trên vào nó.

.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.3}
.form-gdrive{position:relative;display:block}
.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:0;bottom:0;background:#f89000;color:#fff;padding:10px 12px 7px 15px;border-radius:5px 0 0 5px;font-size:15px;line-height:2;z-index:2}
.form-gdrive.input input{width:100%;padding:10px 15px 10px 70px}
.form-gdrive.output input{width:100%;padding:10px 15px 10px 70px}
.form-gdrive.input:after{content:"Links:"}
.form-gdrive.output:after{content:"Links:"}
button#get-button{color:#fff;background-color:#f89000;display:inline-block;text-align:center;cursor:pointer;outline:none;border:none;border-radius:6px;font-size:15px;font-weight:bold;padding:8px 15px;margin:0 auto}
button#copy,button#download,button#reset{color:#fff;background-color:#f89000;display:inline-block;text-align:center;cursor:pointer;outline:none;border:none;border-radius:6px;font-size:14px;font-weight:bold;padding:8px 15px;margin:0 auto}

Bước 6: Tiếp tục hãy thêm JavaScript sau ngay bên trên vào thẻ </body>. Nếu bạn không tìm thấy nó, nó có thể đã được phân tích cú pháp &lt;/body&gt;.

<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 không khớp với định dạng";
    }
  }
  function copy(){
    document.getElementById("output").select();
    document.execCommand('copy');
    document.getElementById("text-keterangan").innerHTML = "Đã sao chép liên kết thành công";
    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>

Bước 7: Lưu các thay đổi bằng cách nhấp vào biểu tượng này .

Bước 8: Vậy là xong! Thêm các mã HTML sau vào Bài đăng trên Blog của bạn thông qua Chế độ xem HTML để hiển thị khung code.

<h3 style='text-align: center;'><span style='color: #2b00fe;'>Get link tải trực tiếp Google Drive</span></h3>
<div class='generator-gdrive'>
  <div class='form-gdrive input'>
    <input name='gdrive' id='driveID' placeholder='https://drive.google.com/file/d/1kUXF...' type='text'/>
  </div>
  <br>
  <div class='tombol-get'>
    <button id='get-button'>Create Direct Link</button>
  </div>
  <div class='form-gdrive output'>
    <input name='gdrive' id='output' placeholder='https://drive.google.com/file/d/0Bz4YdwRI3rnCMFRoTmtSS0M1VHM/view?usp=sharing' type='text' readonly='readonly'/>
  </div>
  <br>
  <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>

Bước 9: Xuất bản Trang, Hoàn thành.

Trên đây là hướng dẫn tạo tool get link tải xuống Google Drive.
Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé.
Chúc các bạn thành công và có một ngày làm việc thật hiệu quả!

Copyright © www.giahuy.net

Về tác giả

Tôi là Nhật Nguyễn, một kỹ sư xây dựng. Nhưng thích tìm hiểu về mã nguồn lập trình web .

Đăng nhận xét

Vui lòng không chia sẻ bất kỳ chi tiết nhạy cảm hoặc cá nhân nào ở đây.
Cookie Consent
Trang web của chúng tôi sử dụng cookie để nâng cao trải nghiệm của bạn.
Thêm chi tiết
Oops!
Có vẻ như đã xảy ra sự cố với kết nối Internet của bạn. Vui lòng kết nối với internet và bắt đầu duyệt lại.
AdBlock Detected!
Chúng tôi đã phát hiện ra rằng bạn đang sử dụng plugin chặn quảng cáo trong trình duyệt của mình.
Doanh thu mà chúng tôi kiếm được từ quảng cáo được sử dụng để quản lý trang web này, chúng tôi yêu cầu bạn đưa trang web của chúng tôi vào danh sách trắng trong plugin chặn quảng cáo của bạn.
Site is Blocked
Sorry! This site is not available in your country.