Modern Popup Download Button: Add Style to Your Site

 

Welcome to the blog visitors NIADZGN we offer you a modern, attractive, and elegant pop-up button add-on, and in this article, I will discuss a tutorial on how to install the add-on, that is, how to create a pop-up download button that contains ads and time. 

How does this popup download button work?

After adding this button in the post, or on your blogger page and clicking on the button, a popup will appear, it will contain the specified time. If the time is up, a download button will appear and you can click on it, you can preview the download button

Installation method explanation:

• Step 1: Log in to your Blogger account.
• Step 2: Click on Appearance and then click Edit. HTML
• Step 3: Find the code <head/>; Put the CSS code below the code <head/> directly

  <b:if cond='data:view.isPost'>
  <style>
#button-download{display:inline-flex;display:-webkit-inline-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;align-items:center;-webkit-align-items:center;margin-bottom:10px;padding:9px 20px;border-radius:10px;font-size:.8rem;line-height:1.3rem;background-color:#fdd929;color:#ff2121}
.adpop-top{height:40px;width:100%;border-bottom:1px #E5E5E5 solid}
.btn-at{display:block;height:50px;color:#fff!important;font-size:18px;text-transform:uppercase;background:#f3a;text-align:center;line-height:50px;width:200px;margin:12px auto;transition:all 0.4s ease-in}
[data-ml-modal]{position:fixed;top:0;bottom:0;left:0;right:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:999;width:0;height:0;opacity:0}
[data-ml-modal]:target{width:auto;height:auto;opacity:1;-webkit-transition:opacity 1s ease;transition:opacity 1s ease}
[data-ml-modal]:target .modal-overlay{position:fixed;top:0;bottom:0;left:0;right:0;cursor:pointer;background-color:#000;background-color:rgba(0,0,0,0.7);z-index:1}
[data-ml-modal] .modal-dialog{border-radius:6px;box-shadow:0 11px 15px -7px rgba(0,0,0,0.2),0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12);position:relative;width:90%;max-width:660px;max-height:70%;margin:10% auto;overflow-x:hidden;overflow-y:auto;z-index:2}
[data-ml-modal] .modal-content{background:#fff;padding:23px 27px}
@media (max-width:767px){[data-ml-modal] .modal-dialog{margin:20% auto}}
.ad-pop__close{position:absolute;right:1em;top:1em;width:1.1em;height:1.1em;cursor:pointer}
</style>
  </b:if>

• Step 4: Place the JavaScript code below the code. </body> directly

  <b:if cond='data:view.isPost'>
        <script>
//<![CDATA[
var downloadButton = document.getElementById("button-download"); var counter = 20; var newElement = document.createElement("span"); newElement.innerHTML = "Please wait 20 seconds"; var id; downloadButton.parentNode.replaceChild(newElement, downloadButton); function startDownload() { this.style.display = 'none'; id = setInterval(function () { counter--; if (counter < 0) { newElement.parentNode.replaceChild(downloadButton, newElement); clearInterval(id); } else { newElement.innerHTML = "Please wait" + " " + counter.toString() + " " + " second.... "; } }, 1000); }; var clickbtn = document.getElementById("get-download"); clickbtn.onclick = startDownload;
//]]>
</script>
</b:if>

If you want to change the time you just change the specified code.  var counter = 20;

• Step 5: Copy the following code and paste it into the post or page where you want to add the popup download button.

<p style="text-align: center;"><a class="button" href="#PopupDownload" id="get-download">Download</a></p>
<div data-ml-modal="" id="PopupDownload">
	<div class="modal-overlay"></div>
	<div class="modal-dialog">
		<div class="modal-content center">
          <div class="adpop-top">
			<h2 style="margin: 0px; text-align: center;">Name of the loading window</h2>
            <div class="ad-pop__close" onclick="document.getElementById(&quot;PopupDownload&quot;).style.display=&quot;none&quot;"><svg style="height: 25px; width: 25px;" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"></path></svg></div>
          </div>
          <br />
          <div style="width: 660px;">This text is an example of a preview of the extension. You can change this text to any text you want.<a href=""><img border="0" height="100%" oma="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP7Cw4-cFXQPyCKki6vkcg_TnVcIj8PtwIo5l3RP4c5W-dCHhJ5PnptObLjHoOBmgFuVLTeZrDNeXDfApmjr5h_XWvh0uhwS50a2uMzlGd3Tj5SY2s8w01Nb7BYx-la6G-5M2mVMVUyWeZlJ6RM5BeMY1-BfFQ_kaQ19NEfFdALLnGASngzM9G15DgysE/s16000/ads.png" tech="" width="100%" /></a>This text is an example of a preview of the extension. You can change this text to any text you want.</div><div style="text-align: center; width: 660px;">&nbsp;
          <a class="button" href="https://niadzgn.blogspot.com/" id="button-download">Download file</a></div>
	</div>
</div></div>

You must change the texts and links in this window. I will select them for you to change them.

If you encounter any problem, leave a comment containing the problem and we will solve the problem as soon as possible.