Hay guys, Are you here because you need a protected your download button with password. So you are in right place. How to add password protect download button script.
Free Premium Blogger Password Protect Download Button Script
Welcome back to nbnet. Now i will give you a solution of how to add password protect download button script. If you are a then you mist search for free templates, free bloggger widget and free blogging scrip for make your blog (website) professional look. Then you are in right place.
Useful links:-
Now jump to the topic password protected download button. This script is very easy to set up edit and modify. Just change password and download link from script. Now,
How to use this script,
- Login to your blogger dashboard.
- Choose post where you want to use this script or create new post.
- Go to HTML view.
- Place a code where you want.
- Change passwort number or character. You can use any type of passwort, default password is "9 9 9 9 9".
- Change download link default download link is https://www.google.com .
- Click on publish button.
 |
| Demo of Password protected download button script |
Here is a script you can easily copy from here and paste on your blogger post.
<style type="text/css">
.classname {
box-shadow: inset 0px 1px 0px 0px #bee2f9;
background-color: #63b8ee;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
text-indent: 0;
border: 1px solid #3866a3;
display:inline-block;
color: #14396a;
font-family: arial;
font-size: 15px;
font-weight: bold;
font-style: normal;
height: 34px;
line-height: 34px;
width: 133px;
text-decoration: none;
text-shadow: 0px 1px 0px #7cacde;
margin-top: 15px;
}
.classname:hover {
background-color: #468ccf;
}
.classname:active {
position: relative;
top: 1px;
}
.css-input {
margin-right: 25px;
padding: .85em 1em;
height: 32px;
width: 170px;
border-width: 1px;
border-color: #1F77BA;
background-color: #FFFFFF;
color: #000000;
border-style: solid;
border-radius: 0px;
}
.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;
}
</style>
<form onsubmit="return passcheck()">
<div class="error-text">
</div>
<p align="center">
<span face="'Noto Sans', sans-serif" style="font-size: 22px; font-weight: bold; margin-right: 25px;"></span>
<input class="css-input" id="pass1" required="" type="Password" />
<input class="classname" type="submit" value="Download Now!" /></p>
</form>
<script>
const errorText = document.querySelector(".error-text");
var Password ="99999";
function passcheck(){
if (document.getElementById('pass1').value != Password) {
errorText.style.display = "block";
errorText.textContent = "ERROR! Password Not Match.";
return false;
}
if (document.getElementById('pass1').value == Password) {
window.open("https://www.google.com", "_blank");
}
}
</script>
Now, finish our processed successfully create password protected download button. Thank you for visit Keep visiting for more blogging knowledge.