Sugar kissed Letters

Trick or Kiss

Dear dollies, ♡

Halloween is only about two weeks away and I’m already fully in the mood for spooky season. ~

Although, if you know me even a little bit, you probably already know that my version of “spooky” is a lot more pink, cute and sparkly than actually scary.

♡ last halloween costumes

Last year I went as a love nurse, while my boyfriend dressed up as a bloody doctor. And the year before that I was some kind of stitched up doll (one of my fav looks)

♡ read more ♡

Last update about my blog codes ♡

Dear dollies, ♡

I really hoped my last update about blog codes would be enough, but unfortunately I feel like I need to address this one more time.

I've decided that I won't be sharing any more of my blog codes from now on.

When I first started posting some of them, I genuinely did it because I wanted to help other bloggers, give people a little starting point and maybe inspire them to create something of their own.

But lately, I've noticed that more and more of my gadgets are simply being copied - including the ones I never planned on sharing in the first place because they were original ideas and took me a lot of time to build.

And honestly, that has taken a lot of the fun out of it for me.

One request in particular really irritated me because someone actually asked me for the code to Sugary Time, my dating sim.

I don't really know how else to say this, but I thought it was quite obvious that this is something I would never share.

Sugary Time isn't a small decorative gadget or a simple little widget. It's my own game that I built from scratch, and I've spent an enormous amount of time designing, coding and expanding it. It's one of the most personal projects on this blog and something I'm genuinely very proud of.

So being asked to hand over the entire code for it honestly felt a little... strange.

I know that not everyone asking for a code has bad intentions, and I also know that most of you have always been respectful and sweet about it. So I really am sorry if this decision disappoints some of you.

But at this point, I simply don't want to keep putting energy into deciding what I should share, what I shouldn't share, whether something will be copied exactly, or answering repeated requests for things I never intended to release.

I'd much rather put that time back into actually working on my blog, creating new things and enjoying the process again.

The blog codes that are already available will stay up.

♡ read more ♡

03.10.2026

Sugary Time - my very own dating sim ♡

Dear dollies, ♡

I think it's finally time I properly introduce one of my favorite "little" things I've made for this blog:

Sugary Time

I don’t even remember the exact moment when it stopped being “just a cute gadget” and started becoming an actual game, but somewhere along the way it completely took on a life of its own.

And I love it so much. Like genuinely. This is my baby!!

I originally wanted to make something playful and interactive for the blog, something that felt a little like those old internet games but still original. Something very 2000s, very silly, very self-indulgent.

And now Sugary Time has actual progression, events, an arcade, a playhouse, a trading card game...

I fear I may have gotten slightly carried away. ♡

♡ the actual dating sim

At its core, Sugary Time is still exactly what I wanted it to be from the beginning:

a tiny dating sim living inside my blog.

You can choose between Nanami, Toji, Sanji, Zoro & Arthur and slowly build your relationship with whoever you pick.

♡ read more ♡

September 19, 2026

almost 200 dolls?! ♡ I have something for you~

Dear dollies, ♡

Okay, I genuinely don't know how this happened, but I feel like I blinked and suddenly we're almost at 200 dolls?! What??

When I started this blog, I really didn't expect much from it. I was honestly just bored and wanted to make something that felt very me - pink, girly, nostalgic, dolly and just a space where I could do whatever I wanted.

I think part of the reason I love blogging so much is that at least on the internet there's a space where I can have my own little pink Barbie world and can actually create the aesthetic I have in my head.

So seeing that almost 200 people have found my blog and actually enjoy being here after only about a month is kind of crazy to me. I'm genuinely so grateful. <333

And because I thought it would be fun to do something a little more interactive with all of you, I have a few ideas:

♡ styling my followers

I've been wanting to do a “styling my followers” post for a while! ୨୧

If you'd like to participate, just send me something through my Q&A form and tell me what kind of aesthetic you like. You can describe it yourself, send me your Pinterest, link your blog, or honestly give me anything I can use as inspiration.

Just add “styling” somewhere in your message so I know you'd like to be included.

Then I'll put together a little outfit / aesthetic / styling based on what you've given me. I'm excited to see what aesthetics my dolls have!

♡ read more ♡

September 09, 2026

a dolly 2000's autumn guide ♡

Dear dollies, ♡

It's officially time to welcome my favorite season. ~

There's something about autumn that feels especially magical when you romanticize it a little. The cooler mornings, knitted sweaters, warm drinks, golden leaves, cozy cafés, baking something sweet... it really is the perfect season for living out your own little 2000s romcom.

So I put together my little dolly 2000's autumn guide with all the things that make autumn feel extra cozy, nostalgic and feminine to me. ♡

♡ the big three

If you want to create the perfect autumn atmosphere, I truly believe you only need three things:

scented candles, coffee & lip gloss.

That's it. That's the formula. ୨୧

Light a candle, make yourself a warm drink, put on some music and add a little gloss - instantly gets you in the perfect mood.

♡ read more ♡

♡ Shows in Rotation ♡

A cute little gadget to display the shows you're currently watching! 🎀 Add your favorite shows, a poster, and a little note about what you're watching. The gadget also lets visitors switch between your shows and automatically rotates through them. ♡

♡ shows in rotation ♡

your show poster ♡

Your Show Title

your little note about the show ♡

♡ 1 / 3 ♡

✧ preview ✧

♡ QUICK TUTORIAL ♡

01. add the gadget to your blog ♡

Copy the entire code below and paste it into a Blogger HTML/JavaScript gadget.

Go to:

Blogger → Layout → Add a Gadget → HTML/JavaScript

Paste the code into the content box, save it and place the gadget wherever you'd like it to appear. 🎀

02. add your show information ♡

Inside the code, find:

title: "PASTE YOUR SHOW TITLE HERE"

Replace it with the name of your show.

Then find:

image: "PASTE YOUR POSTER IMAGE URL HERE"

Replace it with the direct URL of your poster image.

Finally, find:

note: "PASTE YOUR NOTE HERE"

This is the little text that will appear underneath the show title. ♡

03. add more shows ♡

The code already contains three example show sections.

Replace the information in each section with your own shows.

Want to add another one?

Simply copy one of the existing sections and paste it underneath.

Make sure there is a comma between each show section, like this:

}, { title: "PASTE YOUR SHOW TITLE HERE", image: "PASTE YOUR POSTER IMAGE URL HERE", note: "PASTE YOUR NOTE HERE" }

04. get your poster image URL ♡

You need a direct image URL for your poster.

You can upload your image to an image hosting website and copy the direct image link.

Then paste it here:

image: "PASTE YOUR POSTER IMAGE URL HERE"

Make sure you're using the image URL and not the URL of the webpage containing the image. 🎀

05. change the rotation speed ♡

The gadget automatically changes to the next show every 8 seconds.

To change this, find:

setInterval(nextShow, 8000);

The number is in milliseconds.

For example:

5000 = 5 seconds 8000 = 8 seconds 10000 = 10 seconds

06. that's it! ♡

Click the hearts to move backwards or forwards through your shows.

The gadget will also automatically rotate through them for you. ♡

<div id="shows-rotation">

  <div class="rotation-title">♡ shows in rotation ♡</div>

  <div class="show-poster-wrap">
    <img id="show-poster" src="" alt="" />
  </div>

  <div id="show-title"></div>

  <div id="show-note"></div>

  <div class="rotation-buttons">
    <button onclick="previousShow()">♡</button>
    <span id="show-number"></span>
    <button onclick="nextShow()">♡</button>
  </div>

</div>

<style>
#shows-rotation {
  width: 220px;
  margin: 0 auto;
  padding: 12px;
  text-align: center;
  font-family: "Cardo", cursive;
  border: 2px solid #f6c4da;
  border-radius: 8px;
  background: rgba(255, 245, 250, 0.7);
  box-sizing: border-box;
}

.rotation-title {
  font-size: 15px;
  color: #d878a4;
  margin-bottom: 10px;
}

.show-poster-wrap {
  width: 180px;
  height: 250px;
  margin: 0 auto;
  overflow: hidden;
}

.show-poster-wrap img {
  width: 100%;
  height: 105%;
  object-fit: cover;
  object-position: center;
  display: block;
}

#show-title {
  color: #d878a4;
  font-weight: bold;
  font-size: 14px;
  margin-top: 8px;
}

#show-note {
  color: #9d7185;
  font-size: 11px;
  line-height: 1.4;
  margin: 5px 5px 8px;
}

.rotation-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.rotation-buttons button {
  background: none;
  border: none;
  color: #d878a4;
  cursor: pointer;
  font-size: 15px;
  padding: 0;
}

.rotation-buttons button:hover {
  color: #f29bc3;
}

#show-number {
  color: #c58aa5;
  font-size: 10px;
}
</style>

<script>
var shows = [

  {
    title: "PASTE YOUR SHOW TITLE HERE",
    image: "PASTE YOUR POSTER IMAGE URL HERE",
    note: "PASTE YOUR NOTE HERE"
  },

  {
    title: "PASTE YOUR SHOW TITLE HERE",
    image: "PASTE YOUR POSTER IMAGE URL HERE",
    note: "PASTE YOUR NOTE HERE"
  },

  {
    title: "PASTE YOUR SHOW TITLE HERE",
    image: "PASTE YOUR POSTER IMAGE URL HERE",
    note: "PASTE YOUR NOTE HERE"
  }

];

var currentShow = 0;

function displayShow() {
  document.getElementById("show-poster").src = shows[currentShow].image;
  document.getElementById("show-poster").alt = shows[currentShow].title;
  document.getElementById("show-title").innerHTML = shows[currentShow].title;
  document.getElementById("show-note").innerHTML = shows[currentShow].note;
  document.getElementById("show-number").innerHTML =
    (currentShow + 1) + " / " + shows.length;
}

function nextShow() {
  currentShow = (currentShow + 1) % shows.length;
  displayShow();
}

function previousShow() {
  currentShow = (currentShow - 1 + shows.length) % shows.length;
  displayShow();
}

/* automatically change every 8 seconds */
setInterval(nextShow, 8000);

displayShow();
</script>

♡ by Sugar Kissed Letters ♡

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

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