How to Add Toast Popup Notifications to Your Blogger Website

In this article, you will learn how to add a Toast Popup Notification to your Blogger website. I have created this notification popup using HTML, CSS, and JavaScript.

You can easily add it to your site without slowing down your page speed.

This is a great way to share important updates, special offers, or add a Call To Action (CTA) button for your products or services. This type of notification helps increase click-through rates (CTR) and boost conversions.

Let's see how you can add this notification popup to your Blogger website.

First, go to your Blogger dashboard and click on the "Theme" section.

Next, take a backup of your theme. After that, click on the "Edit HTML" option in the drop-down menu.

Now, go to the end of the theme code and search for the closing `</body>` tag.

You need to paste the given code below just above this tag.

<div class="T-container">
  <div class="T-close">X</div>
  <div class="T-icon">
    <!-- Replace this with your Telegram SVG icon -->
    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewbox="0 0 64 64">
      <path d="M56.4,8.2l-51.2,20c-1.7,0.6-1.6,3,0.1,3.5l9.7,2.9c2.1,0.6,3.8,2.2,4.4,4.3l3.8,12.1c0.5,1.6,2.5,2.1,3.7,0.9 l5.2-5.3c0.9-0.9,2.2-1,3.2-0.3l11.5,8.4c1.6,1.2,3.9,0.3,4.3-1.7l8.7-41.8C60.4,9.1,58.4,7.4,56.4,8.2z M50,17.4L29.4,35.6 c-1.1,1-1.9,2.4-2.0,3.9c-0.2,1.5-2.3,1.7-2.8,0.3l-0.9-3c-0.7-2.2,0.2-4.5,2.1-5.7l23.5-14.6C49.9,16.1,50.5,16.9,50,17.4z"></path>
    </svg>
  </div>
  <div class="text-content">
    <h3>
      Hi, Welcome to Techyleaf. Join Our Telegram Channel to get latest updates
      <a href="https://t.me/key2blogging" class="T-button">
        Join Now <span>&rarr;</span>
      </a>
    </h3>
  </div>
</div>

<style>

/* Adjust Popup Background Here */
.T-container {
  position: fixed;
  bottom: -140px;
  width: 90%;
  max-width: 720px;
  display: flex;
  align-items: center;
  background: #05344b;
  color: white;
  font-family: "system-ui", sans-serif;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 1800ms ease;
}

.T-container.active {
  bottom: 20px;
}

.T-container .text-content h3 {
  color: white;
  font-size: 17px;
  font-family: system-ui;
  padding: 20px 0;
  font-weight: 500;
  line-height: 20px;
}

.T-container .text-content {
  padding: 0 24px;
  padding-right: 40px;
}

/* Adjust Button Background Here */
.T-button {
  display: inline-block;
  padding: 5px 13px;
  background-color: lightyellow;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  margin: 10px 0px 0px 0px;
  cursor: pointer;
}

.T-button span {
  margin-left: 8px;
}

/* Adjust Icon Background Here */
.T-container .T-icon {
  text-align: center;
  background-color: #0077aa;
  border-radius: 6px;
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

/* Adjust Icon Size Here */
.T-container .T-icon svg {
  fill: white;
  width: 30px;
  height: 30px;
}

.T-container .T-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

</style>

<script>
const toastContainer = document.querySelector(".T-container");
const closeBtn = document.querySelector(".T-close");
const toastLink = document.querySelector(".T-button");

const hideToastFor30Days = () => {
  const currentDate = new Date();
  const expirationDate = new Date(currentDate.getTime() + 30 * 24 * 60 * 60 * 1000); // 30 days in milliseconds
  localStorage.setItem("toastExpirationDate", expirationDate.getTime());
  toastContainer.classList.remove("active");
};

if (!localStorage.getItem("toastExpirationDate") || new Date().getTime() > localStorage.getItem("toastExpirationDate")) {
  setTimeout(() => {
    toastContainer.classList.add("active");
  }, 1000);
}

closeBtn.addEventListener("click", hideToastFor30Days);
toastLink.addEventListener("click", hideToastFor30Days);
</script> 

Now, change the Call to Action link, SVG icon, description, and any other details in the code. Then save the theme code.

The Toast Notification Popup is now added to your Blogger website.

You can also load this popup on specific pages like the homepage, post pages, or static pages using Blogger Conditional Tags.

You can easily customize the popup by adjusting the CSS code. Watch the video to learn more.

If you have any questions, feel free to ask in the comments section.