How to Make Google Drive Direct Link Generator on Blogger
What is Benefit of Google Drive Direct Link Generator?
Google Drive Director Link Generator
How to Make Google Drive Direct Link Generator on Blogger?
If you want to make your own Glink Generator website, just follow 4 easy steps below: -
- *Install Blank Template on Blogger
- *Install CSS
- *Install JavaScript
- *Install HTML
Install Blank Template on Blogger
|
<?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> |
|
<?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> |
Install CSS
|
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWQZXmBQIlJTAcivug 3cOT1crmM6fRT5blfR2TkC4UFQHmakWutrm_uj7NYFgyVltOxeyicIiO4kEy0xwpMCcrH_qxM ldmWGEeH70RAcC28qygr1p1Wmm-VDEZMsFEwyeobLGAN83Zwck/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>
|
Install JavaScript
|
<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>
|
Install HTML
|
<!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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8dccnbE5Rx14cVbyHW-9NfIHQ_H3Uld8wloiJUroHYNGTwD-k_lUHlQBzFMjtysgPOSRC6sSOUessUaMaXmBLiuwGg9JeSPmgu3snCWiJK0o_usGyz4Z5xjSqchzBOlzMXVkc_TgxPe0/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8dccnbE5Rx14cVbyHW-9NfIHQ_H3Uld8wloiJUroHYNGTwD-k_lUHlQBzFMjtysgPOSRC6sSOUessUaMaXmBLiuwGg9JeSPmgu3snCWiJK0o_usGyz4Z5xjSqchzBOlzMXVkc_TgxPe0/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8dccnbE5Rx14cVbyHW-9NfIHQ_H3Uld8wloiJUroHYNGTwD-k_lUHlQBzFMjtysgPOSRC6sSOUessUaMaXmBLiuwGg9JeSPmgu3snCWiJK0o_usGyz4Z5xjSqchzBOlzMXVkc_TgxPe0/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 Creted
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigf5zeGC8p0SfZYrmH48gkE6i-Zy3dcmO1cNlNFJLCgl8w8yNZUMyNhPElOXKyB-nRh0SMtuaMbBYZKwl9MYLMED6FcdUMptvYnsr1tEFOfecek_ZNO-GF9OPH3FTcjEtY-4rkOrd2TB8/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> Copy
|