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:

Download

×

Download file

Enter Password!

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

<!-- 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.

Download

Download File

×

For password send #passNiadzgn in our Telegram Group

Please Enter Password

.

CONCLUSION

In this article, I shared with you Secure Your Downloads: Add a Password-Protected Download Button in Blogger. I hope you found it helpful and informative. Please share it with your friends and follow our blog for more updates.

If you face any problems in demo, download, or have any questions, feel free to ask me in the comments section or join our Telegram Channel to get the latest posts and updates daily.

Note: All posts shared here are only for educational and informational purposes. We respect the rights of original creators. If you are the content owner and have any concerns, please contact us for review.