Google Drive đã trở nên rất phổ biến và quen thuộc với người dùng Internet hiện nay. Vì hầu hết mọi người đều có 1 tài khoản Gmail mà đi kèm với tài khoản gmail sẽ có rất nhiều dịch vụ mà trong đó có thêm dịch vụ Google Drive.
Google Drive là gì?
Là một dịc vụ lưu trữ trực tuyến có thể đồng bộ hóa các tệp tin và dữ liệu của người dùng lên lưu trữ đám mây. Từ đó giúp người dùng chia sẻ một cách dễ dàng các tài liệu, hình ảnh, tệp tin, các bản trình bày và nhiều thứ khác nữa.
Ưu điểm khi dùng link trực tiếp ( direct link) của Google Drive:
Tôi có thể nói cho bạn một vài ưu điểm của việc sử dụng link trực tiếp (direct link) của Google Drive như sau:
- Người dùng khi nhận được link này và nhấp vào thì tập tin sẽ được tải ngay về máy mà không cần phải qua một bước nào khác. Việc này giúp tiết kiệm thời gian hơn.
- Cũng không phải nhập mà Captcha khi download.
- Link trực tiếp có thể được dùng với các công cụ hỗ trợ download hàng loạt file.
- Và nhiều thứ khác nữa..........
Cách tạo trang lấy link trực tiếp (direct link) Google Drive bằng Blogger
Vậy cái trang đó trông như thế nào? Bạn có thể bấm vào liên kết bên dưới để xem demo nhé. Nếu thấy thích thì tiếp tục làm.
Bước 1: Tạo một trang giao diện trắng
Bạn tạo một trang blogspot mới. Vào phần chỉnh sửa giao diện, xóa tất cả code hiện tại trong đó. Rồi dán đoạn code bên dưới này vào nhé. Mục đích của đoạn code này là tạo ra 1 trang trắng.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:responsive='true' expr:dir='data:blog.languageDirection' lang='en-US' xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
body{background:#fff}
]]></b:skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'/>
</body>
</html>{codeBox}
Bước 2: Thêm CSS cho trang
Vào phần bố cục để thêm 1 tiện ích mới với kiểu HTML. Sau đó copy đoạn code bên dưới và dán vào nhé.
<style>
body{background-image: url(img/bg.jpg);background-repeat: no-repeat;background-attachment: fixed;
background-size: 100% 100%;}
img {max-width: 100%;height: auto;}
.bg-img{
background-image: url('https://1.bp.blogspot.com/-36L0_XP933U/Xh7aT2CC4MI/AAAAAAAABlY/l08p2AAJKqIWfb6rEQvaPaNCnVnbcabgQCLcBGAsYHQ/s1600/bg.jpg');
}
.card{width:100%;max-width: 500px;margin: 0 auto;float: none;border:2px solid #343a40!important;
position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
}
.form-control:focus {color: #495057;background-color: #fff;border-color: #343a40;outline: 0;box-shadow: 0 0 0 0.2rem rgba(216,217,219,.5);
}
</style>{codeBox}
Bước 3: Thêm JavaScript cho trang
Tương tự như bước trên, vào phần bố cục trang và tao một tiện ích mới với kiểu HTML. Copy đoạn code bên dưới rồi dán vào.
<script>
(function($) {
$(function() {
var $shareLink = $('#sharelink'),
$downloadLink = $('#downloadlink'),
$copyButton = $('#copylinkbtn'),
clipboard;
$shareLink.on('keyup paste click', function() {
var link = $shareLink.val(),
l = link.replace(/\/file\/d\/(.+)\/(.+)/, "/uc?export=download&id=$1");
if(l !== link) {
$downloadLink.val(l);
$copyButton.removeAttr('disabled');
$('#toast').toast('show');
} else {
$downloadLink.val('');
$copyButton.attr('disabled', 'disabled');
if (is_url(link) && link.length > 10) {
$('#error').toast('show');
}
}
});
$downloadLink.on('click', function() {
$downloadLink.select();
});
});
})(jQuery);
function is_url(str)
{
regexp = /^(?:(?:https?|ftp):\/\/)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/\S*)?$/;
if (regexp.test(str))
{
return false;
}
else
{
return true;
}
}
function copy() {
/* Get the text field */
var copyText = document.getElementById("downloadlink");
copyText.select();
copyText.setSelectionRange(0, 99999); /*For mobile devices*/
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
document.getElementById('copylinkbtn').innerHTML = "Copied";
};
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = window.location.search.substring(1),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
}
}
};
</script>{codeBox}
Bước 4: Chèn trang HTML
Tiếp tục thêm một tiện ích mới, rồi copy đoạn code bên dưới và dán vào. Bạn có thể chỉnh sửa giao diện hiển thị ở trong đoạn code này.
<!doctype html><!-- Required meta tags --><!-- Bootstrap CSS --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" /><link rel="stylesheet" type="text/css" href="style.css" /><!-- Image and text --><nav class="navbar navbar-light bg-dark"><div class="container"><a class="navbar-brand text-light" href="/"><img src="https://1.bp.blogspot.com/-9f1y6C8_JXs/Xh7aTrxHVAI/AAAAAAAABlU/sVev-47Xk30W-7sBT-kawV4919tvZIjbwCLcBGAsYHQ/s1600/logo.png" width="30" height="30" class="d-inline-block align-top" alt="" /> Glink Creater</a></div></nav><div class="container bg-img"><div class="row"><div class="card rounded-lg border-dark"><div class="card-header bg-dark text-white"><img src="https://1.bp.blogspot.com/-9f1y6C8_JXs/Xh7aTrxHVAI/AAAAAAAABlU/sVev-47Xk30W-7sBT-kawV4919tvZIjbwCLcBGAsYHQ/s1600/logo.png" width="40" /><button type="button" class="btn btn-light float-right " data-toggle="modal" data-target=".instructions"> Show instructions</button></div><div class="card-body bg-light"><h2 class="card-title">GDrive Direct Link</h2><form><label for="exampleInputPassword1">Share Link</label><div class="input-group mb-3"><input type="url" id="sharelink" class="form-control" placeholder="https://drive.google.com/file/d/..../view?usp=sharing" /></div><label for="exampleInputPassword1">Direct Link</label><div class="input-group mb-3"><input type="text" id="downloadlink" class="form-control" placeholder="Direct Download Link.." readonly /><div class="input-group-append"><button id="copylinkbtn" class="btn btn-dark" type="button" data-clipboard-target="#downloadlink" disabled="" onclick="copy()"> link</button></div></div></form></div><!--end card body--></div><!--end card--></div><!--end row--></div><!--end container--><footer class="bg-dark py-2 text-center text-white fixed-bottom"><p>Powerd By@ <a href="https://techly360.com" target="_blank">Techly360 Pvt Ltd.</a></p></footer><!--link created success or failed alert--><div aria-live="polite" aria-atomic="true" data-autohide="false style=" position:relative;="" min-height:="" 200px; "=" "><div class="toast " id="toast " data-delay="3000 " style="position: absolute; bottom: 75px; right: 30px; "><div class="toast-header bg-success text-white "><img src="https://1.bp.blogspot.com/-9f1y6C8_JXs/Xh7aTrxHVAI/AAAAAAAABlU/sVev-47Xk30W-7sBT-kawV4919tvZIjbwCLcBGAsYHQ/s1600/logo.png " class="rounded mr-2 " alt="logo_ico " width="10 " /><strong class="mr-auto ">Ok, Done !</strong><small>3 sec ago</small><button type="button " class="ml-2 mb-1 close " data-dismiss="toast " aria-label="Close "><span aria-hidden="true ">×</span></button></div><div class="toast-body ">Link Created Success ! You can copy it Now !</div></div><div class="toast error " id="error " data-delay="3000 " style="position: absolute; bottom: 75px; right: 30px; "><div class="toast-header bg-danger text-white "><img src="img/logo.png " class="rounded mr-2 " alt="logo_ico " width="10 " /><strong class="mr-auto ">Error !</strong><small>3 sec ago</small><button type="button " class="ml-2 mb-1 close " data-dismiss="toast " aria-label="Close "><span aria-hidden="true ">×</span></button></div><div class="toast-body ">Invalid Url ! Plz check again .</div></div></div><!-- Modal --><div class="modal fade instructions " tabindex="-1 " role="dialog " aria-labelledby="myExtraLargeModalLabel " aria-hidden="true "><div class="modal-dialog modal-xl "><div class="modal-content "><img src="https://1.bp.blogspot.com/-49fCzhCq6Xk/Xh7aUwT1NsI/AAAAAAAABlc/IIXFBmJWRL80Rc-F1dxnfleg9feownWMgCLcBGAsYHQ/s1600/instructions.gif " /></div></div></div><!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js " integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo " crossorigin="anonymous "></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js " integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1 " crossorigin="anonymous "></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js " integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM " crossorigin="anonymous "></script><script src="js/script.js "></script></!doctype>{codeBox}
OK, vậy là xong. TECHPLUS vừa chia sẻ cho bạn cách tạo một trang lấy link trực tiếp Google Drive bằng Blogger. Nếu bạn thấy bài viết hữu ích hãy chia sẻ công cụ này cho người khác nhé.
