JOEE txt

Beranda
Desain

Membuat Popup Notifikasi Toast di Blogger

Tutorial cara membuat Popup Notifikasi Toast di blogger atau website Anda dengan menggunakan HTML, CSS dan Javascript.

 

Kali ini adalah tutorial cara membuat Popup Notifikasi Toast di blogger atau website Anda dengan menggunakan HTML, CSS dan Javascript. Anda dapat dengan mudah memasang popup ini di website atau blog Anda tanpa khawatir akan mempengaruhi kecepatan website atau blog milik anda.

Pada artikel ini saya mencontohkan dengan memasang popup ini pada blogger.

Oke, mari ikuti langkah-langkah berikut:

Langkah pertama, buka dashboard blogger dan pilih Tema > Edit HTML kemudian paste script berikut diatas </body>

<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 xhref. 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>

Anda tinggal menyesuaikan script diatas sesuai kebutuhan.

See the Pen Untitled by xhref (@xhref) on CodePen.

Berikut demo menggunakan codepen.

Semoga bermanfaat.

No one is too busy, it's just a matter of priority.