August 31, 2026

q&a monday ♡

Dear dollies, ♡

It's finally Q&A day!! ⊹ ࣪ ˖ I got some really cute questions, so let's get into them ~

♡ “What about your gadgets?”

I've received quite a few questions about my gadgets, and I have good news for you!

Yesterday I finally added a new “blog codes” page where I've shared some of my most requested gadgets for you to use on your own blogs. <3

I'll probably keep adding more over time, so definitely have a look if you're interested in giving your blog a little makeover. ~

♡ from DivaMel: “How long did this blog take you?”

I actually started this blog exactly 4 weeks ago, on August 3rd! I wouldn't say I'm completely finished with it yet because there are still SO many things I want to add and change, but I officially debuted it on August 15th. So honestly... not that long!

Although, you also have to consider that I was sitting in front of my laptop working on this blog basically hourly and daily haha. I've spent a lot of time tweaking little details, learning HTML and CSS and figuring out exactly how I wanted everything to look. 𝜗𝜚

♡ read more ♡

♡ ONLINE GAME PAGE ♡

Want to add a little online game to your blog (like my playroom)? ♡ This creates a cute full-page game window that you can customize with any game that allows embedding.

♡ QUICK TUTORIAL ♡

01. find an online game ♡
Find an online game you'd like to add to your page. The game needs to allow itself to be embedded on other websites.

02. find the game's embed link ♡
Some game websites provide an Embed option or an iframe code. If they provide an iframe, look for the src link inside it.

It will look something like:

  https://example.com/your-game

03. replace the game link ♡
In the code below, find:

  src="PASTE YOUR GAME LINK HERE"

Replace the placeholder with the URL of your chosen game.

04. add it to a page ♡
Create a new Blogger Page, switch to HTML view, and paste the entire code there.

05. that's it! ♡
Save and publish your page! Your game should appear inside the cute little game window. 🎀

♡ CODE ♡

<style>

#online-game-page {
width:100%;
max-width:950px;
margin:0 auto;
text-align:center;
font-family:"Cardo", serif;
color:#c47799;
}

#game-page-title {
font-family:"Cardo", serif;
font-size:25px;
font-weight:bold;
color:#d875a2;
margin:5px 0 3px;
letter-spacing:.5px;
}

#game-page-subtitle {
font-size:12px;
color:#c991aa;
margin-bottom:18px;
}

.game-page-line {
width:70%;
max-width:600px;
margin:0 auto 20px;
border-top:1px solid #f2c5d8;
}

#game-window {
width:100%;
max-width:900px;
height:720px;
margin:0 auto;
background:#fff8fc;
border:2px solid #f2bfd5;
border-radius:18px;
padding:10px;
box-sizing:border-box;
box-shadow:
0 0 10px #f8dce9,
inset 0 0 12px #fff0f6;
}

#game-window iframe {
width:100%;
height:100%;
border:none;
border-radius:11px;
display:block;
}

#game-page-footer {
margin-top:15px;
font-size:11px;
color:#cf91aa;
}

.game-page-sparkle {
color:#e58db3;
margin:0 6px;
}

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

#game-page-title {
font-size:21px;
}

#game-window {
height:600px;
padding:6px;
}

}

</style>

<div id="online-game-page">

  <div id="game-page-title">
    ♡ my little playroom ♡
  </div>

  <div id="game-page-subtitle">

<span class="game-page-sparkle">✦</span>

play & have fun!

<span class="game-page-sparkle">✦</span>

  </div>

  <div class="game-page-line"></div>

  <div id="game-window">

<iframe
  src="PASTE YOUR GAME LINK HERE"
  title="Online Game"
  loading="lazy">
</iframe>

  </div>

  <div id="game-page-footer">
    ♡ a little place to play ♡
  </div>

</div>

♡ click the code box to select the code ♡

✧ make sure the game website allows iframe embedding ✧

♡ Poll Of The Month ♡

A cute little poll you can add to your blog! ♡ Let your visitors vote on a question of your choice.

♡ QUICK TUTORIAL ♡

01. create your poll ♡
Go to EasyPolls and create your own poll with your question and answer choices.

02. get your poll code ♡
After creating your poll, EasyPolls will give you an embed code. You will need the poll ID from this code.

03. add your poll ID ♡
In the code below, find:

  data-id="YOUR-POLL-ID-HERE"

Replace YOUR-POLL-ID-HERE with the ID of your own poll.

You can also change the data-width and data-height if you'd like your poll to be smaller or larger.

04. that's it! ♡
Paste the finished code into an HTML/JavaScript gadget on your Blogger layout and your poll should appear on your blog! 🎀

♡ CODE ♡

<script

type="text/javascript"
src="https://vote.easypolls.net/em.js"
data-id="YOUR-POLL-ID-HERE"
data-width="300px"
data-height="300px"> </script>

♡ click the code box to select the code ♡

✧ please keep the EasyPolls backlink if required by the service ✧

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

♡ Mouse Skin + Star Trail ♡

A little something for anyone who has asked about my mouse cursor and the sparkles that follow it! ♡

The cursor skin itself isn't mine — I got it from Cursors-4U, where you can choose from lots of different cute cursor designs.

The little pink star/glitter trail, however, is the code I use on my blog. 🎀

✧ move your mouse around to see the trail ✧

♡ QUICK TUTORIAL ♡

01. choose your mouse skin ♡

Go to Cursors-4U and browse their cursor collection until you find one you like.

Once you've chosen your cursor, follow the instructions provided on the cursor's page to add it to your Blogger blog.

02. add the star trail ♡

Copy the code below and paste it into:

Blogger → Theme → Edit HTML

Place it near the top of your theme, inside the <head> section, preferably just before </head>.

<script>

const glitterColors = [
  "#ffd1ec",
  "#ffb6d9",
  "#ffc8e8",
  "#ffe4f4",
  "#f7b2d9"
];

document.addEventListener("mousemove", function(e) {

  const star =
    document.createElement("div");

  star.style.position = "fixed";

  star.style.left =
    e.clientX + "px";

  star.style.top =
    e.clientY + "px";

  star.style.width = "6px";

  star.style.height = "6px";

  star.style.borderRadius = "50%";

  star.style.pointerEvents = "none";

  star.style.zIndex = "999999";

  star.style.background =
    glitterColors[
      Math.floor(
        Math.random() *
        glitterColors.length
      )
    ];

  star.style.boxShadow =
    "0 0 8px currentColor";

  star.style.color =
    star.style.background;

  document.body.appendChild(star);

  const x =
    (Math.random() - 0.5) * 20;

  const y =
    -25 - Math.random() * 20;

  star.animate(
    [
      {
        transform:
          "translate(0,0) scale(1)",
        opacity: 1
      },

      {
        transform:
          `translate(${x}px,${y}px) scale(0)`,
        opacity: 0
      }
    ],
    {
      duration: 700,
      easing: "ease-out"
    }
  );

  setTimeout(
    () => star.remove(),
    700
  );

});

</script>

♡ want different colors? ♡

You can change the colors of the stars by editing the hex codes inside:


    const glitterColors = [ ... ];

Replace the hex codes with any colors you'd like!

♡ star trail by Sugar Kissed Letters ♡

please don't repost, redistribute, or claim the star trail code as your own. ♡

♡ Fun Fact Gadget ♡

A cute little gadget that shows a different fun fact every time you click the image! ♡
You can use any character, doll, plushie or picture you like. 🎀

♡ preview ♡

<div id="fun-fact-widget">

  <div id="fun-fact"></div>

  <img
    id="fun-fact-image"
    src="PASTE YOUR IMAGE LINK HERE"
    alt="Fun fact"
    onclick="newFunFact()"
  >

  <div class="fun-fact-hint">
    ♡ click me ♡
  </div>

</div>


<style>

#fun-fact-widget {

  width: 250px;

  margin-left: -15px;
  margin-right: auto;

  text-align: center;

  font-family: "Cardo", serif;

}


/* ================================
   FACT SPEECH BUBBLE
   ================================ */

#fun-fact {

  display: none;

  position: relative;

  background: #fff0f7;

  border: 1.5px solid #f3bfd5;

  border-radius: 15px;

  padding: 10px 13px;

  margin: 0 auto 12px auto;

  color: #c783a3;

  font-family: "Cardo", serif;

  font-size: 11px;

  line-height: 1.45;

  width: 190px;

  box-sizing: border-box;

}


/* SPEECH BUBBLE TAIL */

#fun-fact:after {

  content: "";

  position: absolute;

  bottom: -8px;

  left: 50%;

  transform: translateX(-50%);

  border-left: 7px solid transparent;

  border-right: 7px solid transparent;

  border-top: 8px solid #f3bfd5;

}


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

#fun-fact-image {

  width: 150px;

  height: auto;

  cursor: pointer;

  display: block;

  margin: 0 auto;

  transition:
    transform 0.2s ease;

}


#fun-fact-image:hover {

  transform:
    scale(1.04);

}


/* ================================
   CLICK TEXT
   ================================ */

.fun-fact-hint {

  color: #d889aa;

  font-family: "Cardo", serif;

  font-weight: bold;

  font-size: 11px;

  margin-top: 3px;

}

</style>


<script>

var funFacts = [

  "Your own fun fact ♡",

  "Your own fun fact ♡",

  "Your own fun fact ♡",

  "Your own fun fact ♡",

  "Your own fun fact ♡",

  "Your own fun fact ♡",

  "Your own fun fact ♡",

  "Your own fun fact ♡",

  "Your own fun fact ♡",

  "Your own fun fact ♡"

];


var currentFunFact = 0;


function newFunFact() {

  var bubble =
    document.getElementById(
      "fun-fact"
    );


  bubble.innerHTML =
    funFacts[currentFunFact];


  bubble.style.display =
    "block";


  currentFunFact++;


  if (
    currentFunFact >=
    funFacts.length
  ) {

    currentFunFact = 0;

  }

}

</script>

♡ by Sugar Kissed Letters ♡

♡ QUICK TUTORIAL ♡

01. choose your image ♡

Find:
src="PASTE YOUR IMAGE LINK HERE"

Replace it with the direct image link of whatever you want to use!

This can be a character, plushie, photo, PNG, GIF or anything else you like. 🎀

02. add your own fun facts ♡

Find:
var funFacts = [

Replace "Your own fun fact ♡" with your own facts.

Keep each fact inside quotation marks and separate each one with a comma.

You can also use:
<br>
to create a line break inside a fact.

03. that's it! ♡

Save the code and add it to your blog. Clicking your image will show a different fun fact each time! 🎀

♡ have fun decorating your blog! ♡

♡ Q&A Gadget ♡

A cute little Q&A for your blog! ♡
Click the icon to open your question form in a little popup.

♡ preview ♡

<style>

/* ================================
   Q&A GADGET
   ================================ */

#skl-qa-jar-wrap {
  width: 160px;
  margin: 0 auto;
  text-align: center;
  font-family: "Cardo", serif;
}

#skl-qa-title {
  font-family: "Cardo", serif;
  font-size: 14px;
  font-weight: bold;
  color: #d878a4;
  margin-bottom: 2px;
}

#skl-qa-intro {
  font-size: 9px;
  line-height: 1.35;
  color: #c98aa5;
  margin-bottom: 2px;
}

#skl-qa-image {
  width: 105px;
  height: auto;
  display: block;
  margin: -2px auto -3px;
  cursor: pointer;
  transition: transform .2s ease;
}

#skl-qa-image:hover {
  transform: scale(1.06) rotate(-2deg);
}

#skl-qa-click {
  font-family: "Cardo", serif;
  font-weight: bold;
  font-size: 10px;
  color: #d878a4;

  animation: qaSparkle 1.6s ease-in-out infinite;
}

@keyframes qaSparkle {

  0%, 100% {
    opacity: 1;
    text-shadow:
      0 0 3px #fff,
      0 0 5px #f7b8d3;
  }

  50% {
    opacity: .6;
    text-shadow:
      0 0 7px #fff,
      0 0 12px #f5a9ce;
  }

}


/* ================================
   POPUP
   ================================ */

#skl-qa-popup-overlay {

  position: fixed;

  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;

  background: rgba(255, 225, 239, .55);

  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  display: flex;

  align-items: center;
  justify-content: center;

  z-index: 2147483647;

}


/* ================================
   FORM WINDOW
   ================================ */

#skl-qa-popup-window {

  position: relative;

  width: 430px;
  height: 620px;

  max-width: 90vw;
  max-height: 85vh;

  box-sizing: border-box;

  padding: 10px;

  background: #fff8fc;

  border: 2px solid #f2bfd5;

  border-radius: 16px;

  box-shadow:
    0 5px 30px
    rgba(200, 100, 145, .35);

  animation:
    sklQAPopup .25s ease-out;

}


@keyframes sklQAPopup {

  from {
    opacity: 0;
    transform: scale(.94);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }

}


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

#skl-qa-popup-title {

  height: 28px;

  line-height: 25px;

  text-align: center;

  color: #d878a4;

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

  font-size: 15px;

  font-weight: bold;

}


/* ================================
   CLOSE BUTTON
   ================================ */

#skl-qa-popup-close {

  position: absolute;

  top: 7px;
  right: 10px;

  color: #d878a4;

  font-family: Arial, sans-serif;

  font-size: 19px;

  font-weight: bold;

  line-height: 18px;

  cursor: pointer;

}

#skl-qa-popup-close:hover {

  color: #b9537f;

  transform: scale(1.1);

}


/* ================================
   GOOGLE FORM
   ================================ */

#skl-qa-popup-frame {

  display: block;

  width: 100%;

  height: calc(100% - 30px);

  border: none;

  border-radius: 10px;

  background: white;

}


/* MOBILE */

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

  #skl-qa-popup-window {

    width: 94vw;

    height: 88vh;

  }

}

</style>


<!-- ================================
     ICON
     ================================ -->

<div id="skl-qa-jar-wrap">

  <div id="skl-qa-title">
    ♡ Q&A ♡
  </div>

  <div id="skl-qa-intro">
    have a question for me?<br />
    toss it in! ♡
  </div>

  <img
    id="skl-qa-image"
    src="PASTE YOUR Q&A ICON IMAGE LINK HERE"
    alt="Q&A Icon"
    onclick="sklOpenQA()"
  >

  <div id="skl-qa-click">
    ✧ click me ✧
  </div>

</div>


<script>

function sklOpenQA() {

  /* Create popup directly on the BODY */

  var overlay =
    document.createElement("div");

  overlay.id =
    "skl-qa-popup-overlay";


  overlay.innerHTML =

    '<div id="skl-qa-popup-window">' +

      '<div id="skl-qa-popup-title">' +
        '♡ ask me anything ♡' +
      '</div>' +

      '<div id="skl-qa-popup-close">' +
        '×' +
      '</div>' +

      '<iframe ' +

        'id="skl-qa-popup-frame" ' +

        'src="PASTE YOUR GOOGLE FORM EMBED LINK HERE" ' +

        'loading="lazy">' +

      '</iframe>' +

    '</div>';


  document.body.appendChild(overlay);


  /* Close button */

  document.getElementById(
    "skl-qa-popup-close"
  ).onclick = function() {

    overlay.remove();

  };


  /* Click outside the form */

  overlay.onclick = function(event) {

    if (
      event.target === overlay
    ) {

      overlay.remove();

    }

  };


  /* ESC key */

  document.onkeydown =
    function(event) {

      if (
        event.key === "Escape"
      ) {

        if (
          document.getElementById(
            "skl-qa-popup-overlay"
          )
        ) {

          overlay.remove();

        }

      }

    };

}

</script>

♡ by Sugar Kissed Letters ♡

♡ QUICK TUTORIAL ♡

01. choose your Q&A image ♡

Find:
src="PASTE YOUR Q&A ICON IMAGE LINK HERE"

Replace it with the direct image/GIF link of your own Q&A icon.

02. add your Google Form ♡

Create your own Google Form and make sure people can submit questions.

Then find:
src="PASTE YOUR GOOGLE FORM EMBED LINK HERE"

Replace it with your Google Form's embed link.

In Google Forms, click Send → <> Embed HTML and use the URL from the iframe.

03. that's it! ♡

Save the code and add it to your blog. Clicking your image will open your Q&A form inside a cute popup window. 🎀

♡ have fun decorating your blog! ♡

♡ Music Player ♡

A cute little clickable music player for your blog! ♡
Click the iPod (or your chosen icon) to play or pause your song. 🎀

♡ preview ♡

<style>


/* ==========================================
   IPOD / MUSIC PLAYER WIDGET
   ========================================== */

#music-widget {

  position: fixed;

  right: 45px;
  bottom: 20px;

  z-index: 99999;

  text-align: center;

}


/* MUSIC PLAYER IMAGE */

#music-widget img {

  display: block;

  margin: 0 auto;

  transition:
    transform 0.2s ease;

}


#music-widget img:hover {

  transform:
    scale(1.08);

}


/* CLICK TEXT */

.music-click {

  font-family:
    "Comic Sans MS",
    cursive;

  font-size: 12px;

  color: #e88ab3;

  margin-top: 2px;

}


/* HIDDEN YOUTUBE PLAYER */

#music-player-container {

  position: absolute;

  width: 1px;
  height: 1px;

  overflow: hidden;

  opacity: 0;

  pointer-events: none;

}

</style>


<div id="music-widget">

  <!--
  ♡ MUSIC PLAYER IMAGE ♡

  Replace the image link below with
  the GIF/PNG you want to use.

  -->

  <img
    src="PASTE YOUR MUSIC PLAYER IMAGE LINK HERE"
    width="110"
    height="110"
    border="0"
    style="cursor:pointer;"
    onclick="toggleMusic()"
    alt="Music player"
  >


  <div class="music-click">
    ♡ click me ♡
  </div>


  <div id="music-player-container">

    <!--
    ♡ SONG LINK ♡

    Replace the link below with the
    YouTube EMBED link of your song.

    IMPORTANT:
    Keep the ?enablejsapi=1&origin=... part
    at the end of the link.

    Replace YOUR-BLOG-URL-HERE with
    your own blog URL.

    Example:

    https://www.youtube.com/embed/XXXXXXXXXXX?enablejsapi=1&origin=YOUR-BLOG-URL-HERE

    -->

    <iframe
      id="music-player"
      src="PASTE YOUR YOUTUBE EMBED LINK HERE"
      frameborder="0"
      allow="autoplay"
      width="1"
      height="1"
    ></iframe>

  </div>

</div>


<script>

var musicPlaying = false;


/* ==========================================
   PLAY / PAUSE MUSIC
   ========================================== */

function toggleMusic() {

  var player =
    document.getElementById(
      "music-player"
    );


  if (musicPlaying) {

    player.contentWindow.postMessage(

      '{"event":"command","func":"pauseVideo","args":""}',

      "*"

    );

    musicPlaying = false;


  } else {

    player.contentWindow.postMessage(

      '{"event":"command","func":"playVideo","args":""}',

      "*"

    );

    musicPlaying = true;

  }

}

</script>

♡ by Sugar Kissed Letters ♡

♡ QUICK TUTORIAL ♡

01. choose your music player ♡

Find this part of the code:
src="PASTE YOUR MUSIC PLAYER IMAGE LINK HERE"

Replace it with the direct link to your desired GIF or PNG.

02. choose your song ♡

Find:
src="PASTE YOUR YOUTUBE EMBED LINK HERE"

Go to the YouTube video you want to use, click Share → Embed, and copy the video ID from the YouTube embed URL.

Then use it in this format:
https://www.youtube.com/embed/XXXXXXXXXXX?enablejsapi=1&origin=YOUR-BLOG-URL-HERE

Replace YOUR-BLOG-URL-HERE with the URL of your own blog. ♡

Make sure you keep ?enablejsapi=1&origin=YOUR-BLOG-URL-HERE at the end of the link.

03. add the widget to your blog ♡

Go to Blogger → Layout → Add a Gadget → HTML/JavaScript and paste the entire music player code into the content box.

You can place the gadget in whichever section you'd like. I have mine in “footer-2-2”. 🎀

04. that's it! ♡

Save your gadget and click your music player to play or pause your chosen song. 🎀

♡ have fun decorating your blog! ♡

August 25, 2026

a little update ♡

Dear dollies, ♡

Just a little update because I have a few things I wanted to share with you! ~

First of all, I see your Q&As! ♡ I haven't forgotten about them, I just want to collect a few more questions before answering them. Once there are enough, I'll make a little Q&A post and I'm thinking of posting the answers every Monday - as long as there are enough questions, of course! So if you've been thinking about sending me one, this is your sign. 🎀

I also haven't forgotten about all the request for my HTMLs & gadgets! I'll be posting those sometime this weekend for anyone who wants to use them or have a little look behind the scenes of the blog. ♡

And lastly... I just want to say thank you so, so much to all my dolls who have been following my blog. I genuinely can't believe we're already at 47 dolls!!! <33 It makes me so happy to see people actually enjoying this little corner of the internet that I've been putting so much love into.

I already have SO many ideas for future posts, and I can't wait for the weekend to have some proper time for the blog again. I definitely want to decorate it some more, add a few new things and keep making it feel more and more like my own little space. ~

Thank you for being here, dollies. ♡

xoxo,
Lisa

August 24, 2026

moments from last week ♡

Dear dollies, ♡

It's been a little while since my last post! If I didn't restrain myself, there would probably be a new post every single day - and knowing me, I'd run out of things to talk about within a week and burn myself out. So please bear with me while I'm still figuring out the right rhythm for this little blog. ~

For now, I thought I'd share a few little moments from my last week, specifically August 20th–23rd.

♡ thursday

My MacBook finally arrived!!! And oh my god, it is so so cute. Of course, I couldn't just leave it alone, so I bedazzled the case on the very same day.

I'm not completely satisfied with how it turned out, though, so I think I'll probably redo it at some point. But the heel??? So cunty. I absolutely love it haha.

Now I just have to figure out how to actually use a MacBook because currently I feel like a grandma trying to understand technology TT It's so different from my Acer laptop and I keep instinctively trying to do things the way I used to. I'm sure I'll get used to it eventually, though!

♡ read more ♡

August 18, 2026

my ideal morning routine ♡

Dear dollies, ♡

I’m definitely someone who needs a little structure in the morning. If I wake up and don't have some sort of routine to follow, I can very easily end up lazing around for the rest of the day ><

Of course, my mornings don't always look like this. But on the days when I feel especially productive and want to start my day on the right foot, this is pretty much my ideal morning routine.

♡ 2000s music & stretching

The first thing I do is put on my 2000s morning routine playlist [♡ ♪ 2000s morning routine ♡]. I need some good music playing while I get ready for the day, and this particular playlist puts me straight into that main-character-in-a-2000s-romcom mood.

I usually start with a little 5–10 minute stretch. Nothing too intense - just enough to wake my body up after sleeping and get myself moving.

After that, I brush my teeth and make my way to the kitchen, because breakfast is probably my favourite part of the morning. ♡

♡ read more ♡

August 14, 2026

my favorite body mists ♡

Dear dollies, ♡

There’s something about perfume and body mists that I’ve always found so lovely. A scent can become connected to a season, a memory, or even a certain version of yourself. I especially love having different fragrances to match whatever mood I’m in.

Today I wanted to share some of the body mists that have become little favorites of mine. From warm vanilla and creamy scents to strawberry candy and cotton candy sweetness, these are the ones I keep reaching for again and again.

♡ Victoria's Secret — Vanilla Lace

9/10

Scent notes: Café Latte, Vanilla Orchid, Lily of the Valley, Hydrangea, Vanilla & Sandalwood.

The perfect autumn scent. ♡ Vanilla Lace is a creamy, warm vanilla without feeling too heavy. The little coffee-like creaminess in the opening makes it feel especially cozy, while the vanilla and sandalwood give it that warm, comforting dry down.

I could genuinely never get sick of this one. It's the kind of scent I want to wear when it's cold outside, I'm wearing a cute sweater and everything just feels a little more cozy. If autumn had a signature scent, this would be it for me. ~

♡ read more ♡

August 14, 2026

a little beginning ♡

Dear dollies, I’m so excited to finally be writing my first post on this blog. ♡

I've been wanting to start a blog for a while now, and it's honestly so exciting to finally have my own little corner of the internet. I don't really know exactly where this blogging journey is going to take me yet, but I think that's part of the fun ♡ I just want this to be a place where I can post little pieces of my life, things I'm loving, random thoughts, pretty pictures, and basically whatever I feel like sharing.

One thing I really didn't expect when I started working on this blog was how much I would LOVE the process of creating it. I've been having so much fun learning HTML and CSS and figuring out how to make everything look exactly how I imagine it in my head. I could genuinely sit in front of my laptop for HOURS changing tiny things and somehow not get tired of it. Like... figuring out the aesthetic I was heading for, how to add cute interactive widgets, watching tutorials, spending time on pinterest and glitter graphics searching for the most fitting gifs and pictures ... and suddenly five hours have passed :9

But honestly, I'm just so happy to have found a hobby that I can actually indulge in without feeling like I have to check my phone every two seconds. There's something really nice about sitting down with my laptop and just making something. No endless scrolling, no checking notifications, no accidentally spending an hour on TikTok. Just me, my little blog, and whatever I'm currently obsessed with.

And speaking of laptops...

♡ read more ♡