Trending

How To Add Popup Download Button With Ads And Countdown Timer?

byTech Guruji66 •
0
If you are new in this blogging field then you sometimes heard about Adsense and if you are already a member of Google AdSense then you definitely want to make high money from Google AdSense. And also if you are launching a free image downloading site then the popup download button with ads can help you by boosting your Google AdSense earnings by 2-3 times.

{tocify} $title={Table of Contents}

Also, you can see the popup download with ads, and below in it the timer is running and you can get the download link when the timer is over. On an average number of people, the popup Ads download works better than others because if the user gets close to the popup download when the countdown timer is running then the user again has to refresh the page to get the download link so.

People Also Read:- Online Image To WebP Converter | Online Image Converter Free | Image Converter WebP

I also try this popup download button with ads and it can benefit me by 60% than before. And here in this blog, I will tell you how to add a popup download button with ads and a countdown timer? This code can work with every ad's size but now google AdSense also introduced a responsive ads unit and those ads automatically resize according to the screen.

How To Add Popup Download Button With Ads And Countdown Timer In Blogger

You have to follow these below steps to add a popup download button with ads and countdown
  1. First, log in to your Blogger Account
  2. Then on the left-hand side, click on the Theme Option and open Edit HTML.
  3. Inside Edit HTML, click on anywhere inside the code box and press CTRL+F, and a search box appears.
  4. Now, search for </head> and paste the below code just above the head close tag </head>.

    <style>
    .modal {display: none;position: fixed; top: 0; right: 0; bottom: 0; left: 0; text-align: left; background: rgba(0,0,0, .9); transition: opacity .25s ease;z-index:999; } 
    
.tg-pop__bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; } 
    
.tg-pop { display: none; } 
    
.tg-pop__inner { transition: top .25s ease; position: absolute; top: -20%; right: 0; bottom: 0; left: 0; width: 50%; margin: auto; overflow: auto; background: #fff; border-radius: 5px; padding: 1em 2em; height: 50%; } 
    
.tg-pop__close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; } 
    
.tg-pop__close:after, .tg-pop__close:before { content: ''; position: absolute; width: 2px; height: 1.5em; background: #333; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; } 
    
.tg-pop__close:hover:after, .tg-pop__close:hover:before { background: #aaa; } 
    
.tg-pop__close:before { transform: rotate(-45deg); } @media screen and (max-width: 768px) { .tg-pop__inner { width: 90%; box-sizing: border-box; } } 
    
.adpop-top{height: 40px; width: 100%; border-bottom: 1px #E5E5E5 solid;} 
    
.adhtml{margin: 14px 0 4px; min-height: 260px;}
    
.adpop-content{height: 330px;}
    
#tg-downloadx{display: inline-block; height: 30px; line-height: 30px; width: 140px; text-align: center; background-color: #005af0; color: #fff; font-size: 15px; border-radius: 8px; text-transform: capitalize; border: 1px solid #212121!important; margin-top: 1px;}
    
.download-pop{line-height: 16px; margin: 5px 0 5px;font-size: 14px;position: relative;} 
    
.btn-at{display: block; height: 50px; color: #fff; font-size: 24px;text-transform: uppercase; background: #005af0;text-align:center; line-height: 50px;width: 200px; margin: 150px auto; transition: all 0.4s ease-in;}
    
  .adpop-top h2{margin:0}
    </style>

  5. Now, search for </body> and paste the below code just above the body close tag</body>.

    
    <script>
    
//<![CDATA[
    
const modal = document.querySelector("#my-modal"); const btn = document.querySelectorAll(".btn-at"); const closeModal = document.getElementsByClassName("tg-btnclose")[0]; for (let i = 0; i < btn.length; i++) { btn[i].addEventListener("click", function () { modal.style.display = "block"; }); } btn.onclick = function () { modal.style.display = "block"; }; closeModal.onclick = function () { modal.style.display = "none"; }; window.onclick = function (event) { if (event.target == modal) { modal.style.display = "none"; } };
var downloadButton = document.getElementById("tg-downloadx"); 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>

  6. After pasting both the above codes(Style Code, Script Code), click on the Save Theme button.
  7. Now, you have to add some HTML code to your blog post so, that all codes work perfectly.
  8. Open Posts Option on the blogger and past the below HTML code where you want to show the "Download" button. But you have to paste this HTML Code in HTML View in blogger, not in Compose View.

    <div class="btn-at" id="btn-at">Download</div>
    <div class="modal" id='my-modal'>
    <div class="tg-pop__bg"></div>
    <div class="tg-pop__inner">
    <div class="adpop-top">
    <label class="tg-pop__close tg-btnclose"></label>
    <h2 style="margin: 0px;">Download Your file</h2>
    </div><div class="adpop-content">
    <div class="adhtml">
    Paste Your Ads/Adsense Code Here
    </div>
    <div class="download-pop">
    <a class="button" href="Provide Your URL Here" id="tg-downloadx">Download File</a>
    </div>
    <div class="adhtml">
    Paste Your Ads/Adsense Code Here
    </div>
    </div>
    </div>
    </div>
  9. Remember to Replace "Provide Your URL Here" with your own URL where you want to take a user.
  10. Replace "Paste Your Ads/Adsense Code Here" with your ads code or replace it with AdSense ads code.
  11. Now, click on Update/Publish Post and you have successfully added a popup download button with ads on your blogger site.

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

This is another way of making a popup download button with ads with the help of CSS, HTML, and JavaScript. And this looks like the below image where you have your Google AdSense ads code and the download button showing the ads when the user clicks on it.


This Popup Download Button doesn't have a timer countdown so, if you need a timer popup download button then you can check the above steps but if you need without timer then you can use this code.
If you have doubt that you can use Google AdSense or Other Advertising CompanyAd code then the answer is yes, you can use any ads code to that script.


This download button is best for downloading any 1 to 5-sec file because such interval is short and anyone can wait this time easily. so, without wasting time let's go to the main point on how to create a popup download button and display the Google AdSense ads box?

Follow the below steps which are listed below:-
  1. First, log in to your Blogger Account
  2. Then on the left-hand side, click on the Theme Option and open Edit HTML.
  3. Inside Edit HTML, click on anywhere inside the code box and press CTRL+F, and a search box appears.
  4. Search for  ]]></b:skin> and paste the below CSS just above the ]]></b:skin>.
    
  
  /* Popup download button */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
/* Style button */
.btn {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 6px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px;
  cursor: pointer;
  border-radius: 4px;
}
.btn:hover {
  background-color: blue;
}
.red {
  background-color: red;
}
.red:hover {
  background-color: blue;
}
  5. Now, paste the below JavaScript just above the </body>
    
  
  <script type='text/javascript'>
// When the user clicks on the div, a Popup appears
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
<script>
  6. After adding the above two(CSS and JavaScript) codes, Click on Save Theme.
  7. Now, you have to add some HTML code to your blog post so, that all codes work perfectly.
  8. Open Posts Option on the blogger and past the below HTML code where you want to show the "Download" button. But you have to paste this HTML Code in HTML View in blogger, not in Compose View.
    
  
  <div class="popup" onclick="myFunction()"><button class="btn">Download</button>
<span class="popuptext" id="myPopup"><a href="Provide Your URL Here"><button class="btn red">Click here</button></a>
    Paste Your Ads/Adsense Code Here</span>
</div>
  9. Remember to Replace "Provide Your URL Here" with your own URL where you want to take a user.
  10. Replace "Paste Your Ads/Adsense Code Here" with your ads code or replace it with AdSense ads code.
  11. Now, click on Update/Publish Post and you have successfully added a popup download button with ads on your blogger site.
  12. You can change button size, color, etc from the above button CSS code.

Popup Download Button With Ads And Countdown Timer VS Popup Download Button With Ads But Without Countdown Timer

Popup Download Butten With Ads, Countdown Timer, and Without Ads, Countdown Timer is present in the below tables so, you can compare both the script of popup download and choose any best code for you.
Popup Download Button With Ads And Countdown Timer Popup Download Button With Ads And But Without Countdown Timer
It is best suitable for when downloading large-sized files. It is best suitable for when downloading Low sized files.
It has a time barrio so, the user has to wait until that time which you set to get that file. It increases Engagement in your Ads. High chance of getting clicks on Ads due to ads present below.
Responsive Ads also work on this popup download. Responsive Ads also work on this popup download.
Two Ads Spaces are available at the Top and Bottom. One Ads Space is available at the bottom.
You can easily customize this code. You can easily customize this code.
Copy and Paste of code are available. Copy and Paste of code are available.

Conclusion:- Definitely, adding such popup download codes helps you in your earning by increasing your CPC. You can use both the codes for the large files you can use the timer popup download code and for smaller-sized files you can use the popup download code without the timer. And if you have any questions then comment down below. Thank you for reading our blog.
Tags:
Tech Guruji66

Hello, my name is Arpan Rijal and I am from Nepal. I spend my time on the internet 3 years ago and learn different things and now I am a part-time blogger and YouTuber.

Post a Comment

Previous Post Next Post