How to Add Password Protected Download Button With Popup Ads in Blogger

Created with by TamilBloggers.org

Follow My Social Media

How to Add Password Protected Download Button With Popup Ads in Blogger

0

 How to Add Password Protected Download Button With Popup Ads

How to Add Javascript in Blogger 


========= Password Protected download button with Popup Ads =================

--------CSS------------

<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: center; padding: 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: 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; }@media only screen and (max-width: 480px){.D-overlay__content{width:100%!important}}
    </style>

------------HTML --------

 <div class='Download_btn' onclick='document.getElementById(&quot;AT-Download5&quot;).style.display=&quot;block&quot;'>Download</div> <div id="AT-Download5" class="D-overlay"> <div class="D-overlay__content"><div><div onclick='document.getElementById(&quot;AT-Download5&quot;).style.display=&quot;none&quot;' class="box__close">&times;</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;width:100%;line-height:250px;'/><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> 
      
      </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 type="Password" class="css-input" placeholder='Please Enter Password' required id="pass1"> <input type="submit" class="Download_btn" value="Download Now"> </form></div> </div>
    <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://www.google.com","_blank")}//]]>
    </script>
  </div>



Countdown Timer For Download Files Automatically - HTML, CSS & Javascript

 Download File 

Please wait..
If the download didn't start automatically, click here.
We hope this article helped you , Share it with your friends and don't forget to facebook page Like us!

Post a Comment

0Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !