How to Create a One-Time force Ad Popup with HTML, CSS, and JavaScript

How to add one time force ad click script on blogger: easy tutorial 

How to Create a One-Time force Ad Popup with  HTML, CSS, and JavaScript


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 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="">
  <div id="ad-container">
    <div id="ad-content">
<!-- your ads code are here -->
    <div id="cut-button">X</div>

  #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;
<!-- codes from -->
  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) { = "none";
} else {
  // Set timeout to hide ad after 10 seconds
  setTimeout(() => { = "none";
    sessionStorage.setItem("adClosed", true);
  }, 10000);

adContainer.addEventListener("click", () => { = "none";
  sessionStorage.setItem("adClosed", true);

cutButton.addEventListener("click", (event) => {
  event.stopPropagation(); = "none";
  sessionStorage.setItem("adClosed", true);

window.onbeforeunload = function() {
  if ( === "none") {
    sessionStorage.setItem("adClosed", true);

<!-- copyright -->


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 

Next Post Previous Post
No Comment
Add Comment
comment url

Paid Templates

Blogger themes

Movie theme

codes for blogger

Grafix Material