How to add Password Protected Download Button?

By -

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. AnonymousNovember 12, 2022 at 8:38 PM

    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

Top 6 Books for Programmers as a selection of Developers !

By -
Image
Books are our closest companions. Software engineers prescribes a few books for coding to improve your Coding Skills .  Books assists you with Thinking , Organize and furthermore make you a Good Problem Solver. Books are athe extraordinary wellspring of information and intelligence . Programming likewise have some Great Books. Taday I have discovered a few books which creates prescribe to improve your coding abilities. So burning through your any further time . LETS GETS STARTED :)  These Books are of incredible worth to programming. Also, I as Programmer also prescribe you to peruse these books .  Book No. 1 Number ONE on the rundown is  CLEAN CODE  This will show all of you deceives and examples of composing great and clean code.Every code which runs is certainly not a spotless code . Amateur Developer regularly commits the errors referenced in this books .This books cause Developer to compose a spotless and the expert code  Book No. 2 Number TWO on the r...
Read More 》

How to Resize Contact Form 7 Textarea Rows

By -
Image
Do you want to resize contact form 7 text area rows  or cf7 textarea rows then don't worry I will help you out, as in this particular article we will discuss how to resize contact form 7 Textarea rows or   cf7 textarea rows  easily? If you are looking for the best Contact Form Plugin for your WordPress blog or website, then the best option for you is Contact Form 7 . Contact Form 7 is the best and free plugin through which you can easily set up a contact form for your website that will be helpful for visitors if they need to contact you. In this particular article, we will discuss what is contact form 7, how to set up contact form 7, and how to resize contact form 7 Textarea rows . Mostly it contain textarea contact form 7 rows How to Resize Contact Form 7 Textarea Rows Now let's talk about the main topic of this article " How to resize Contact Form 7 Textarea rows ", Well, it's very simple to do just follow my instructions step by step to  resize contact f...
Read More 》

Materia X2 v2.9 Premium Blogger Template

By -
Image
Elcreative Academy has launched the new version of Materia X2. Materia X2 v2.9, Material Design is a Multipurpose Blogger Template Inspired by Google Material Design. It has many helpful features. Features of Materia X2 Here are some interesting and valuable features which you will get in Materia X2 v2.9 1. Progress Bar 2. Lazy Loading AdSense 3. Color Mode 4. Post Code Syntax Highlighter 5. Post table of Content 6. Related Posts 7. Safelink 8. Post Scroll Indicator 9. Native Sharer 10. JQuery Script 11. Built-In Components Progress Bar This great feature is now added in Materia X2 v2.9. It is very useful for displaying the Progress Bar as an indicator that the page has been completely loaded or not.  It has animations and it does not affect the loading speed of a page. Lazy Loading AdSense This great and necessary feature is now added in Materia X2 v2.9. This setting for monetization is useful for delaying the loading of the AdSense script which o...
Read More 》