How to add Password Protected Download Button?

Hello Friends, Welcome back to DracWound Helps. Today on this occasion I am going to explain how you can add Password Protected Download Button in your Website. 

Password

This can used to generated leads in your shortlinks by providing password in the shortlinks. 

This can be helpful to you to add members to your Telegram / Whatsapp group for password. An organic way to increase your group members.

Credit

This Password Protection Download Button is not completely made by us. 

This code was made by Anutrickz. I would like to express my profound gratitude to Anutrickz for giving me the permission to reuse and reshare the codes. 

And also credit goes to Fineshop Design for the popup CSS codes. 


Add Password Protected Download Button 

Step 1: Go to Blogger Dashboard and then to Theme Editor

Step 2 : Press CTRL+F and search for ]]></b:skin>

Step 3 : Paste the below code just above ]]></b:skin>

<style>
  /* Pop-Up Box (Style 1) by Fineshop */
.dhPopDh{position:fixed;z-index:99980;top:0;bottom:0;left:0;right:0;padding:20px;backdrop-filter: blur(10px);/*background:#f3f5fe;*/display:flex;justify-content:center;align-items:center; display: none}

.dhPopDh .dhPopBo{position:relative;background:#fff;max-width:400px;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:30px;border-radius:30px; box-shadow: 0 0 10px #DCDEDF}
.dhPopDh .dhPopBo svg{display:block;width:50px;height:50px;fill:none !important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.dhPopDh .dhPopBo div{margin:10px 0 15px 0;font-size:1.2rem;font-weight:800;color:#08102b}
.dhPopDh .dhPopBo p{margin:0;line-height:1.7em;font-size:0.9rem;color:#08102b}

.dhPopBtn{font-size: 20px;display:inline-flex;justify-content:center;align-items:center; padding: 10px; outline:none;border:none;background:#BBC7FF;border-radius:50px;margin-top:20px;transition:all .2s ease;-webkit-transition:all .2s ease}
.dhPopDh .dhPopBo .dhPopBtn:hover{transform:scale(1.05);-webkit-transform:scale(1.05)}
.dhPopDh .dhPopBo .dhPopBtn svg{width:24px;height:24px;flex-shrink:0;opacity:.8}
.dhPopDh .dhPopBo .dhPopBtn svg.r{animation:rotateIcn 1.5s infinite linear;-webkit-animation:rotateIcn 1.5s infinite linear}
 .darkMode .dhPopBtn{background:#FFE7E7}
.darkMode .dhPopDh .dhPopBo{background:#2c2d31}
.darkMode .dhPopDh .dhPopBo svg{stroke:#fefefe}
.darkMode .dhPopDh .dhPopBo p, .darkMode .dhPopDh .dhPopBo .darktext, .darkMode .dhPopDh .dhPopBo .box__close{color:#fefefe} 

.darkMode .info-text{background-color: #2A2A2A; box-shadow: 0 0 5px #E2E2E2}




    .box-content {
      align-items: center;
      justify-self: center;
      position: relative;
      display: flex;
      text-align: center;
      vertical-align: middle;
      justify-content: center;
    }


    .css-input {
      padding: 20px 1em;
      height: 13px;

      border: 1px solid black;
      font-size: 15px;
      box-shadow: 0 0 10px #FFF7DC color: #000000;
      text-align: center;

      border-radius: 50px;
    }

    .css-input:focus {
      outline: none;
    }

    .error-text {
      background: #F8D7DA;
      padding: 15px;
      border-radius: 5px;
      color: #8B3E46;
      border: 1px solid #F5C6CB;
      display: none;
      margin-bottom: 10px;
      font-weight: 400;
      width: 90%;
      font-size: 12px;
      text-align: center;
    }


    .info-text {
      background: #C9E9FF;
      padding: 10px 10px;
      border-radius: 15px;
      color: black;
      margin: 10px 7px 10px;
      text-align: center;
    }
    
    .d-from {
      display: flex;
      justify-content: center;
      align-content: center;
      flex-direction: column;
      text-align: center;
      justify-content: center;
    }

    .box__close {
      position: absolute;
      top: 28px;
      right: 30px;
      color: #000;
      font-size: 33px;
      cursor: pointer;
      text-decoration: none !important;
    }
    .info-text .bold{font-weight: 900}
    
    

</style>

Step 4: Go to your article where you want to put your download button

Step 5: Paste the below given HTMl Code

<!-- HTML Codes -->

<center>
    <div class='dhPopBtn' onclick='document.getElementById("AT-Download5").style.display="flex"'>Download</div>
  </center>

<!--[ password protected download ]-->
<div id='AT-Download5' class=' dhPopDh'>
  <div class='dhPopBo'>
   
    <div  style="text-transform: uppercase; font-size: 20px" class="darktext">Download File</div>
    <div>
      <div onclick='document.getElementById("AT-Download5").style.display="none"' class="box__close">&times;</div>
    </div>
    <p class="info-text darktext">For password send <span class="bold">#passfortest</span> in our <span class="bold">Telegram Group</span></p>
    <div class='box-content'>
    
      <div>
        <form class='d-from' onsubmit="return passcheck()">
          <p class="error-text"> </p>
    
          <span class="darktext" style="font-size: 18px; text-transform: uppercase; font-weight: 900; margin: 20px 0"> Please Enter Password</span> <input type="text" class="css-input" placeholder='Please Enter Password' required id="pass1">
          <input type="submit" style="border: none; outline: none;  border-radius: 50px" class="dhPopBtn" value="Download Now">
        </form>
      </div>
    </div>
    
  </div>
</div>

Step 6: Paste the below given JavaScript Code at the end of the article

<!-- JavaScript Codes -->

<script>
  //<![CDATA[
  const errorText = document.querySelector(".error-text");
  var Password = "getcode"; //correctpassword (Enter The correct password)

  function passcheck() {
    if (document.getElementById("pass1").value != Password) return errorText.style.display = "block", errorText.textContent = "Sorry but you have Entered the Wrong Password. Try Again", !1;
    document.getElementById("pass1").value == Password && window.open("https://studymaterial.me", "_blank") //replace https://studymaterial.me with your Correct Link or download link
  } //]]>
</script>
 

What to change in the Codes?

  1. Find getcode and replace it with your password
  2. Find https://studymaterial.me and replace it with your URL.

How to use the Code?

  1. Download the codes from above. 
  2. Open the downloaded code in any code editor. 
  3. Copy the codes present in it.
  4. Now go to the place where you want the download button. 
  5. Paste the  codes there. 
  6. Make the changes mentioned above. 
  7. Publish/save the codes.

Video Tutorial

If you are finding problem in doing the changes then you can watch the below video. The codes are different but the procedure is same. 



Conclusion

In this article I have made a tutorial on How to add Password Protected Download Button. This Password Protected Download Button Code is Mobile responsive and attractive to drive the users attention. I hope you have liked this article and please do share with your friends and follow up blog for more.

If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © DracWound Helps | All Rights Reserved 

Comments

  1. Anytime you make a tutorial, try to add a demo to make users more sure of what they are doing..................

    ReplyDelete

Post a Comment

Popular posts from this blog

How to Resize Contact Form 7 Textarea Rows

Top 6 Books for Programmers as a selection of Developers !