How To Add Blogger Launch Countdown Timer Pop-Up Box In Blogger Blog

Add Blogger Launch Countdown Pop-Up Box In Blogger Blog

• 1.) Open any Browser (Mobile or PC)

• 2.) Go to www.blogger.com.

• 3.) Login using your Gmail Account.

• 4.) After login, the Blogger Dashboard will open

• 5.) Click and Select The Blog where you want to add the code

• 6.) From the left menu, click on Layout and go to layout 

• 7.) Click +Add a Gadget where you want to show the widget (Sidebar / Footer / Header)

• 8.) From the gadget list, click HTML/JavaScript

Enter a Title (optional)

Now, copy the code given below.

<!-- ✅ Countdown Popup Box -->

<style>

#popup-countdown {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0,0,0,0.5); /* semi-transparent dark background */

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 9999;

  animation: fadeIn 0.5s ease;

}

#popup-inner {

  background: #fff3e0;

  padding: 30px 20px;

  border-radius: 14px;

  max-width: 90%;

  width: 400px;

  text-align: center;

  box-shadow: 0 8px 25px rgba(0,0,0,0.3);

  font-family: 'Segoe UI', sans-serif;

}

#countdown {

  display: flex;

  justify-content: center;

  gap: 15px;

  margin-top: 20px;

  flex-wrap: wrap;

}

#countdown div {

  text-align: center;

}

#countdown span {

  display: block;

}

#countdown .time {

  font-size: 28px;

  color: #d84315;

  font-weight: bold;

}

#countdown .label {

  font-size: 14px;

  color: #555;

}

@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}

</style>

<div id="popup-countdown">

  <div id="popup-inner">

    <h2 style="color:#e65100;">Our Website is Launching Soon!</h2>

    <p style="font-size:15px; color:#444;">Join us on <strong>August 28, 2026</strong> – only on <strong>Gayuddy</strong>!</p>

    <div id="countdown">

      <div><span id="d" class="time">--</span><span class="label">Days</span></div>

      <div><span id="h" class="time">--</span><span class="label">Hours</span></div>

      <div><span id="m" class="time">--</span><span class="label">Minutes</span></div>

      <div><span id="s" class="time">--</span><span class="label">Seconds</span></div>

    </div>

    <p style="margin-top:18px; color:#666;">🌐 <strong>www.gayuddy.com</strong></p>

  </div>

</div>

<script>

const d = document.getElementById("d");

const h = document.getElementById("h");

const m = document.getElementById("m");

const s = document.getElementById("s");

const countdown = () => {

  const target = new Date("August 28, 2026 00:00:00").getTime();

  const now = new Date().getTime();

  const diff = target - now;

  const days = Math.floor(diff / (1000 * 60 * 60 * 24));

  const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);

  const minutes = Math.floor((diff / (1000 * 60)) % 60);

  const seconds = Math.floor((diff / 1000) % 60);

  d.innerText = days;

  h.innerText = hours;

  m.innerText = minutes;

  s.innerText = seconds;

};

countdown();

setInterval(countdown, 1000);

</script>

Paste your HTML / JavaScript code in the Content box

Important :  “Where the text is highlighted, you can write something else according to your preference.”

• 9.) Click Save.

• 10.) Click Save Arrangement.

• 11.)  Click View Blog and Check Your Blog.

• 12.) Your HTML / JavaScript widget is Now Live.