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ừ đâ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: Đăng nhập vào tài khoản blogger của bạn > Chủ đề > Chỉnh sửa HTML
Bước 2: Sau khi Chỉnh sửa HTML, hãy sao chép mã CSS sau và đặt nó vào phần <style> ... </style> hoặc <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}
Bước 3: Ở trong Chỉnh sửa HTML, sao chép mã javascript sau đây rồi đặt mã lên trên thẻ: </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 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 4: Nếu bạn có Lưu chủ đề thì hãy nhấn F5 để refresh.
Bước 5: Vào menu Trang > Trang mới. Đặt tiêu đề trang như Google Drive Generator Tools, sau đó bật đổi chế độ HTML (không phải Soạn) và sao chép mã HTML sau, sau đó dán mã vào trang bạn vừa tạo.
<div class='generator-gdrive'>
<div class='form-gdrive input'>
<label for='gdrive'>Tools Generator Google Dirve</label>
<span>*Ví dụ: https://drive.google.com/file/d/0Bz4YdwRI3rnCMFRoTmtSS0M1VHM/view?usp=sharing</span>
<input name='gdrive' id='driveID' placeholder='Nhập link tại đây' type='text'/>
</div>
<div class='tombol-get'>
<button id='get-button'>Get link</button>
</div>
<div class='form-gdrive output'>
<label for='gdrive'>Kết quả</label>
<input name='gdrive' id='output' placeholder='Nhập link tại đây' 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>
Bước 6: 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ả!
Tham khảo: www.azid45.web.id
Truy cập Bypass Google Account APK để tải file APK nhé
