Welcome back once again to Mister Medo Blog. In today’s tutorial, I will show you how to add a password-protected download button to your Blogger website. This feature allows you to restrict download access so that only users who know the password can download the file.
Password-Protected Download Button
Many times, we need to protect a specific page or file such as a premium course, an ebook, an exclusive tool, or any special content. WordPress supports password-protected posts by default, but Blogger does not offer this feature.
Therefore, we use a smart technique that protects download links using a pop-up window that asks the user to enter the password before accessing the file.
How to Add a Password-Protected Download Button
This method works similarly to private Telegram channels—users must enter the password to access the download. It also helps you increase your blog subscribers and protects exclusive content from being downloaded publicly.
Design 1
<div class="btnF">
<div class="Download_btn" onclick="document.getElementById('AT-Download5').style.display='block'">
Download
</div>
</div>
<div class="D-overlay" id="AT-Download5">
<div class="D-overlay__content">
<div>
<div class="box__close" onclick="document.getElementById('AT-Download5').style.display='none'">
×
</div>
</div>
<div class="Box-Header"><span>Download File</span></div>
<!-- Ad Box -->
<div class="adshtml">
<ins class="adsbygoogle"
data-ad-client="ca-pub-xxxxxxxxxxxxx"
data-ad-slot=""
style="display:inline-block;width:100%;height:250px">
<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>
.D-overlay{display:none;transition:.2s ease;}
.adshtml{overflow:hidden;position:relative;height:250px;margin:0 10px;border:1px dashed;}
.D-overlay__content{
position:relative;top:50%;left:50%;
padding:20px;background:#fff;width:80%;max-width:500px;
box-shadow:0 10px 20px rgba(0,0,0,.19);
border-radius:5px;transform:translate(-50%,-12%) scale(.97);
display:flex;flex-direction:column;
}
.d-from{display:flex;flex-direction:column;gap:12px;margin:12px 0 35px;text-align:center;}
.Box-Header{text-align:center;padding-bottom:9px;border-bottom:1px solid;margin-bottom:23px;font-size:19px;font-weight:900;}
.box-content{display:flex;justify-content:center;text-align:center;}
.box__close{position:absolute;top:10px;right:30px;font-size:33px;cursor:pointer;}
.Download_btn{
padding:.6rem 1.2rem;font-size:1.2rem;border-radius:.3rem;
background:#007bff;color:#fff;display:inline-block;text-align:center;
}
.css-input{
padding:.85em 1em;border:1px solid #444;font-size:12px;text-align:center;
}
.error-text{
background:#F8D7DA;color:#8B3E46;border:1px solid #F5C6CB;
padding:15px;border-radius:5px;display:none;margin-bottom:10px;
width:90%;font-weight:bold;text-align:center;
}
@media(max-width:480px){.D-overlay__content{width:100%!important;}}
const errorText = document.querySelector(".error-text");
var Password = "12345"; // Change this password
function passcheck() {
if (document.getElementById("pass1").value != Password) {
errorText.style.display = "block";
errorText.textContent = "ERROR: Password does not match.";
return false;
}
if (document.getElementById("pass1").value == Password) {
window.open("https://www.google.com", "_blank"); // Change download URL
}
}
{
"password": "12345",
"download_url": "https://www.google.com",
"ads_enabled": true,
"version": "1.0"
}
Design 2
This design works very well with Blogger 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">×</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>
<!--[ 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>Conclusion
In this tutorial, we learned how to add a password-protected download button to Blogger. This method is useful for protecting premium or exclusive content and ensuring only authorized users can download the file.
This concludes our article on "How to Add a Password-Protected Download Button in Blogger". We will meet again in a new tutorial on Mister Medo Blog. Stay safe and have a wonderful day! 🙂
