notification

 

]]><b:skin> search करे और जस्ट उसके ऊपर निचे दिए code को पेस्ट करें

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

}

फिर </body> search करे और निचे दिए code को </body> के ऊपर पेस्ट करें

<div class='toast-container'>

      <div class='image'>

        <img alt='' src='images/cover.png'/>

      </div>

      <div class='text-content'>

        <h3>

          Hi, you may like our new ebook called &#39;Introduction to AR&#39;. Please

          click <a href='#'>here</a> to know more.

        </h3>

        <p class='author-name'>Live Blogger</p>

      </div>

      <div class='close'>

        <img alt='' src='images/close-icon.png'/>

      </div>

    </div>

    <script>

  const toastContainer = document.querySelector(&quot;.toast-container&quot;);

const closeBtn = document.querySelector(&quot;.toast-container .close&quot;);

const toastLink = document.querySelector(&quot;.toast-container a&quot;);

if (!localStorage.getItem(&quot;displayToast&quot;)) {

  setTimeout(() =&gt; {

    toastContainer.classList.add(&quot;active&quot;);

  }, 1000);

}

const stopDisplayingToast = () =&gt; {

  localStorage.setItem(&quot;displayToast&quot;, false);

  toastContainer.classList.remove(&quot;active&quot;);

};

closeBtn.addEventListener(&quot;click&quot;, stopDisplayingToast);

toastLink.addEventListener(&quot;click&quot;, stopDisplayingToast);

  </script>