Sugar kissed Letters

♡ Blog Update Notification ♡

A cute little notification button for your blog! Click the image to open a small window with your latest updates.

You can customize the image, title, update dates and messages however you'd like. 🎀

✧ preview ✧

♡ QUICK TUTORIAL ♡

01. choose your notification image ♡

Find:
src="PASTE YOUR NOTIFICATION IMAGE LINK HERE"

Replace it with the direct image link of your choice.

You can use a GIF, PNG or any other image you'd like! 🎀

02. customize your updates ♡

Find the section containing:
YOUR DATE HERE
and
YOUR UPDATE HERE

Replace these with your own dates and blog updates.

You can add as many updates as you'd like by copying one of the existing .update sections.

03. customize the title ♡

Find:
♡ YOUR TITLE HERE ♡

Replace it with whatever you'd like your update window to say.

04. that's it! ♡

Add the code to your blog and click your notification image to open your latest updates! 🎀

<style>

/* =====================================================
   ♡ BLOG UPDATE NOTIFICATION ♡
   ===================================================== */

#blog-notification {

  position: fixed !important;

  top: 15px !important;
  left: 20px !important;

  width: 95px !important;
  height: 95px !important;

  z-index: 2147483647 !important;

  margin: 0 !important;
  padding: 0 !important;

  pointer-events: none;

}


/* =====================================================
   NOTIFICATION BUTTON
   ===================================================== */

#notification-button {

  position: absolute;

  top: 0;
  left: 0;

  width: 95px;
  height: 95px;

  cursor: pointer;

  pointer-events: auto;

}


/* =====================================================
   NOTIFICATION IMAGE
   ===================================================== */

#notification-image {

  position: absolute;

  width: 85px;
  height: 85px;

  left: 5px;
  top: 5px;

  object-fit: contain;

  z-index: 5;

  animation:
    notificationShake 1.4s
    ease-in-out
    infinite;

}


@keyframes notificationShake {

  0%, 100% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(-3deg);
  }

  20% {
    transform: rotate(3deg);
  }

  30% {
    transform: rotate(-3deg);
  }

  40% {
    transform: rotate(2deg);
  }

  50% {
    transform: rotate(0deg);
  }

}


/* =====================================================
   NOTIFICATION NUMBER
   ===================================================== */

#notification-number {

  position: absolute;

  top: 0;
  right: -3px;

  width: 20px;
  height: 20px;

  background: #e887ad;

  border: 2px solid #ffffff;

  border-radius: 50%;

  color: #ffffff;

  font-family: Arial, sans-serif;

  font-size: 12px;

  font-weight: bold;

  line-height: 16px;

  text-align: center;

  box-sizing: border-box;

  z-index: 30;

  box-shadow:
    0 1px 4px
    rgba(190,80,125,.3);

}


/* =====================================================
   GLITTER
   ===================================================== */

.notification-glitter {

  position: absolute;

  color: #f3a5c8;

  font-size: 12px;

  font-weight: bold;

  text-shadow:
    0 0 3px #ffffff,
    0 0 6px #f3a5c8;

  pointer-events: none;

  z-index: 15;

  animation:
    notificationGlitter 1.5s
    ease-in-out
    infinite;

}


.glitter1 {
  left: -1px;
  top: 17px;
}

.glitter2 {
  right: -2px;
  top: 27px;
  animation-delay: .35s;
}

.glitter3 {
  left: 12px;
  bottom: 5px;
  animation-delay: .7s;
}

.glitter4 {
  right: 8px;
  bottom: 10px;
  animation-delay: 1s;
}


@keyframes notificationGlitter {

  0%, 100% {
    opacity: .25;
    transform:
      scale(.65)
      rotate(0deg);
  }

  25% {
    opacity: .8;
    transform:
      scale(1)
      rotate(10deg);
  }

  50% {
    opacity: 1;
    transform:
      scale(1.35)
      rotate(20deg);
  }

  75% {
    opacity: .65;
    transform:
      scale(.9)
      rotate(5deg);
  }

}


/* =====================================================
   UPDATE WINDOW
   ===================================================== */

#update-window {

  display: none;

  position: fixed !important;

  width: 180px;

  padding: 9px;

  box-sizing: border-box;

  background: #fff8fb;

  border:
    1px solid #e5a1bc;

  box-shadow:
    0 3px 12px
    rgba(200,100,145,.25);

  text-align: left;

  z-index: 2147483646 !important;

  font-family:
    "Cardo",
    Georgia,
    serif;

}


#update-window.open {

  display: block;

  animation:
    updateOpen .25s
    ease-out;

}


@keyframes updateOpen {

  from {

    opacity: 0;

    transform:
      translateY(-5px);

  }

  to {

    opacity: 1;

    transform:
      translateY(0);

  }

}


/* =====================================================
   UPDATE TITLE
   ===================================================== */

#updates-title {

  text-align: center;

  color: #c96891;

  font-size: 12px;

  font-weight: bold;

  margin-bottom: 5px;

  padding-bottom: 5px;

  border-bottom:
    1px dotted #e1a0b8;

}


/* =====================================================
   UPDATE
   ===================================================== */

.update {

  padding: 5px 2px;

  border-bottom:
    1px dotted #f0c5d5;

  font-size: 10px;

  line-height: 1.4;

  color: #a95b7d;

}


.update:last-child {

  border-bottom: none;

}


.update-date {

  display: block;

  font-size: 8px;

  color: #d18aa8;

  margin-bottom: 1px;

}


.update-text {

  font-weight: bold;

}


/* =====================================================
   MOBILE
   ===================================================== */

@media screen and (max-width: 600px) {

  #blog-notification {

    top: 8px !important;
    left: 13px !important;

  }

}

</style>


<!-- =====================================================
     NOTIFICATION
     ===================================================== -->

<div id="blog-notification">

  <div
    id="notification-button"
    onclick="toggleUpdates()"
  >

    <img
      id="notification-image"
      src="PASTE YOUR NOTIFICATION IMAGE LINK HERE"
      alt="Blog updates"
    >


    <div id="notification-number">
      !
    </div>


    <span class="notification-glitter glitter1">
      ✦
    </span>

    <span class="notification-glitter glitter2">
      ✧
    </span>

    <span class="notification-glitter glitter3">
      ✦
    </span>

    <span class="notification-glitter glitter4">
      ✧
    </span>

  </div>

</div>


<!-- =====================================================
     UPDATE WINDOW
     ===================================================== -->

<div id="update-window">

  <div id="updates-title">
    ♡ YOUR TITLE HERE ♡
  </div>


  <div class="update">

    <span class="update-date">
      YOUR DATE HERE
    </span>

    <span class="update-text">
      ❥ YOUR UPDATE HERE
    </span>

  </div>


  <div class="update">

    <span class="update-date">
      YOUR DATE HERE
    </span>

    <span class="update-text">
      ❥ YOUR UPDATE HERE
    </span>

  </div>


  <div class="update">

    <span class="update-date">
      YOUR DATE HERE
    </span>

    <span class="update-text">
      ❥ YOUR UPDATE HERE
    </span>

  </div>


</div>


<script>

function toggleUpdates() {

  var box =
    document.getElementById(
      "update-window"
    );

  var button =
    document.getElementById(
      "notification-button"
    );


  if (
    box.classList.contains(
      "open"
    )
  ) {

    box.classList.remove(
      "open"
    );

    return;

  }


  var rect =
    button.getBoundingClientRect();


  box.style.left =
    rect.left + "px";


  box.style.top =
    (rect.bottom + 3) + "px";


  box.classList.add(
    "open"
  );

}

</script>

♡ by Sugar Kissed Letters ♡

Please don't repost, redistribute, or claim this code as your own. ♡

3 comments:

dollisaAugust 30, 2026 at 4:07 AM
don't hesitate to ask questions ♡
NevaehSeptember 9, 2026 at 2:03 PM
i tried to uploaded your code for this and everything went smoothly except for the image. I have been getting this problem alot where whenever I use an image from pinterest and try to code into my blog, it never works for me. And I was just wondering if you have any tips that could help me fix this problem. xoxo

Pages

♡ Blog Update Notification ♡

♡ QUICK TUTORIAL ♡

3 comments:

Want to stay updatet whenever I post? leave your email below and I'll send you a little letter whenever there's a new blog post! ♡