How to Create a One-Time force Ad Popup with HTML, CSS, and JavaScript
Dhanjee Rider
How to add one time force ad click script on blogger: easy tutorial
Introduction:
In this article, we will discuss how to create a one-time ad popup with a cut button using HTML, CSS, and JavaScript. This ad popup will only appear once per user session and will be hidden permanently until the user clears their cookies.
Function of script
The JavaScript code checks for the existence of a session storage item called "adClosed". If the item exists, the ad container is immediately hidden. If not, the ad container is displayed and a timeout is set to hide it after 10 seconds. When the ad container is clicked or the cut button is clicked, the "adClosed" session storage item is set to true and the ad container is hidden.
When the user closes the browser window or tab,
How to increase ad cpc
so its help to gain some clicks on your ads if you have too much low cpc, simply it will show only one time when user open your website posts and when they clicked on it they cant see the same popup again in 24 hrs but user can use other browser or incognito tab or they can access by clearing cookies of your site
How to add one time force ad click script on blogger
- Go to blogger.com dashboard
- Now go to theme section
- Click on drop-down then edit html button
- Now serch for </data:post.body>
- Paste the whole code above this tag to show your popup in post
- Congratulations 🎉 you have done ✅
<a href="https://www.google.com/business/story/trim-trim-store-success-story-daya-arya-and-upendra-yadav-started-business-with-rs-10000-999646-2024-05-06">
<div id="ad-container">
<div id="ad-content">
<!-- your ads code are here -->
</div>
<div id="cut-button">X</div>
</div>
</a>
<style>
#ad-container {
position: fixed;
width: 90%;
height: 100vh;
display: flex;
z-index: 9999;
justify-content: center;
align-items: center;
}
#ad-content {
background-color: white;
width: 300px;
height: 250px;
border-radius: 5px;
box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.3);
margin: 50% auto;
text-align: center;
}
#cut-button {
position: absolute;
top: 10px;
right: 10px;
background-color: black;
color: white;
padding: 5px 10px;
border-radius: 50px;
cursor: pointer;
user-select: none;
}
</style>
<!-- codes from dktechnozone.in -->
<script>
const adContainer = document.getElementById("ad-container");
const cutButton = document.getElementById("cut-button");
// Check for existing session storage item
const adClosed = sessionStorage.getItem("adClosed");
if (adClosed) {
adContainer.style.display = "none";
} else {
// Set timeout to hide ad after 10 seconds
setTimeout(() => {
adContainer.style.display = "none";
sessionStorage.setItem("adClosed", true);
}, 10000);
}
adContainer.addEventListener("click", () => {
adContainer.style.display = "none";
sessionStorage.setItem("adClosed", true);
});
cutButton.addEventListener("click", (event) => {
event.stopPropagation();
adContainer.style.display = "none";
sessionStorage.setItem("adClosed", true);
});
window.onbeforeunload = function() {
if (adContainer.style.display === "none") {
sessionStorage.setItem("adClosed", true);
}
};
</script>
<!-- copyright dktechnozone.in -->
Conclusion
So in this tutorial we have learned how to implement a force pop-up ad on our website by using HTML css js with one time visibility
