Các bạn đang có Blog chia sẻ tài liệu, Template, phần mềm.v.v...Các bạn đang tìm trang rút gọn link để kiếm tiền? Nếu các bạn đã đăng ký Adsense thành công thì đây sẽ là giải pháp tối ưu nhất. Vì theo mình thấy những trang rút gọn link có thể đóng cửa bất cứ lúc nào. Khi đó các bạn lại phải tìm và thay đổi tất cả những liên kết mình đã đặt.
Việc tạo trang chờ get link giúp Blog của các bạn trở nên chuyên nghiệp hơn. Các bạn có thể đặt quảng cáo trong đó. Trong khoản thời gian người dùng chờ get link, họ có thể xem quảng cáo do đó tăng khả năng click cho quảng cáo. Và quan trọng hơn trang chờ get link là của mình không bị phụ thuộc.
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.
3 - Cuối cùng, sau khi hết thời gian nút "Đến trang download" mới hiển thị.
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 nhé.
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.
Tạo trang chờ get link kết hợp Google reCAPTCHA v2 cho Blogspot:
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.
Copy và lưu lại khóa vừa đăng ký.
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>
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;
}
else if (id ==
'001')/*id chèn vào bài viết*/ {
get_link =
'link download 1';/*link
download 3*/
Facebook