Hôm nay mình sẽ share cho các bạn bộ code Get Link Download Drive cho Blogger – Bộ code này các bạn có thể đưa vào Blogger, WordPress, Landing Page, Blog 2.0, …. hay bất cứ đâu bạn muốn (nếu bạn biết chỉnh sửa code 1 chút). Còn ở dưới mình sẽ hướng dẫn dành riêng cho Blogger mà thôi, và có cả Clip nữa nhé 😀 .
- Template Photoshop CV cá nhân 2 – Template Photoshop Portfolio
- Template Photoshop CV cá nhân – Template Photoshop Portfolio
Cái này nếu bạn nào làm chia sẻ tài liệu, phần mềm mà up lên Drive sẽ rõ, còn ở đây mình cũng lười viết mô tả công dụng à 😀 .
Video hướng dẫn cài đặt Code Get Link Download Drive cho Blogger:
Đang cập nhật!
Code Chèn vào Template của 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>Code CSS cho Blogger
<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>Code 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>Code cài đặt 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://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://congvietit.com" target="_blank">Cong Viet Blog.</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 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://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>
