How to add popup notification banner in blogger website.

So hey everyone Iam Prashant and today Iam gonna tell you step by step to add popup notification banner in your website.

pop up notification kya hota hai ! 

Ye notification ke jariye aap apne website ke visitors ko alag alag websites pe bhej sakte hai ya aapne kuch apna page banaya hai kuch specific page banaya ha ya website aap chahte hai ki log isko dekhe click kare . Then you should use popup notification banner it'll very useful to you.

popup notification kaise lagaye :-

Popup notification banner lagana bohat asaan hai agar aap blogger use karte hai to kripya hamare step ko dhyan se padhe aur jaise mai bolu wesa kariye . Agar aapko koi bhi problem aa rahi hai to aap comments kar sakte hai mai personal aapko help karunga !. 

step : 1 Mai ek aapko code dunga usko aapko copy karna hai .

<!-- Colorful AI Popup with Highlighted Title -->
<div id="ai-popup-banner">
  <div class="popup-content">
    <div class="popup-logo-wrapper">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVrQmiOmJT6zsIDq4nz8W54JFYrJBoJzxj8PU-5dgQ-Qpz5KxRA-QOhCqAM8-XqCwdDt8QOBxuOYZLZuXTd-T_5WD1piiD_JlJnXAlphvkV2y9iMZiItO7-C24i_Sc3d_xYz5i8O_ZkFo6qONrOQoJlXQ1BHmo9HVkZj9JnOcGY9mTO-c7UZ5W-xWY_ka0/s132/IMG_4528.png" alt="AI Logo" class="popup-logo" />
    </div>
    <div class="popup-text">
      <strong><span class="highlight-title">Prashant AI</span> is now live!</strong><br />
      Unlock the new intelligent model today.
    </div>
    <a href="https://your-link.com" target="_blank" class="popup-btn">Click Here</a>
    <span class="popup-close" onclick="document.getElementById('ai-popup-banner').style.display='none'">×</span>
  </div>
</div>

<style>
  .highlight-title {
    background: linear-gradient(90deg, #ffde59, #ff914d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
  }

  #ai-popup-banner {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.75), rgba(58, 123, 213, 0.75));
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    color: #fff;
    z-index: 9999;
    max-width: 500px;
    width: 90%;
    font-family: 'Segoe UI', sans-serif;
    animation: fadeInUp 0.5s ease;
  }

  .popup-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px;
    gap: 14px;
  }

  .popup-logo-wrapper {
    background: linear-gradient(135deg, #ffffff, #e0e0e0);
    border-radius: 50%;
    padding: 6px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
  }

  .popup-logo {
    width: 48px;
    height: 48px;
    display: block;
    border-radius: 50%;
  }

  .popup-text {
    flex: 1;
    font-size: 15px;
    line-height: 1.5;
  }

  .popup-btn {
    background: linear-gradient(135deg, #00ffc6, #00aaff);
    color: #000;
    padding: 9px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, background 0.3s ease;
    white-space: nowrap;
  }

  .popup-btn:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg, #00e6b8, #0088cc);
  }

  .popup-close {
    font-size: 22px;
    cursor: pointer;
    color: #ffffffcc;
    padding-left: 10px;
  }

  .popup-close:hover {
    color: #ffffff;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate(-50%, 100%);
    }
    to {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }
</style>
  

Step 2:- Aapko ye code copy karke fir isko blogger ke theme mai paste karni hai.

Kaise kya kare! 

pehle aapko apne blogger ke dashboard pe aa jaana hai. Aap bas image ko follow karte jayiye ! 

Final step :- 

Fir aapko </body> tag khojna hoga milne ke baad aap uske upar is code ko paste kar dijiye.

aap code mai link title sab badal sakte hai . Dhyan rahe kuch code ko touch na kare uske alawa.