Popup in Blogger Website

 <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>&amp;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>

https://www.techyleaf.in/2021/10/how-to-use-blogger-conditional-tags.html