Download button with pop-up ads and countdown timer code

0

Hello friends, in this article I am sharing a file or movie download button code with you, in which advertisement will also come with popup which will increase income.

Automatics pop-up display download timer and a google adsance ad will greatly improve your earnings and then after few seconds display a download button which user can download.

From the download link, then when the user exits, the download button will be hidden automatically, to see that button again, he has to reload the page, then he will see that download button.

Installing in blogger website is very easy, just follow the simple steps to learn how to install Download button with pop-up ads and countdown timer code.

How to use it in blogger website?

To use this code first copy the below html code and then paste this html code in blogger post where you want to give download button and update your post.

<p><a class=”btn-at” href=”#bela-download-pop” id=”btn-at”>Download</a></p>
<div data-ml-modal=”” id=”bela-download-pop”>
<div class=”modal-overlay”></div>
<div class=”belagraphic-modal”>
<div class=”bela-modal center”>
          <div class=”adpop-top”>
<h2 style=”margin: 0px;”>Download Your file</h2>            
            <div class=’bela-pop__closed’ onclick=’document.getElementById(“bela-download-pop”).style.display=”none”‘><svg viewBox=’0 0 512 512′ xmlns=’http://www.w3.org/2000/svg’ style=’width:25px;height:25px;’><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’/></svg></div>
          </div>
          <br />
          <div style=’width:660px; height 70%’>
         <ins class=”adsbygoogle”
     style=”display:block”
     data-ad-client=”ca-pub-xxxxxxx”
     data-ad-slot=”xxxxx”
     data-ad-format=”auto”
     data-full-width-responsive=”true”></ins><script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
          <br />
          <a class=”button” href=”#” id=”bela-download”>Download File</a>
</div>
</div>
</div>
How to install Download button with pop-up ads and countdown timer code
  1. Open blogger.com
  2. Select Blog Name
  3. Then go to the Theme
  4. Then click on Customize DropDown
  5. Then click on Edit HTML

by selecting Edit HTML After that press ctrl+f and search and press enter, then you will get to see the tag then you paste the below css and js code.

 <script>
//<![CDATA[
var downloadButton = document.getElementById(“bela-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(“btn-at”); clickbtn.onclick = startDownload;
//]]>
</script>
        
      <style>
        #bela-download{position: relative;display: inline-block; height: 30px; line-height: 30px; width: 140px; text-align: center; background-color: #f3f2f2; color: #000; font-size: 15px; border-radius: 8px; text-transform: capitalize; border: 1px solid #212121!important; margin-top: 1px;} .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] .belagraphic-modal { 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] .bela-modal {background:#fff; padding:23px 27px;} @media (max-width:767px) { [data-ml-modal] .belagraphic-modal {margin:20% auto;} }
          .bela-pop__closed { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; }
        </style>

Now, your your Download button with pop-up ads and countdown timer code is set. Happy Blogging😀.

Tags

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Thanks for any suggestions or questions! We will reply to your message soon.

Thanks for any suggestions or questions! We will reply to your message soon.

Post a Comment (0)

Footer Copyright

Design by - Free Blogger Templates | Distributed by Blogger Template
Our website uses cookies to enhance your experience. Learn More
Accept !