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

Last word

In this post we will provided information about How to Create a One-Time force Ad Popup with HTML, CSS, and JavaScript, If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.

Dhanjee Rider

Dk Technozone An Editor,Programmer, grafix Designer Website Designer,Android Geek, Instagram Filter Seller,Blloger, Seo Expert, Wordpress Geek etc. Telegram