Codes and Websites to Decorate Your Blog!

Hii fairies, how are you?

Below, I'll leave a list of websites that can help you decorate your blog, as well as HTML codes to create your own gadgets!!

Copy and paste the HTML code into the HTML/JavaScript gadget. You may have to change some information to make it your own, but it's simple, and I'll indicate where you need to make the changes.

Click below to open the post and see more.

₊˚ ✧ ━━━━⊱⋆⊰━━━━ ✧ ₊˚₊˚ ✧ ━━━━⊱⋆⊰━━━━ ✧ ₊˚

Sites

Cute Chat Box

This one is called Cbox! You can create those iconic chat boxes that everyone has, where you can chat with other people and share your blog with each other!

₊˚ ✧ ━━━━⊱⋆⊰━━━━ ✧ ₊˚₊˚ ✧ ━━━━⊱⋆⊰━━━━ ✧ ₊˚

Playlist Maker

This one is called POWR Music Player. With this website, you can create a playlist to display your favorite songs, with custom images and names. Sadly, you can only add up to 3 songs in the free version, but it's still a very cute addition to your blog!

₊˚ ✧ ━━━━⊱⋆⊰━━━━ ✧ ₊˚₊˚ ✧ ━━━━⊱⋆⊰━━━━ ✧ ₊˚

HTML Codes

DVD Collection

Copy and paste the HTML code into the HTML/JavaScript gadget. Change the following part: 

src="PASTE YOUR IMAGE URL HERE" || href="PASTE YOUR COLLECTION URL HERE

Simply paste the URLs! When you right-click on an image, you should see an option called “Copy Image Address.”

<div style="

  width:190px;

  padding:12px;

  margin:auto;

  background:#fff8fa;

  border:1px solid #d8a6b8;

  box-sizing:border-box;

  text-align:center;

  font-family:Georgia,serif;

  color:#80636d;

">

  <div style="

    font-size:15px;

    letter-spacing:1px;

    color:#9b687c;

    margin-bottom:4px;

  ">

    my dvd collection 

  </div>

  <div style="

    font-size:10px;

    color:#b18d98;

    margin-bottom:10px;

  ">

    little movies i love

  </div>

  <div style="

    display:flex;

    justify-content:center;

    gap:5px;

    flex-wrap:wrap;

  ">

    <img

      src="PASTE YOUR IMAGE URL HERE"

      style="width:70px;height:95px;object-fit:cover;border:1px solid #d8a6b8;"

    />

    <img

      src="PASTE YOUR IMAGE URL HERE"

      style="width:70px;height:95px;object-fit:cover;border:1px solid #d8a6b8;"

    />

    <img

      src="PASTE YOUR IMAGE URL HERE"

      style="width:70px;height:95px;object-fit:cover;border:1px solid #d8a6b8;"

    />

    <img

      src="PASTE YOUR IMAGE URL HERE"

      style="width:70px;height:95px;object-fit:cover;border:1px solid #d8a6b8;"

    />

  </div>

  <div style="

    margin-top:9px;

    font-size:10px;

    letter-spacing:.5px;

  ">

    <a

      href="PASTE YOUR COLLECTION URL HERE"

      target="_blank"

      rel="noopener noreferrer"

      style="color:#a56d82;text-decoration:none;"

    >

      ↳ see my collection

    </a>

  </div>

</div>

₊˚ ✧ ━━━━⊱⋆⊰━━━━ ✧ ₊˚₊˚ ✧ ━━━━⊱⋆⊰━━━━ ✧ ₊˚

Custom Visit Counter

Copy and paste the HTML code into the HTML/JavaScript gadget. Change the following part if you want: visitors | ✧ thank you for visiting ✧

Important!! Go to this website, Free Hits Counter, to create your own visitor counter for your blog.

<div style="

  width:190px;

  padding:10px;

  margin:auto;

  background:#fff8fa;

  border:1px solid #d8a6b8;

  box-sizing:border-box;

  text-align:center;

  font-family:Georgia,serif;

  color:#80636d;

">

  <div style="

    font-size:14px;

    letter-spacing:1px;

    color:#9b687c;

    margin-bottom:4px;

  ">

    visitors 

  </div>

  <div style="

    font-size:10px;

    color:#b18d98;

    margin-bottom:7px;

  <div style="

    display:inline-block;

    min-width:80px;

    min-height:20px;

    padding:4px 8px;

    background:#f8edf1;

    border:1px solid #d8a6b8;

    box-sizing:border-box;

    font-family:'Courier New',monospace;

    font-size:12px;

    letter-spacing:1px;

    color:#9b687c;

    overflow:hidden;

  ">

    <script

      type="text/javascript"

      src="PUT YOUR LINK HERE">

    </script>

  </div>

  <div style="

    margin-top:6px;

    font-size:9px;

    color:#b18d98;

  ">

    ✧ thank you for visiting ✧

  </div>

</div>

₊˚ ✧ ━━━━⊱⋆⊰━━━━ ✧ ₊˚₊˚ ✧ ━━━━⊱⋆⊰━━━━ ✧ ₊˚

Mini TV Player

Copy and paste the HTML code into the HTML/JavaScript gadget. Change the following part:

 

src="https://www.youtube.com/embed/YOUR_VIDEO_ID"

You have to copy the YouTube video you want to play and paste its URL here. It has to be an embed URL! If your link looks like youtube.com/watch?v=..., simply replace the watch?v= part with embed/, and keep the rest of the URL the same!

<div style="width:220px; margin:0 auto; position:relative;">

  <div style="

    width:220px;

    height:163px;

    background:#d8a6b8;

    border:7px solid #c58ba2;

    border-radius:18px;

    box-sizing:border-box;

    padding:13px;

    box-shadow:3px 4px 0 #b47791;

  ">

    <div style="

      width:100%;

      height:100%;

      background:#211b20;

      border-radius:8px;

      position:relative;

      overflow:hidden;

    ">

      <iframe

        src="https://www.youtube.com/embed/YOUR_VIDEO_ID"

        style="

          width:100%;

          height:100%;

          border:0;

          display:block;

        "

        allow="autoplay; encrypted-media"

        allowfullscreen>

      

      <button

        onclick="playPauseTV()"

        id="tvPlayButton"

        style="

          position:absolute;

          top:50%;

          left:50%;

          transform:translate(-50%,-50%);

          width:42px;

          height:42px;

          border-radius:50%;

          border:1px solid #d8a6b8;

          background:rgba(255,255,255,0.75);

          color:#b47791;

          font-size:16px;

          line-height:40px;

          padding:0;

          cursor:pointer;

          z-index:10;

        "

      >▶

    </button

></iframe

></div>

  </div>

</div>

<script>

var tvPlayer;

var tvPlaying = false;

function onYouTubeIframeAPIReady() {

  tvPlayer = new YT.Player(document.querySelector('iframe'), {

    events: {

      'onStateChange': function(event) {

        if (event.data === YT.PlayerState.PLAYING) {

          tvPlaying = true;

          document.getElementById("tvPlayButton").innerHTML = "❚❚";

        }

        if (event.data === YT.PlayerState.PAUSED) {

          tvPlaying = false;

          document.getElementById("tvPlayButton").innerHTML = "▶";

        }

      }

    }

  });

}

function playPauseTV() {

  if (!tvPlayer) return;

  if (tvPlaying) {

    tvPlayer.pauseVideo();

  } else {

    tvPlayer.playVideo();

  }

}

if (!document.getElementById("youtube-api-script")) {

  var script = document.createElement("script");

  script.id = "youtube-api-script";

  script.src = "https://www.youtube.com/iframe_api";

  document.head.appendChild(script);

}

</script>

₊˚ ✧ ━━━━⊱⋆⊰━━━━ ✧ ₊˚₊˚ ✧ ━━━━⊱⋆⊰━━━━ ✧ ₊˚

I hope this post helped you with customizing your blogs. Thank you for visiting, faeries! ♡

PS: I struggled a bit to write these codes, haha. I had to ask AI for help because I couldn't find it anywhere online, and I really racked my brain trying to get it to work. I hope this saves you all the same trouble!