Và bài này mình chia sẻ với các bạn cách tạo trang chờ get link kết hợp Google reCAPTCHA v2 cho Blogspot.
Cách hoạt động trang chờ get link kết hợp Google reCAPTCHA v2 cho Blogspot:
1 - Khi người dùng bấm vào nút download ở bài đăng. Trình duyệt sẽ chuyển sang trang chờ get link yêu cầu xác nhận "Tôi không phải là người máy" như hình dưới
2 - Sau khi người dùng tích chọn "Tôi không phải người máy" thời gian chờ nhận liên kết sẽ đếm ngược. Trong code mình chia sẻ là 20 giây, các bạn có thể sửa theo ý của mình.
Qua 3 hình minh họa ở trên các bạn phần nào biết dược cách hoạt động của trang chờ get link rồi đúng không nào? Ngoài ra các bạn có thể truy cập vào loạt bài chia sẻ Template free của mình để xem nó hoạt động như thế nào nhe
Bây giờ chúng ta bắt đầu tiến hành tạo riêng cho mình một trang chờ gét link thôi nào.
Bước 1: Đăng ký Google reCAPTCHA v2
Chính vì kết hợp Google reCAPTCHA v2, nên các bạn phải có mã khóa của nó. Các bạn đăng ký như các bước dưới đây.
Truy cập địa chỉ https://www.google.com/recaptcha/admin/create. Đăng nhập bằng tài khoản Gmail và đăng ký theo 3 hình bên dưới.
Bước 2: Kích hoạt reCAPTCHA v2
Các bạn vào trang quản thị Blogger -> Chủ đề -> Chỉnh sửa HTML copy và dán đoạn code bên dưới vào trước thẻ </head>
<script async='async' defer='defer' src='https://www.google.com/recaptcha/api.js'/>
Bước 3: Tạo trang chờ get link
Các bạn trở lại trang quản trị Blogger -> Trang -> Trang mới, đặt tên trang là "Download" hay gì tùy các ban. Sau đó chuyển sang chế độ HTML copy toàn bộ code bên dưới dán vào.
<script>
function GetURLParameter(sParam) {
var sPageURL = window.location.search.substring(1)
var sURLVariables = sPageURL.split('&')
for (var i = 0; i < sURLVariables.length; i++) {
var sParameterName = sURLVariables[i].split('=')
if (sParameterName[0] == sParam) {
return sParameterName[1]
}
}
}
var id = GetURLParameter('id')
var get_link;
if (id == 'Acacia-Free-Version')/*id chèn vào bài viết*/ {
get_link = 'https://drive.google.com/file/d/14E5XXFZBJPBii6QwRR7YmMtsHB3pNK7v/view?usp=sharing';/*link download 1*/
}
else if (id == 'Angel-Blogger-Template')/*id chèn vào bài viết*/ {
get_link = 'https://drive.google.com/file/d/1ya08V1GeS00y2rqnolpd5cZZmvKpyPvQ/view?usp=sharing';/*link download 2*/
}
else if (id == 'Arlina-Blogger-Template')/*id chèn vào bài viết*/ {
get_link = 'https://drive.google.com/file/d/13EYcQodtMMVQRp762okWDDTMKL86wNEl/view?usp=sharing';/*link download 3*/
}
else if (id == 'Modern-Shop')/*id chèn vào bài viết*/ {
get_link = 'https://drive.google.com/file/d/1dMlJmyU68tEPR6KLqAZioD6RgzGzNq28/view?usp=sharing';/*link download 4*/
}
/*thêm id và link download vào đây*/
else {
get_link = '/';
}
/*---*/
var timer = GetURLParameter('timer')
if(!timer && typeof timer != 'number') {
timer = 20;
}
if (!id) {
document.querySelector('.g-recaptcha').classList.add('hidden')
document.querySelector('.validate-recaptcha p').innerHTML = 'Liên kết tải về không đúng!'
document.querySelector('.validate-recaptcha p').style.color = 'red'
} else {
var validaterecaptcha = function(response) {
var captcha_response = grecaptcha.getResponse()
if (captcha_response.length != 0) {
document.querySelector('.validate-recaptcha').classList.add('hidden')
document.querySelector('.time-wrapper').classList.remove('hidden')
var downloadTimer = setInterval(function() {
document.getElementById('timer-countdown').innerHTML = timer
timer -= 1
if(timer <= 0) {
clearInterval(downloadTimer)
document.getElementById('timer-countdown').innerHTML = '0'
document.querySelector('.getlink-button').innerHTML = '<a class="download_icon" href='+ get_link +' rel="noopener nofollow">Đến Trang Download</a>'
}
}, 1000)
}
}
}
</script>
<div class="validate-recaptcha">
<h3><b>Cảm ơn bạn đã xem Blog NTLRUBY!</b></h3>
<p>Bạn vui lòng tích chọn <b>"Tôi không phải là người máy"</b></p>
<div class="g-recaptcha" data-callback="validaterecaptcha" data-sitekey="6Lex8M8bAAAAACK6IqoGLk1EzniQJtZwCxw7Pxxx"></div>
</div>
<div class="time-wrapper hidden">
<h3><b>Cảm ơn bạn đã xem Blog NTLRUBY!</b></h3>
<p><b>Liên kết tải xuống của bạn sẽ hiển thị sau giây lát!</b></p>
<p><span id="timer-countdown">0</span></p>
<div class="getlink-button"></div>
</div>
<style>
h3 {
text-align:center;
font-size: 18px;
}
p, .getlink-button, .time-wrapper, .g-recaptcha div {
text-align:center;
}
.getlink-button :hover{
background:transparent
}
.getlink-button a {
font-weight: bold;
text-transform: uppercase;
background: #017dee;
border: 1px solid #017dee;
position: relative;
color: #ffffff;
font-size: 14px;
display: inline-block;
padding: 7px 20px;
min-width: 70px;
border-radius: 3px;
}
.getlink-button:hover a{
color:#0084ff!important;
text-decoration:none!important
}
.g-recaptcha {
margin-top: 20px
}
.g-recaptcha div {
width: 100%!important;
}
.download_icon:before {
content: '\f019';
margin-right: 10px;
font-family: fontawesome;
}
#timer-countdown {
margin: 25px 0 30px 0;
display: inline-block;
border-radius: 100%;
width: 120px;
height: 120px;
line-height: 120px;
color: #33b5e5;
border-radius: 50%;
border: 2px solid #33b5e5;
font-size: 60px;
font-weight: 100;
}
.hidden {
display: none;
}
</style>
else if (id == '001')/*id chèn vào bài viết*/ {
get_link = 'link download 1';/*link download 3*/
}
Các bạn xem qua video mình làm chậm từng bước để dễ thực hành hơn nhé!!
0 Nhận xét