Secure Your Downloads: Add a Password-Protected Download Button in Blogger

 

Protect Exclusive Content with Password-Protected Download Buttons in Blogger

As bloggers, we often create exclusive content that we want to share with a select group of people. This could be a paid course, an important e-book, or a custom application not available to the public. However, Blogger's limitations make restricting access to specific posts, pages, or files challenging.

The Need for Password Protection

In WordPress, it's easy to protect a page or post with a password, restricting access to only those who have the password. Unfortunately, Blogger doesn't offer this feature natively. This is where password-protected download buttons come in – a clever workaround to protect exclusive content and increase blog subscribers.

How Password-Protected Download Buttons Work

The idea behind password-protected download buttons is to safeguard links and URLs with a password, much like a private Telegram channel. This method enables you to:

• - Protect exclusive content from public access
• - Increase blog subscribers by offering exclusive content
• - Share sensitive information with authorized individuals

Adding a Password-Protected Download Button in Blogger

To add a password-protected download button in Blogger, follow these steps:

Demo

The First Form

<div class="btnF">
  <div class="Download_btn" onclick="document.getElementById(&quot;AT-Download5&quot;).style.display=&quot;block&quot;">
  Download
</div>
</div>
<div class="D-overlay" id="AT-Download5">
  <div class="D-overlay__content">
    <div>
      <div class="box__close" onclick="document.getElementById(&quot;AT-Download5&quot;).style.display=&quot;none&quot;">
        ×
      </div>
    </div>
    <div class="Box-Header"><span> Download file </span></div>
    <!--[ ADVERTISEMENT]-->
    <div class="adshtml">
      <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxxxxxx" data-ad-slot="" style="display: inline-block; height: 250px; line-height: 250px; width: 100%;">
        <script> (adsbygoogle = window.adsbygoogle || []).push({});</script>
    </ins>
    </div>
    <div class="box-content">
      <div style="width: 80%;">
        <form class="d-from" onsubmit="return passcheck()">
          <div class="error-text"></div>
          <span style="font-size: 22px;">Enter Password!</span>
          <input class="css-input" id="pass1" type="Password" />
          <input class="Download_btn" type="submit" value="Download Now" />
        </form>
      </div>
    </div>
  </div>
</div>
  
  
 

<style type="text/css">
 .D-overlay{display:none;transition:all .2s ease;}.adshtml{overflow:hidden;display:block;position:relative;height:250px;margin-right:10px;margin-left:10px;border:1px dashed;}.D-overlay__content{position:relative;top:50%;left:50%;padding:20px;display:flex;background:#fff;flex-direction:column;width:80%;max-width:500px;box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);line-height:30px;border-radius:5px;transform:translate(-50%,-12%) scale(0.97);overflow:hidden;box-sizing:border-box;}.d-from{display:flex;justify-content:center;align-content:center;gap:12px;flex-direction:column;margin:12px 0 35px;text-align:center;justify-self:center;}.Box-Header{text-align:centerpadding:0 0 9px;border-bottom:1px solid;margin:0 0 23px;font-size:19px;font-weight:900;}.box-content{align-items:center;justify-self:center;position:relative;display:flex;text-align:center;vertical-align:middle;justify-content:center;}.box__close{position:absolute;top:10px;right:30px;color:#585858!important;font-size:33px;cursor:pointer;text-decoration:none!important;}.Download_btn{padding:0.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:0.3rem;color:#fff!important;text-decoration:none!important;background-color:#007bff;border-color:#007bff;display:inline-block;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;}.classname:active{position:relative;top:1px;}.css-input{padding:0.85em 1em;height:13px;border-width:1px;font-size:12px;border-color:#504f4f;color:#000000;text-align:center;border-style:solid;border-radius:0;}.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:bold;width:90%;text-align:center;}@media only screen and (max-width:480px){.D-overlay__content{width:100%!important;}}.drK .D-overlay__content{color:var(--darkU);}</style>

<script > //<![CDATA[
    const errorText = document.querySelector(".error-text");
var Password = "12345";

function passcheck() {
    if (document.getElementById("pass1").value != Password) return errorText.style.display = "block", errorText.textContent = "ERROR! Password Not Match.", !1;
    document.getElementById("pass1").value == Password && window.open("https://niadzgn.blogspot.com", "_blank")}
//]]></script>

The Second Form

This Form is very suitable for Plus UI, Median UI, Imagz UI templates

Demo

<!-- 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">#passNiadzgn</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>

<!--[ CSS Style ]-->
<style>
.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}
.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}
.drK .dhPopBtn{background:#FFE7E7}
.drK .dhPopDh .dhPopBo{background:#2c2d31}
.drK .dhPopDh .dhPopBo svg{stroke:#fefefe}
.drK .dhPopDh .dhPopBo p, .darkMode .dhPopDh .dhPopBo .darktext, .darkMode .dhPopDh .dhPopBo .box__close{color:#fefefe} 
.drK .info-text{background-color: #2A2A2A; box-shadow: 0 0 5px #E2E2E2}
</style>

In this topic, we explained how to add a password-protected download button to a Blogger blog. And here our topic ends.