Adding download buttons with pop-up ads and countdown timers can significantly enhance user engagement and boost conversions on your website. This comprehensive guide will walk you through the process step-by-step, ensuring you can implement these features seamlessly.
Why Add Download Buttons with Pop-Up Ads and Countdown Timers?
Integrating download buttons with pop-up ads and countdown timers offers several benefits:
- Increased Engagement: Pop-up ads capture the user's attention, increasing the likelihood of interaction.
- Higher Conversions: Countdown timers create a sense of urgency, encouraging users to act quickly.
- Monetization Opportunities: Pop-up ads provide a platform for additional revenue through ad placements.
Video Tutorial Related to This Topic
If you don’t feel like reading, then instead of reading you can watch the video below that is related to this topic.
Creating the Download Button
Step 1: Login to Blogger dashboard then go to Themes.
Step 2: Click on the icon next to the Customize button.
Step 3: Now press Ctrl + F and search for ]]></b:skin> tag and paste the code below above it.
#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: 12px 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 Wikifortech.com';font-size: 8px;text-transform: uppercase;color: #5356FF;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: #378CE7;box-shadow: 0px 15px 20px rgba(46,229,157,0.4);color: #fff;transform: translateY(-7px)}.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}
Step 4: Search again for </body> tag and paste the code below above </body> tag.
<script>/*<![CDATA[*/
var countdownInterval,count=30;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>
Step 5: Click the icon to save the changes.
Step 6: Lastly, create a new post. Go to HTML view and paste the code below wherever you want your Download button to be.
<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>
<label onclick="closeAdPopup()">
<span class=''>X</span>
</label>
<!-- Countdown timer container -->
<div id="countdownContainer" style="display: none;">
<span id="countdown">Wait 30 Sec</span>
</div>
<!-- Download Now button -->
<button class="download-btn" onclick="startCountdown()">Download Now</button>
<!-- Destination link button (initially hidden) -->
<a href="https://www.explain.com/" class="download-btn" id="destinationLinkBtn" style="display: none;">Destination Link</a>
<div class="tapcredit"></div>
</div>
</div>
</div>
Conclusion
By following these steps, you can effectively add download buttons with pop-up ads and countdown timers to your website. This will not only enhance user engagement but also improve your conversion rates. Experiment with different designs and ad content to find what works best for your audience. Happy coding!
