Tạo trang chờ get link kết hợp Google reCAPTCHA v2 cho Blogspot - NTLRUBY -->
Tạo trang chờ get link kết hợp Google reCAPTCHA v2 cho Blogspot Tạo trang chờ get link kết hợp Google reCAPTCHA v2 cho Blogspot
  • Tạo trang chờ get link kết hợp Google reCAPTCHA v2 cho Blogspot

       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.

    Thủ thuật blogger

       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

    Thủ thuật Blogspot

       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.

    Thủ thuật blogspot

       3 - Cuối cùng, sau khi hết thời gian nút "Đến trang download" mới hiển thị.

    Thủ thuật Blogger

       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>

    <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>
       Trong đó:
             + Số 20 (tô màu đỏ) là thời gian điếm ngược. Các bạn có thể thay đổi theo ý của mình.
             + Data-sitekey (tô màu vàng) là mã khóa reCAPTCHA các bạn thay mã đăng ký ở trên vào.
                   ***Lưu ý: mã Data-sitekey phải tương ứng với miền đã đăng ký, nếu không đúng các bạn sẽ nhận được thông báo như sau:
             + Phần ghi chú /*id chèn vào bài viết*/(tô màu xanh lá) là id do các bạn tự đặt. Có thể là 001, 002,...hoặc tên đặt bất kỳ. Id này sẽ ứng với link download của các bạn ở phần ghi chú /*link download*/(tô màu xanh lam) trong code.
             + Và cuối cùng nhớ thay tên Blog của mình thành tên Blog của các bạn nhé.
       Nếu các bạn có nhiều link tải hơn thì các bạn copy đoạn dưới đây dán thêm vào chỗ mình ghi chú /*thêm id và link tải vào đây*/(tô màu xanh dương)

        else if (id == '001')/*id chèn vào bài viết*/ {

      get_link = 'link download 1';/*link download 3*/

    }

    Bước 4: Chèn liên kết đến trang chờ get link ở bài viết

       Ví dụ trang chờ get link của các bạn có địa chỉ URL là:
    "https://www.domain-name/p/download.html"
       Khi viết bài, tạo nút download các bạn chèn liên kết như sau:
    "https://www.domain-name/p/download.html?id=001" hoặc "/p/download.html?id=001"
       *Trong đó "001" là id ứng với link download của các bạn như đã nói ở bước 3.
    Như vậy mình đã vừa trình bày cách tạo trang chờ get link kết hợp reCAPTCHA v2 trong Blogger.

    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é!!
    Chúc các bạn thành công!
    Có thay đổi chút đỉnh từ code của: vietblogdao.com

  • Bài Viết Liên Quan

    Vui lòng đăng nhập tài khoản tương ứng trên trình duyệt của bạn trước khi bình luận!

    Google

    Zalo

    Không có nhận xét nào :

    Đăng nhận xét

    Hãy đánh dấu vào "Thông báo cho tôi" trước khi gửi bình luận để nhận được thông báo khi Admin trả lời!

NTLRUBY

Đăng ký kênh để ủng hộ NTLRUBY và xem những video thị phạm code nhé!