How to Create a Popup Download Button and Display Google AdSense Ads Box

How to Create a Download Popup Button and Display Google AdSense Ads Box

Hello friends, today I will show you how to add a popup download button for blogger.

How does this button work?

After adding this button to the post and clicking on the button, a popup will appear and count the time after N seconds. After running, you will go to the file link.

This format is similar to file download sites like Fshare and can add ads to the popup.

How to add timed popup download button to blogger

Step 1: Login to Blogger.

Step 2: On the Blogger dashboard, Select Themes ➺. Edit HTML .

Step 3: Find the </head> tag and add this CSS snippet above it.

<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: Find the </body> tag and add this JavaScript above it.

<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 sec"; 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() + " " + " sec.... "; } }, 1000); }; var clickbtn = document.getElementById("get-download"); clickbtn.onclick = startDownload; //]]> </script> </b:if>

At var counter = 20; then change the number 20 to the number of seconds you want.

Step 5: Save the theme.

Using

You compose the article as usual, then copy this HTML Button and paste it where you want it to be displayed.

<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;">Download Your file</h2> <div class="ad-pop__close" onclick="document.getElementById("PopupDownload").style.display="none""><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;"> <!-- ads here --> <ins class="adsbygoogle" data-ad-client="ca-pub-xxxxxxx" data-ad-format="auto" data-ad-slot="xxxxx" data-full-width-responsive="true" style="display: block;"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <br /> <a class="button" href="url_here" id="button-download">Download File</a> </div> </div> </div>

In which

<!-- ads here --> change the ad code below it to your ad code.

url_here instead of your file url.

Thanks for Visit 💕