My Gadget Library!!!

Welcome to my gadget library! Here divaas you will find codes for different gadgets to add to your own blog. Read the instructions for each gadget, copy the code, and customise the templates where indicated. I’m no expert in coding at allll, but I’m more than happy to share some of the codes I used on my blog, the website I use to turn images into URLs is https://imgbb.com/ I always get the pics I use from Pinterest cos it has cute stuff!!! This post has four codes , I’ll do the rest of the requested codes in the next post so this one isn’t too long lol. I’ve started with the most requested <3

01. Water My Plant

Add a little interactive plant to your blog. Visitors can water it and watch it change as it grows. This is the plant gadget code, so it has been kept as supplied.

To install it, copy the code below and paste it into an HTML/JavaScript gadget in Blogger Layout.

Plant gadget code

<div id="plantGame" style="text-align:center; font-family:Georgia,serif; padding:18px; background:linear-gradient(135deg,#fff5fb,#fff); border-radius:20px; border:1px solid #f3c8df; position:relative; overflow:hidden;">

  <div style="font-size:22px; color:#c96d9d; margin-bottom:8px;">
    ୨୧ Water This Plant 
  </div>

  <div id="plant" style="font-size:65px; height:85px; transition:0.4s;">
    🌱
  </div>

  <div id="plantMessage" style="font-size:14px; color:#9b6680; margin:8px 0 14px;">
    My little plant is thirsty :(
  </div>

  <button onclick="waterPlant()" style="
    background:#f5a9cb;
    color:white;
    border:none;
    border-radius:25px;
    padding:10px 20px;
    font-size:15px;
    font-family:Georgia,serif;
    cursor:pointer;
    box-shadow:0 4px 10px rgba(220,130,170,0.25);
  ">
     Water My Plant
  </button>

  <div id="sparkles"></div>

</div>

<script>
var waterCount = 0;

function waterPlant() {
  waterCount++;

  var plant = document.getElementById("plant");
  var message = document.getElementById("plantMessage");

  if (waterCount == 1) {
    plant.innerHTML = "🌱";
    message.innerHTML = "A little drink! ";
  }

  else if (waterCount == 2) {
    plant.innerHTML = "🌿";
    message.innerHTML = "She's growing! ";
  }

  else if (waterCount == 3) {
    plant.innerHTML = "🪴";
    message.innerHTML = "Look at her grow! ";
  }

  else if (waterCount == 4) {
    plant.innerHTML = "🌷";
    message.innerHTML = "She bloomed! ";
  }

  else {
    plant.innerHTML = "🪴";
    message.innerHTML = "Your plant is thriving! ";
  }

  createSparkles();
}

function createSparkles() {
  var container = document.getElementById("sparkles");

  for (var i = 0; i < 6; i++) {
    var sparkle = document.createElement("span");

    sparkle.innerHTML = "✦";
    sparkle.style.position = "absolute";
    sparkle.style.left = (20 + Math.random() * 60) + "%";
    sparkle.style.top = (35 + Math.random() * 25) + "%";
    sparkle.style.color = "#f2a6c7";
    sparkle.style.fontSize = (10 + Math.random() * 12) + "px";
    sparkle.style.pointerEvents = "none";
    sparkle.style.animation = "sparkleFloat 1s ease-out forwards";

    container.appendChild(sparkle);

    setTimeout(function() {
      if (container.firstChild) {
        container.removeChild(container.firstChild);
      }
    }, 1000);
  }
}
</script>

<style>
@keyframes sparkleFloat {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-35px) scale(1.5);
  }
}
</style>

02. Custom Pink TV

This gadget lets you display a picture or GIF inside a cute retro TV. You can use a favourite character, a film scene, an aesthetic GIF, or any image you like.

How to customise the TV

Find a picture or GIF you want to display.
Upload it to an image-hosting website that provides a direct image URL.
Replace YOUR_IMAGE_URL_HERE in the code with your image URL.
Replace YOUR_TV_CAPTION_HERE with the caption you want to appear underneath the TV.
Copy the complete code into an HTML/JavaScript gadget in Blogger Layout.

You can find GIFs or pics on Pinterest. Make sure the image URL opens the image itself. A normal Pinterest page link may not work as an image URL.

Custom TV template

<div class="my-pink-tv">

  <div class="my-tv">

    <div class="my-tv-screen">
      <img src="YOUR_IMAGE_URL_HERE" alt="My TV picture">
      <div class="my-tv-glow"></div>
    </div>

    <div class="my-tv-controls">
      <div class="my-tv-knob"></div>
      <div class="my-tv-knob small"></div>
    </div>

    <div class="my-tv-speaker">
      <span>••••</span>
      <span>••••</span>
      <span>••••</span>
    </div>

  </div>

  <div class="my-tv-caption">YOUR_TV_CAPTION_HERE</div>

</div>

<style>
.my-pink-tv {
  width: 230px;
  margin: 20px auto;
  text-align: center;
  font-family: Georgia, serif;
}

.my-tv {
  position: relative;
  width: 220px;
  height: 175px;
  margin: auto;
  padding: 13px;
  box-sizing: border-box;
  background: linear-gradient(#f7d6df, #e9b8c8);
  border: 4px solid #b86b82;
  border-radius: 18px 18px 25px 25px;
  box-shadow: 0 7px 0 #9b526a,
              0 12px 20px rgba(0,0,0,.25);
}

.my-tv-screen {
  position: absolute;
  left: 13px;
  top: 13px;
  width: 155px;
  height: 125px;
  overflow: hidden;
  background: #201b1d;
  border: 6px solid #8f5367;
  border-radius: 45% 10% 10% 45% / 45% 10% 10% 45%;
  box-shadow: inset 0 0 12px rgba(0,0,0,.8),
              0 0 5px rgba(255,255,255,.35);
}

.my-tv-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.my-tv-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    rgba(255,255,255,.22),
    transparent 30%
  );
}

.my-tv-controls {
  position: absolute;
  right: 9px;
  top: 25px;
  width: 35px;
  text-align: center;
}

.my-tv-knob {
  width: 27px;
  height: 27px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    #fff0f5, #d58aa0 55%, #9e526b
  );
  border: 2px solid #87465d;
  box-shadow: 2px 3px 0 #7b4055;
}

.my-tv-knob.small {
  width: 19px;
  height: 19px;
}

.my-tv-speaker {
  position: absolute;
  right: 12px;
  bottom: 17px;
  color: #a4526d;
  font-size: 7px;
  line-height: 7px;
  letter-spacing: 2px;
}

.my-tv-caption {
  margin-top: 12px;
  color: #d36f91;
  font-size: 15px;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 #fff;
  animation: myTvBlink 3s ease-in-out infinite;
}

@keyframes myTvBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .65; }
}
</style>

03. What's in My Bag?

Make your own interactive bag and fill it with items you love. You can use makeup, a phone, a mirror, perfume, accessories, or anything else you want.

Before you start

Find a picture of the bag you want to use.
Find separate pictures of all the items you want inside the bag.
Use transparent PNG images so the items appear without unwanted backgrounds.
Upload the images to an image-hosting website and copy their direct image URLs.
Replace the image URL placeholders in the code below with your own URLs.

If you use an iPhone, you can sometimes create a cutout sticker from a picture in Photos by pressing and holding the subject. Use the available sharing or saving option to save the cutout, then upload the resulting image to obtain a URL.

How to customise the items

This template includes three items. To add more, copy an item image line and give it a new class name. Then add a matching position rule in the CSS. Change the left and top values to move the item to your preferred position.

Paste the completed code into an HTML/JavaScript gadget in Blogger Layout.

What's in My Bag template

<style>
.my-bag-game {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 480px;
  margin: 25px auto;
  overflow: visible;
  text-align: center;
}

.my-bag-game .my-bag {
  position: absolute;
  width: 260px;
  max-width: 58%;
  height: auto;
  left: 50%;
  top: 170px;
  transform: translateX(-50%);
  z-index: 10;
  cursor: pointer;
  user-select: none;
}

.my-bag-game .my-item {
  position: absolute;
  width: 65px;
  height: auto;
  opacity: 0;
  left: 50%;
  top: 150px;
  z-index: 20;
  object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.1);
}

.my-bag-game .item-one {
  left: 25%;
  top: 125px;
  --rotation: -12deg;
}

.my-bag-game .item-two {
  left: 75%;
  top: 125px;
  --rotation: 12deg;
}

.my-bag-game .item-three {
  left: 50%;
  top: 85px;
  --rotation: -5deg;
}

@keyframes myBagPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.1)
               rotate(0deg);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08)
               rotate(var(--rotation));
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1)
               rotate(var(--rotation));
  }
}

.my-bag-game.is-open .my-item {
  animation: myBagPop .6s forwards;
  pointer-events: auto;
}

@media (max-width: 600px) {
  .my-bag-game {
    height: 430px;
  }

  .my-bag-game .my-bag {
    width: 235px;
  }

  .my-bag-game .my-item {
    width: 55px;
  }
}
</style>

<div class="my-bag-game"
     onclick="openMyBag(this)">

  <img class="my-bag"
       src="YOUR_BAG_IMAGE_URL_HERE"
       alt="My bag">

  <img class="my-item item-one"
       src="YOUR_FIRST_ITEM_URL_HERE"
       alt="First item">

  <img class="my-item item-two"
       src="YOUR_SECOND_ITEM_URL_HERE"
       alt="Second item">

  <img class="my-item item-three"
       src="YOUR_THIRD_ITEM_URL_HERE"
       alt="Third item">

</div>

<script>
function openMyBag(game) {
  game.classList.toggle("is-open");
}
</script>

04.Your Own Virtual Pet

Want a little virtual pet on your blog? You can create one using Gify Pet and add the generated code to your blog without having to design the entire gadget yourself.

Visit Gify Pet.
Follow the available instructions to create and customise your pet.
When you're finished, find the option to generate or copy the HTML embed code.
Copy the code provided by the website.
Open Blogger and go to Layout.
Choose Add a Gadget, then select HTML/JavaScript.
Paste the generated code and save the gadget.
Visit your blog to check that the pet appears and works properly.

The pet's code comes from Gify Pet <3

Labels

A fellow diva asked me a question in my google form but I couldn’t find her email or blog link there so I’ll reply here , I do hope she gets to see this and that it’ll be helpful for anyone else too , So on your blog you can have multiple posts from different days that have the same label appear on the same page when a certain tab gets clicked on your homepage . That way, whenever someone clicks the tab, they’ll see all the posts with that label instead of just one post! You don’t need HTML for the posts themselves. Your label link usually looks like yourblog.blogspot.com/search/label/LabelName — just replace LabelName with your actual label. For example iloveblue.blogspot.com/search/label/diary , this whole link has to be put in the pages section for the page that will contain posts with the label diary, so that anytime you post something and label it with diary, when the diary tab gets clicked , all posts with the label diary appear. The pages section is found in layout depending on the blog theme you’re using.

To control how many posts in total appear on your homepage, go to Blogger → Settings → Posts → Max posts shown on main page and change the number. For my blog I just chose one post

And for the welcome pop-up message , I’ll make a separate post with the other requested codes. If anyone needs help with anything you can let me know in the comments or my cbox

Thank you for reading Angels! Have fun customising your blogs.

With love,

Roshan

Roshan’s Pretty Little World

Pages

Thursday, October 22, 2026

Blog Codes