Sugar kissed Letters

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

6 comments:

ThatWizardGirlSeptember 6, 2026 at 1:35 PM
As someone who just started their blog this week and literally had no idea how to start, you are such a queen for this. <3
zaynaSeptember 6, 2026 at 5:12 PM
i tried this but none of the info showed up :( do u have any clue what i did wrong?
elle | sugar² cloud ♡September 8, 2026 at 9:31 AM
Lisa, it's always so kind how you openly share your widgets and codes! ♡ TYSM

Pages

♡ Shows in Rotation ♡

♡ QUICK TUTORIAL ♡

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