In this tutorial, we'll guide you through the process of creating a clickable popup ad with a countdown timer using HTML, CSS, and JavaScript. This ad will show a "Click Me!" button, and when clicked, it will reveal a popup with an embedded ad and a download button. Additionally, a countdown timer will display, and after a set time, it will redirect users to the destination link.
Table of Contents
Setting Up the HTML Structure
First, let's create the HTML structure for our popup ad. We'll need a container for the ad and a button to trigger the popup. Also, we'll add an overlay element to darken the background when the popup is active.
Creating Download Popup Ad Button With Countdown Timer in your blog will not require much knowledge about HTML, CSS or JS because I have already designed it for you. What you need to do is to implement the codes at right place in your Blogger Theme XML.
Important!
Before we begin adding XML codes, I strongly advise you to make a backup of your current theme. If an issue arises, you can always restore it later.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Posts.
Step 3: Click the Plus icon, you will be redirected to the new post and paste below code where you want to add this button
<div class="tapme"><div class="altq"><a class='button' onclick="toggleAdPopup()">Click me!</a></div><div id="overlay"></div><div class="Clickme" id="Clickme">
<div class="Clickme_cnt">
<ins class="adsbygoogle" data-ad-client="ca-pub-XXXXXXXXXXX" data-ad-format="auto" data-ad-slot="XXXXXXXXX" data-full-width-responsive="true" style="display:block"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script><labelonclick="closeAdPopup()"><spanclass=''>Up</span></label>
<!-- Countdown timer container -->
<div id="countdownContainer" style="display: none;">
<span id="countdown">Wait 5 Sec</span></div>
<!-- Download Now button -->
<button class="download-btn" onclick="startCountdown()">Download Now</button>
<!-- Destination link button (initially hidden) -->
<a href="https://www.your_site_name.com/" class="download-btn" id="destinationLinkBtn" style="display: none;">Destination Link</a>
<div class="tapcredit"></div></div></div></div>
Adding the Publisher id and Ad Unit
Within the popup, we'll include an embedded ad. To add an Adsense Ad unit to your HTML, update the section containing 'ca-pub-XXXXXXXXXXX' and 'XXXXXXXXX' with your Adsense ID and ad unit.
Adding the Download File Link
To add a download link to your HTML, update the Destination link button section "https://www.your_site_name.com/" with your download file link.
Styling the Popup with CSS
Next, we'll apply CSS styles to the elements to give the popup its appearance. We'll set the positioning, background colors, borders, and other styles to make it visually appealing.
Step 1: On Blogger Dashboard, click Theme.
Step 2: Click the arrow down icon next to the 'Customize' button.
Step 3: Choose Edit HTML, you will be redirected to the editing page.
Step 4: Next search the ]]></b:skin> or </style> code and paste the CSS code just above the ]]></b:skin> or </style> code.
#Clickme{background-color:#fffdfc;overflow:hidden;z-index:999;position:fixed;border-radius:20px;top:-100%;left:50%;width:80%;transform:translateX(-50%);box-shadow:2px 2px 5px rgba(0, 0, 0, 0.1);-webkit-transition:top .3s ease;transition:top .3s ease;}#Clickme.show-popup{top:25%}.Clickme_cnt{width:auto;height:auto;padding:12px 30px 12px 16px;margin:0 auto}
.download-btn,.Clickme_cnt span{display: inline-block;background-color:#242836;padding:8px 12px;font-size:10px;font-weight:700;text-transform:uppercase;color:#fff;border-radius:45px;position: relative;line-height:6px;transition:all .3s ease;cursor:pointer; outline:none;border:none;justify-content: center; align-items: center;box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);}.Clickme_cnt a:hover{opacity:.85}
#countdownContainer{display:none;justify-content:center}#overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;opacity:.8;background: rgba(0, 0, 0, 0.3);z-index: 998;}
.tapcredit:before{content:'Design by Thewebtrick.com';font-size:8px;text-transform:uppercase;color:#2e51a3;font-weight:bold;}.tapcredit:after{content:'#ClickMePopup!';font-size:8px;float:right;font-weight:400}
.altq {height: 100%;display: flex;align-items: center;justify-content: center;}.button{width:140px;height:45px;font-family:'Roboto',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:2.5px;font-weight:500;color:#000;justify-content:center;background-color:#fff;border:none;border-radius:45px;box-shadow:0px 8px 15px rgba(0,0,0,0.1);transition:all 0.3s ease 0s;cursor:pointer;outline:none;}.button:hover{background-color:#2EE59D;box-shadow:0px 15px 20px rgba(46,229,157,0.4);color:#fff;transform:translateY(-7px);}
Dark Mode Compatibility (Optional)
If your template contains a dark mode function, and you want it to be a different color when it's turned on, you can change the codes to suit your needs. Each template may have a different dark mode class, so please adjust accordingly. You can replace the marked class with the dark mode class from your template.
For users who prefer a dark mode, we'll add styles to support a dark theme for the popup ad.
/*--dark mode--*/
.drK #Clickme,.drK .Clickme a{background-color:#1e1e1e;color:#fdfcff}.drK .Clickme_cnt span{background-color:#353535}.drK .tapcredit:before,.drK .tapcredit:after{background-color:#1e1e1e;color:#fdfcff}.drK .download-btn,.drK #destinationLinkBtn{background-color:#353535;color:#fdfcff}
Adding the JavaScript Functions
We'll use JavaScript to handle the functionality of the popup ad. This includes toggling the popup when the "Click Me!" button is clicked, displaying the ad, and starting the countdown timer.
<script>/*<![CDATA[*/
var countdownInterval,count=5;function toggleAdPopup(){var a=document.getElementById("Clickme"),b=document.getElementById("overlay");a.classList.toggle("show-popup"),b.style.display=a.classList.contains("show-popup")?"block":"none",a.classList.contains("show-popup")?resetCountdown():(clearInterval(countdownInterval),countdownInterval=null,hideCountdownContainer())}function hideCountdownContainer(){var a=document.getElementById("countdownContainer");a.style.display="none"}function closeAdPopup(){var a=document.getElementById("Clickme");a.classList.remove("show-popup"),clearInterval(countdownInterval),countdownInterval=null,hideCountdownContainer();var b=document.getElementById("overlay");b.style.display="none";var c=document.querySelector(".download-btn"),d=document.getElementById("destinationLinkBtn");c.style.display="inline-block",d.style.display="none"}function resetCountdown(){count=5;var a=document.getElementById("countdown");a.textContent="Wait "+count+" Sec"}function startCountdown(){var a=document.getElementById("Clickme");if(a.classList.contains("show-popup")){var b=document.getElementById("countdown"),c=document.getElementById("countdownContainer"),d=document.querySelector(".download-btn"),e=document.getElementById("destinationLinkBtn");d.style.display="none",c.style.display="inline-block",clearInterval(countdownInterval),countdownInterval=setInterval(function(){count--,b.textContent="Wait "+count+" Sec",0>=count&&(clearInterval(countdownInterval),c.style.display="none",e.style.display="inline-block")},1e3)}}function openDestinationLink(){var a="your_destination_link_here";window.location.href=a}function closePopup(){window.close()};
/*]]>*/</script>
Adding the Countdown Timer
Within the popup, we'll include a countdown timer. The countdown will start when the "Download Now" button is clicked, and after the specified time, it will reveal a "Destination Link" button.
You can easily customize the JavaScript and HTML code according to your preferences. If you wish to adjust the timer, simply change the number '5' to your desired time, like 30, in both the HTML and JavaScript sections. Similarly, if you want to modify the timer text, follow the same process.
Changing Popup Slide Position
By default, popup menu are displayed at the top of the screen, to change this setting or display the widget at the bottom, find and edit the following CSS code:
.top:-100;, replace it withbottom:-100;.-webkit-transition:top .3s, replace it with-webkit-transition:botttom .3s.transition:top .3s, replace it with;transition:bottom .3s.#Clickme.show-popup{top:25%}, replace it with#Clickme.show-popup{bottom:25%}.border-bottom:0;, replace it withborder-top:0;.
Conclusion
With this tutorial, you'll have a working clickable popup ad with a countdown timer that can be easily integrated into your website or blog. It's a great way to engage users and increase click-through rates for your ads.
Please note that the actual code implementation may require some modifications based on your specific use case and requirements. Feel free to experiment and customize the code to suit your needs. Happy coding!
FAQ
How do I customize the countdown timer duration?
To adjust the countdown timer duration, locate the JavaScript section and find the variable 'count' assigned the value '5'. Change this number to your desired time in seconds (e.g., 30 for 30 seconds).
How can I add my Adsense Ad unit to the popup?
To include your Adsense Ad unit, replace 'ca-pub-XXXXXXXXXXX' and 'XXXXXXXXX' in the HTML code with your Adsense ID and ad unit ID, respectively.
Is there anything else I need to consider while implementing this?
While implementing the popup ad, ensure that it complies with the ad policies of your website platform or advertising network. Also, consider the user experience and make sure the ad doesn't interrupt the content flow.
Can I modify the styles to suit my website's design?
Absolutely! You can customize the CSS styles to match your website's design. Adjust the colors, fonts, and other visual elements to your preference.
Is the dark mode compatibility necessary?
No, dark mode compatibility is optional. It provides a dark theme for the popup ad to cater to users who prefer dark mode. You can omit this part if not needed.