How To Add Toast Notification (Popup) To Your Blogger

Hello Blogger user, in this tutorial I will share with you all How to Add Toast Notification (Popup) in Blogger. Installing  Toast Notification (Popup) on your website will look more professional, plus it can also serve as an assessment of the views.

What is the Toast Notification (Popup)?

A toast provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive. Toasts automatically disappear after a timeout.

Let's See How To Make It.

Adding HTML Code.

1. Go to blogger
2. Go to Theme option
3. Click on Edit HTML
4. Now copy the code and paste the code above the </body>

  <div class="toast-container">
      <div class="image">
        <img src="https://blogger.googleusercontent.com/img/a/AVvXsEja98P3mhjAQTY92w7dA5t8vXZckhrvVYrRDltozBafhN9hkAROvlLTBdI7iwVRLyVuBuxB5zLdpjmWXs_sNiFnu6Mbqzu108OoEbVFpKjCcdjUTXUhYxJ3N1M1bhcK72IRgDt6YzMR2Mkyzyy4-tlgUaaH9IXUE3QEfTFCrLhmL-QY2alJhhk0UvGlRw=s399" alt="" />
      </div>

      <div class="text-content">
        <h3>
          Hi, you may like our new ebook called 'Introduction to AR'. Please
          click <a href="#">here</a> to know more.
        </h3>
        <p class="author-name">NaroXTeajsh</p>
      </div>

      <div class="close">
        <img src="https://blogger.googleusercontent.com/img/a/AVvXsEggvkeIzcJIzL3Hg-rLuKlZFtNRGZOhOwlcpvqw6U76-Av-29okAO33TKormuHz4wu9qQLaxCOR2ZandQ01Ct87DE14ZXht5Efr1mMaJ54HvgTgDy9u2qALRK1hMnw78sXsR88vrPo4dZAEBCwbU-AKIdqREz5P4emZhzw82SCOZNKYiQEdJQxSOtBuPQ=s24" alt="" />
      </div>
    </div>
  

Adding JavaScript Code.
5. Copy the code and paste the code above the </body>

const toastContainer = document.querySelector(".toast-container");
const closeBtn = document.querySelector(".toast-container .close");
const toastLink = document.querySelector(".toast-container a");

if (!localStorage.getItem("displayToast")) {
  setTimeout(() => {
    toastContainer.classList.add("active");
  }, 1000);
}

const stopDisplayingToast = () => {
  localStorage.setItem("displayToast", false);
  toastContainer.classList.remove("active");
};

closeBtn.addEventListener("click", stopDisplayingToast);
toastLink.addEventListener("click", stopDisplayingToast);
  

Adding CSS Code.

In The Last Copy the CSS code and paste the code above the ]]></b: skin>

.toast-container {
  position: fixed;
  bottom: -140px;
  width: 90%;
  max-width: 720px;
  display: flex;
  align-items: center;
  background: #000;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  padding: 0 16px;
  border-radius: 24px;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.2);
  left: 50%;
  transform: translateX(-50%);
  transition: all 1800ms ease;
}

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

.toast-container h3 {
  font-weight: 800;
  line-height: 1.5;
  font-size: 16px;
}

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

.toast-container p.author-name {
  color: #aaa;
  font-size: 14px;
}

.toast-container a {
  color: #5f64f3;
}

.toast-container .close {
  position: absolute;
  top: 16px;
  right: 16px;
  cursor: pointer;
}

Rate this article