Billboard Ads

Chia sẻ code bảo vệ button download bằng mật khẩu đơn giản với CSS và JS

Table Of Contents

Xin chào các bạn đã đến với Thành Trương Blog! Trong bài viết ngày hôm nay, mình sẽ chia sẻ cho các bạn code bảo vệ button download bằng mật khẩu đơn giản với CSS và JS. Bạn sẽ dễ dàng thực hiện với các bước hướng dẫn vô cùng cơ bản. Áp dụng cách này, bạn sẽ hoàn toàn giữ chân được người xem bài viết. Cũng như để tải xuống bất kỳ thứ gì họ cũng phải biết được mật khẩu mới có thể tải xuống được. Trừ khi bạn show mật khẩu ra, còn không bạn sẽ tìm cách làm thế nào đó để họ có được mật khẩu mới mở khóa được và tiến hành tải xuống.

Chia sẻ code bảo vệ button download bằng mật khẩu đơn giản với CSS và JS
Chia sẻ code bảo vệ button download bằng mật khẩu đơn giản với CSS và JS

Hướng dẫn thực hiện bảo vệ button download

Xem trước
  1. Bước 1: Bạn hãy tạo một bài viết mới.

  2. Bước 2: Bạn chuyển sang chế độ Chỉnh sửa HTML

  3. Bước 3: Bạn copy toàn bộ đoạn code dưới đây và dán vào vị trí nào mà bạn muốn.

  4. <style>
     #protect-body a{margin:1em 0px;padding:5px 12px;background:#6750a4;align-items:center;text-decoration:none;max-width:100%;line-height:2em;display:inline-flex;white-space:nowrap;font-size:16px;color:#fff}#protect-overlay::after{content:'';display:block;position:absolute;right:0;top:0px;bottom:0;width:39%;overflow:hidden;border-top-left-radius:0;border-bottom-left-radius:112%;background-color:#f1f1f0}.overlay-credit{text-align:center;margin-top:20px;z-index:9;position:absolute;bottom:6px;right:15px;font-size:10px}#protect-overlay span.overlay-title{position:relative;font-size:20px;text-align:center;z-index:9}#protect-overlay{background:#fff;padding:30px;display:flex;position:relative;flex-direction:column;box-sizing:border-box;border:2px dashed #6750a4;margin:18px auto}.from-overlay{align-items:center;text-align:center;display:flex;margin-bottom:20px;flex-direction:column;justify-content:center;z-index:9}#protect-overlay input{margin:0 auto;padding:12px;border:0;outline:0;max-width:100%;width:75%;text-align:center;background:#ddd;border-radius:3px;transition:.3s all}#protect-overlay input:focus, #protect-overlay input:active{border:2px solid #6750a4;background:#fff;color:#222}#protect-overlay button{width:unset;margin:.5em 0 .5em 5px;padding:10px 15px;background:#6750a4;border:2px solid transparent;outline:0;color:#fff;border-radius:3px;cursor:pointer;transition:.3s all}#protect-overlay button:hover{background:#fff;border:2px solid #6750a4;color:#6750a4}#protect-overlay input#togglepassword{margin:10px 5px 0 0;padding:0;width:unset}.toggle-wrapper{display:block}@media only screen and (max-width: 728px){#protect-overlay button{margin-left:0}.overlay-credit{left:0!important;right:0!important}}
    </style>
    
    
    <div class="body" id="protect-body" style="margin: 3em 0px;">
    <a href="https://www.thanhtruongblog.com/"> Nhấn vào để Tải Xuống </a>
    </div>
    <div class="overlay" id="protect-overlay">
      <span class="overlay-title"> Nhập mật khẩu để mở khóa Tải Xuống!</span>
      <br />
    <form action="a()" class="from-overlay" method="GET">
    <input id="password" name="answer" type="password" />
    <button type="submit">Mở khóa</button>
    <div class="toggle-wrapper"><input id="togglepassword" onclick="x()" type="checkbox" value="Show Password" /><lable>Hiện mật khẩu</lable></div>
    </form>
      <span class="overlay-credit"> Code by - ♥ Thành Trương Blog</span>
      <script type="text/javascript">
      function x(){var t=document.getElementById("password");"password"===t.type?t.type="text":t.type="password"}function a(){document.getElementById("password");x.type,x.type="password"}!function(){var t=document.getElementById("protect-overlay"),e=document.getElementById("protect-body");e.style.display="none",t.getElementsByTagName("form")[0].onsubmit=function(){return this.answer.value===atob("dGhhbmh0cnVvbmdibG9n")?(alert("Đúng mật khẩu!"),t.style.display="none",e.style.display="block"):alert("Sai mật khẩu!"),!1}}();
      </script>
    </div>
    Chú ý! Chỗ "dGhhbmh0cnVvbmdibG9n" là bạn đặt mật khẩu của bạn.
  5. Bước 4: Để tạo mật khẩu bạn hãy truy cập vào Convert Base64 để hiến hành mã hóa mật khẩu. Sau đó bạn copy mật khẩu và thay thế mật khẩu hiện tại trong code.

  6. Bước 5: Lưu lại và kiểm tra kết quả.

Kết luận

Trên đây là toàn bộ hướng dẫn của mình để các bạn có thể bảo vệ Button Download bằng mật khẩu một cách dễ dàng nhất có thể. Nếu bạn là người chuyên về code thì có thể tùy chỉnh theo cá nhân. Trong quá trình thực hiện nếu có vấn đề gì cần hỗ trợ, bạn hãy để lại bình luận bên dưới để mình giải đáp nhé. Chúc các bạn thành công.

Read Also
6 comments
  1. Nguyễn Bá Chỉnh ☭ ™︎
    5/29/2024 10:00:00 PM
    sao nó cứ báo sai ấy nhỉ
  2. Tuong Duy Anh
    5/31/2024 02:07:00 PM
    đổi font chữ blog kiểu gì vậy ạ