How to Add a Modern Popup Download Button in Blogger

How to Add a Modern Popup Download Button in Blogger

Go to download
#1


 


Welcome visitors to Blogger Prince Tech blogging, today we offer you to add a popup button with a modern style, attractive shape, and elegant design, and in this article I will discuss a tutorial on how to install the extension, that is, how to create a popup download button that contains ads and time. 


 How does this popup download button work?

After you add this button in the post, or on your blogger page and click the button, a popup will appear, containing the exact time. If the time is up, the download button will appear and you can click on it. You can preview the download button from here.

 Explanation of how to install:

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

<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: Put the JavaScript code just below the </body> code

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


  • If you want to change the time you just change the given code var counter = 20;
  • Step 5: Copy and paste the following code into the post or page where you want to add the download popup 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;">Download window name</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 the extension preview. 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/AVvXsEiPpjl05fg20rcGES5NySDl8jQSnSbTvjO7Es_dAK6Hl0mNKRtRL0rdMZV_M5D9BwciKN0Rq_rTIOUH-qIibUZ5he0EQBDpalyqPTltW31682VAj4Ayj0FtOaC3s0SFOFFhXmxMD22CYmvkN8dh5AIJuMZcNXIMw_jgYIk3QlcvqqCaqx-mTPSmb3xt/s16000/Add.png" tech="" width="100%" /></a>This text is an example of the extension preview you can change This text into any text you want</div><div style="text-align: center; width: 660px;"> 
          <a class="button" href="https://blog1prince.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 in order for you to change them

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


Preview


image quote pre code