blog codes

Here are some codes for cute widgets to add to your blog! 

(All you need to do is copy and paste into your HTML gadget. You may need to tweak some of the choice option like on the poll you would change these answers to your own)

WEBSITES FOR WIDGETS/BLOG CODES:

https://www.cursors-4u.com/

https://gify.pet/

https://www.abowman.com/

https://lotusofmysoul.blogspot.com/p/codes-copy-okay-divas-currently.html

I got the pear phone code from this diva, lotus of my soul! <3 she has the code & instructions over on her blog ^^

Poll Widget 

<div class="poll-widget">

  <div class="poll-title">Today's Mood? ✨</div>

  <div id="poll-options">

    <div class="poll-opt" onclick="castVote(0)">🌸 Cozy & Reading</div>

    <div class="poll-opt" onclick="castVote(1)">☕ Highly Caffeinated</div>

    <div class="poll-opt" onclick="castVote(2)">🎮 Gaming Mode</div>

  </div>

  <div id="poll-results" style="display:none;">

    <div class="res-bar-container"><span>Cozy:</span><div class="res-bar" id="bar0"></div><span id="pct0"></span></div>

    <div class="res-bar-container"><span>Coffee:</span><div class="res-bar" id="bar1"></div><span id="pct1"></span></div>

    <div class="res-bar-container"><span>Gaming:</span><div class="res-bar" id="bar2"></div><span id="pct2"></span></div>

    <button class="poll-reset-btn" onclick="resetPoll()">Vote Again</button>

  </div>

</div>

<style>

.poll-widget { width: 170px; padding: 12px; background: #fff5f5; border: 3px solid #ffccd5; border-radius: 12px; font-family: 'Courier New', monospace; box-shadow: 4px 4px 0px #ffccd5; margin: 0 auto; text-align: left; }

.poll-title { font-weight: bold; font-size: 13px; color: #ff7b90; text-align: center; margin-bottom: 10px; }

.poll-opt { background: #fff; border: 1px solid #ffccd5; border-radius: 6px; padding: 6px; margin-bottom: 6px; font-size: 11px; cursor: pointer; transition: 0.2s; text-align: center; color: #555; }

.poll-opt:hover { background: #ffe3e8; transform: translateX(2px); }

.res-bar-container { font-size: 10px; color: #666; margin-bottom: 6px; display: flex; flex-direction: column; }

.res-bar { height: 10px; background: #ffb3c1; border-radius: 4px; width: 0%; transition: width 0.5s ease-out; margin: 2px 0; }

.poll-reset-btn { width: 100%; font-family: inherit; font-size: 10px; background: #ffccd5; color: white; border: none; padding: 4px; border-radius: 4px; cursor: pointer; margin-top: 5px; font-weight: bold; }

</style>

<script>

let votes =; 

function castVote(idx) {

  votes[idx]++;

  showResults();

}

function showResults() {

  const total = votes.reduce((a, b) => a + b, 0);

  document.getElementById('poll-options').style.display = 'none';

  document.getElementById('poll-results').style.display = 'block';

  votes.forEach((v, i) => {

    const pct = Math.round((v / total) * 100);

    document.getElementById(`bar${i}`).style.width = pct + '%';

    document.getElementById(`pct${i}`).innerText = pct + '%';

  });

}

function resetPoll() {

  document.getElementById('poll-options').style.display = 'block';

  document.getElementById('poll-results').style.display = 'none';

}

</script>

Status Bar  

<div class="status-badge">

  <div class="badge-header">Current Status 🏷️</div>

  <div class="status-item"><b>Mood:</b> 🍵 Productive</div>

  <div class="status-item"><b>Watching:</b> Gossip Girl</div>

  <div class="status-item" style="border:none;"><b>Listening:</b> Conan Gray</div>

</div>

<style>

.status-badge { width: 160px; padding: 10px; background: #fdf2f8; border: 2px dashed #f472b6; border-radius: 8px; font-family: 'Courier New', monospace; font-size: 11px; margin: 0 auto; box-shadow: 3px 3px 0px #fbcfe8; }

.badge-header { font-weight: bold; color: #db2777; font-size: 12px; margin-bottom: 8px; text-align: center; border-bottom: 1px solid #fbcfe8; padding-bottom: 4px; }

.status-item { padding: 4px 0; color: #4c0519; border-bottom: 1px dotted #fbcfe8; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.status-item b { color: #be185d; }

</style>

Fortune Teller Widget 

<div class="origami-widget">

  <div class="origami-title">COZY FORTUNE 🌸</div>

  <div id="origami-screen" class="origami-box">Select a color to open your fortune...</div>

  <div class="origami-grid">

    <div class="origami-tab" style="background:#ffb7b2;" onclick="openFortune('A magical book will find you soon!')">Pink</div>

    <div class="origami-tab" style="background:#b5ead7;" onclick="openFortune('Time to clear your browser cache & restart.')">Mint</div>

    <div class="origami-tab" style="background:#ffdac1;" onclick="openFortune('An old song will bring back a great memory.')">Peach</div>

    <div class="origami-tab" style="background:#c7ceea;" onclick="openFortune('A perfect cup of tea/coffee is in your future.')">Lavender</div>

  </div>

  <button class="origami-reset" onclick="resetFortune()">Reset Game</button>

</div>

<style>

.origami-widget { width: 165px; padding: 10px; background: #fffdf9; border: 3px double #e0b0ff; border-radius: 12px; margin: 0 auto; box-shadow: 4px 4px 0 #e0b0ff; text-align: center; font-family: 'Courier New', monospace; }

.origami-title { font-size: 11px; font-weight: bold; color: #b39ddb; margin-bottom: 8px; }

.origami-box { height: 65px; background: #faf8f5; border: 1px dashed #b39ddb; border-radius: 6px; padding: 6px; font-size: 10px; color: #555; display: flex; align-items: center; justify-content: center; line-height: 1.3; overflow: hidden; }

.origami-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 8px 0; }

.origami-tab { padding: 6px 0; font-size: 10px; font-weight: bold; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.1); border-radius: 4px; cursor: pointer; user-select: none; }

.origami-tab:active { transform: scale(0.95); }

.origami-reset { width: 100%; font-family: inherit; font-size: 9px; background: #eee; border: 1px solid #ccc; padding: 3px; border-radius: 4px; cursor: pointer; color: #777; }

</style>

<script>

function openFortune(txt) {

  const scr = document.getElementById('origami-screen');

  scr.style.opacity = 0;

  setTimeout(() => {

    scr.innerText = txt;

    scr.style.opacity = 1;

  }, 150);

}

function resetFortune() {

  document.getElementById('origami-screen').innerText = "Select a color to open your fortune...";

}

</script>

Paint Widget

<iframe src="https://jspaint.app/" height="270px" width="250px" title="MS Paint Widget"></iframe>

Retro CRT TV widget 

<!-- Y2K Retro CRT TV Layout Shell -->

<div class="crt-tv-case">

  

  <!-- Outer Plastic Bezel Frame -->

  <div class="crt-tv-bezel">

    

    <!-- Curved Glass Screen Viewport -->

    <div class="crt-screen-glass">

      <!-- Phosphor Glare & Scanline Filter Layers -->

      <div class="crt-scanlines"></div>

      <div class="crt-screen-glare"></div>

      

      <!-- Inside Display Content Container -->

      <div class="crt-inner-display">

        <!-- Change "YOUR_VIDEO_ID" to any YouTube video code --> <iframe width="560" height="315" src="https://www.youtube.com/embed/BtpB0pCPjaM?si=CQlqjnPzMjBYispC" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

        <iframe 

          id="crtTvFrame"

          src="https://youtube.com" 

          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 

          allowfullscreen>

        </iframe>

      </div>

    </div>

    

    <!-- Vintage Physical Dial Right Hand Control Panel -->

    <div class="crt-control-bezel">

      <div class="crt-dial-knob" onclick="rotateKnob(this)"></div>

      <div class="crt-dial-knob" onclick="rotateKnob(this)"></div>

      

      <!-- Speaker Grill Slots -->

      <div class="crt-speaker-grill">

        <span></span><span></span><span></span><span></span><span></span>

      </div>

      

      <!-- Purple Neon Power LED Cluster -->

      <div class="crt-power-cluster" onclick="toggleCrtPower()">

        <div id="crtPowerLed" class="crt-led-on"></div>

        <span class="crt-power-label">POWER</span>

      </div>

    </div>

    

  </div>

  

  <!-- Removable TV Table Stand Footing Base -->

  <div class="crt-tv-stand"></div>

</div>

<style>

/* 2000s Metallic/Plastic Physical CRT Body Chassis */

.crt-tv-case {

  max-width: 680px;

  margin: 30px auto;

  position: relative;

  font-family: 'Courier New', Courier, monospace;

}

.crt-tv-bezel {

  background: linear-gradient(135deg, #1c1530 0%, #0e0a1a 100%); /* Midnight Cyber Purple */

  border: 6px solid #4a347a; /* Molded Plastic Trim Accent */

  border-radius: 28px;

  padding: 20px 95px 20px 20px; /* Space on right side for manual physical dial stack */

  box-shadow: inset -4px -4px 10px #05030a, inset 4px 4px 10px #312154, 6px 6px 0px #000000;

  position: relative;

}

/* Simulated Bubble Glass Curved Display Engine */

.crt-screen-glass {

  position: relative;

  width: 100%;

  padding-bottom: 75%; /* Nostalgic Standard Definition 4:3 Aspect Ratio */

  height: 0;

  background-color: #0c0914;

  border-radius: 40px / 30px; /* Spherically rounded screen corners */

  border: 10px solid #08050e; /* Inner screen gasket mask */

  box-shadow: inset 0px 0px 20px rgba(0,0,0,1), 0 0 15px rgba(153, 51, 255, 0.2);

  overflow: hidden;

}

.crt-inner-display {

  position: absolute;

  top: -2%; left: -2%;

  width: 104%; height: 104%; /* Scales out edges slightly to tuck under bezel */

}

.crt-inner-display iframe {

  width: 100%;

  height: 100%;

  border: 0;

  transition: opacity 0.3s ease;

}

/* Authentic Interlaced Scanlines Overlay */

.crt-scanlines {

  position: absolute;

  top: 0; left: 0; bottom: 0; right: 0;

  background: linear-gradient(rgba(18, 10, 36, 0) 50%, rgba(0, 0, 0, 0.4) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.04));

  background-size: 100% 4px, 6px 100%;

  z-index: 10;

  pointer-events: none; /* Allows cursor actions to pass through to iframe */

}

/* Glass Tube Phosphor Glare Shading */

.crt-screen-glare {

  position: absolute;

  top: 0; left: 0; bottom: 0; right: 0;

  background: radial-gradient(circle at 50% 15%, rgba(223, 128, 255, 0.12) 0%, rgba(0, 0, 0, 0) 70%);

  z-index: 11;

  pointer-events: none;

}

/* Physical Right Side Panel Layout */

.crt-control-bezel {

  position: absolute;

  top: 35px;

  right: 15px;

  width: 65px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 15px;

}

.crt-dial-knob {

  width: 38px;

  height: 38px;

  background: radial-gradient(circle at 35% 35%, #2d1f4d, #0d091a);

  border: 2px solid #5d4399;

  border-radius: 50%;

  box-shadow: 2px 2px 4px #000, inset -1px -1px 3px #000;

  cursor: pointer;

  position: relative;

  transition: transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);

}

.crt-dial-knob::before {

  content: '';

  position: absolute;

  top: 3px; left: 50%;

  width: 3px; height: 8px;

  background-color: #df80ff; /* Glowing lavender indicator notch */

  transform: translateX(-50%);

}

.crt-speaker-grill {

  display: flex;

  flex-direction: column;

  gap: 4px;

  width: 32px;

  margin: 10px 0;

}

.crt-speaker-grill span {

  height: 3px;

  background-color: #07050d;

  border-bottom: 1px solid #251b3d;

  border-radius: 2px;

}

/* Purple Active Power LED Cluster Elements */

.crt-power-cluster {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 5px;

  cursor: pointer;

}

#crtPowerLed {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  border: 1px solid #000;

  transition: all 0.2s ease;

}

.crt-led-on {

  background-color: #df80ff;

  box-shadow: 0 0 10px #df80ff, 0 0 4px #9933ff;

}

.crt-led-off {

  background-color: #2b1f47;

  box-shadow: none;

}

.crt-power-label {

  font-size: 8px;

  color: #a399cc;

  font-weight: bold;

  letter-spacing: 0.5px;

}

/* Underneath Wedge Desktop Stand base */

.crt-tv-stand {

  width: 45%;

  height: 20px;

  background: linear-gradient(180deg, #0e0a1a 0%, #050308 100%);

  border: 2px solid #23193a;

  border-top: none;

  margin: 0 auto;

  border-radius: 0 0 12px 12px;

  box-shadow: 3px 3px 0px #000000;

}

</style>

<script>

// Interactive Dial Mechanical Sound/Rotation Effect

function rotateKnob(element) {

  // Generates random indexing ticks to emulate manual hardware tuning

  let currentRotation = element.style.transform ? parseInt(element.style.transform.replace(/[^\d-]/g, '')) : 0;

  let nextRotation = currentRotation + 45;

  element.style.transform = `rotate(${nextRotation}deg)`;

}

// Master CRT Power On/Off Engine

function toggleCrtPower() {

  const led = document.getElementById('crtPowerLed');

  const iframe = document.getElementById('crtTvFrame');

  

  if (led.classList.contains('crt-led-on')) {

    // Powering Down

    led.classList.remove('crt-led-on');

    led.classList.add('crt-led-off');

    iframe.style.opacity = '0';

    iframe.style.pointerEvents = 'none';

  } else {

    // Powering Up

    led.classList.remove('crt-led-off');

    led.classList.add('crt-led-on');

    iframe.style.opacity = '1';

    iframe.style.pointerEvents = 'auto';

  }

}

</script>

<p>&nbsp;</p>

*WHEN YOU USE THIS WIDGET YOU MUST REPLACE THE YOUTUBE SOURCE TO THE YOUTUBE LINK OF YOUR CHOICE (THE LINK THERE NOW IS MY YOUTUBE VIDEO)*

 *COPY AND PASTE YOUR LINK INTO THE SECTION I HIGHLIGHTED IN THIS PHOTO*

Polaroid Picture Widget

<div class="polaroid-widget-wrapper">

  <div class="polaroid-frame">

    <div class="polaroid-img-container" id="polaroid-slider">

      <!-- Add or change your image links and matching captions here -->

      <img src=“ur image url" alt="Memory 1" data-caption="my bestie 💜" class="polaroid-slide active" />

      <img src=“ur image url” alt="Memory 2" data-caption="concert ✨" class="polaroid-slide" />

      <img src="ur image url” alt="Memory 3" data-caption="hike views 🌲" class="polaroid-slide" />

    </div>

    <div class="polaroid-caption">

      <span class="handwritten-font" id="polaroid-caption-text">my bestie 💜</span>

    </div>

  </div>

</div>

<style>

  @import url('https://googleapis.com');

  .polaroid-widget-wrapper {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 20px;

    background: transparent;

  }

  .polaroid-frame {

    background: #fff;

    padding: 15px 15px 45px 15px;

    width: 220px;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

    transform: rotate(-3deg);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    border-radius: 3px;

  }

  .polaroid-frame:hover {

    transform: rotate(0deg) scale(1.03);

    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);

  }

  .polaroid-img-container {

    width: 100%;

    height: 190px;

    overflow: hidden;

    background: #f0f0f0;

    position: relative;

  }

  .polaroid-slide {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0;

    transition: opacity 0.8s ease-in-out;

  }

  .polaroid-slide.active {

    opacity: 1;

  }

  .polaroid-caption {

    text-align: center;

    padding-top: 12px;

  }

  .handwritten-font {

    font-family: 'Caveat', cursive, sans-serif;

    font-size: 1.4rem;

    color: #333;

  }

</style>

<script>

  (function() {

    const slides = document.querySelectorAll('.polaroid-slide');

    const captionText = document.getElementById('polaroid-caption-text');

    let currentIndex = 0;

    function nextSlide() {

      slides[currentIndex].classList.remove('active');

      currentIndex = (currentIndex + 1) % slides.length;

      slides[currentIndex].classList.add('active');

      

      // Update matching handwritten caption if provided

      const newCaption = slides[currentIndex].getAttribute('data-caption');

      if (newCaption) {

        captionText.innerText = newCaption;

      }

    }

    // Change picture every 3500 milliseconds (3.5 seconds)

    setInterval(nextSlide, 3500);

  })();

</script>

*WHEN YOU USE THIS WIDGET YOU MUST COPY & PASTE THE URL OF YOUR IMAGE YOU WANT AND PASTE IT INTO THE HIGHLIGHTED PART (EXAMPLE BELOW) 

YOU THEN CAN CHANGE THE CAPTION OF EACH POLAROID NEXT TO THE IMAGE URL CODE*

Record Player Widget

<div class="y2k-vinyl-container">

  <div class="vinyl-header" id="vinyl-status">🔮 NOW SPINNING 🔮</div> click to play

  

  <div class="vinyl-widget">

    <!-- Clicking the album cover toggles the music -->

    <div class="album-cover" onclick="toggleAudio()">

      <img src="album image url” />

      <div class="vinyl-record" id="y2k-vinyl-disc">

        <div class="vinyl-label"></div>

      </div>

    </div>

  </div>

  <!-- Hidden HTML5 Audio Element -->

  <!-- Replace the src URL below with your own direct MP3 link -->

  <audio id="vinyl-audio" src="MP3 Link” loop></audio>

</div>

<style>

  .y2k-vinyl-container {

    background: #D8BFD8; 

    border: 2px solid #b026ff; 

    padding: 15px; 

    box-shadow: 0 0 12px #9400d3, 4px 4px 0px #ff007f; 

    border-radius: 6px;

    max-width: 320px;

    margin: 10px auto;

    font-family: 'Courier New', monospace;

  }

  

  .vinyl-header {

    font-size: 11px; 

    color: #ff007f; 

    font-weight: bold; 

    margin-bottom: 15px; 

    text-align: center; 

    letter-spacing: 1.5px; 

    text-shadow: 0 0 5px #b026ff;

  }

  .vinyl-widget {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    padding: 10px;

    height: 160px;

  }

  

  .album-cover {

    position: relative;

    width: 140px;

    height: 140px;

    z-index: 2;

    cursor: pointer;

  }

  

  .album-cover img {

    width: 100%;

    height: 100%;

    border-radius: 4px;

    position: relative;

    z-index: 3;

    box-shadow: 2px 2px 8px rgba(0,0,0,0.8);

  }

  

  .vinyl-record {

    position: absolute;

    top: 5px;

    left: 5px;

    width: 130px;

    height: 130px;

    background: radial-gradient(circle, #111 30%, #222 31%, #050505 70%);

    border-radius: 50%;

    z-index: 1;

    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  }

  /* Active class added by JS when music plays */

  .vinyl-record.playing {

    transform: translateX(85px);

    animation: y2kSpin 2.5s linear infinite;

  }

  

  .vinyl-record::before {

    content: '';

    position: absolute;

    top: 12px; left: 12px; right: 12px; bottom: 12px;

    border: 1px dashed rgba(255,255,255,0.12);

    border-radius: 50%;

  }

  

  .vinyl-label {

    position: absolute;

    top: 47px; left: 47px;

    width: 36px; height: 36px;

    background: #ff007f;

    border-radius: 50%;

    border: 3px solid #fff;

  }

  

  @keyframes y2kSpin {

    0% { transform: translateX(85px) rotate(0deg); }

    100% { transform: translateX(85px) rotate(360deg); }

  }

</style>

<script>

function toggleAudio() {

  var audio = document.getElementById("vinyl-audio");

  var disc = document.getElementById("y2k-vinyl-disc");

  var statusText = document.getElementById("vinyl-status");

  if (audio.paused) {

    audio.play();

    disc.classList.add("playing");

    statusText.innerHTML = "✨ NOW PLAYING ✨";

  } else {

    audio.pause();

    disc.classList.remove("playing");

    statusText.innerHTML = "🔮 NOW SPINNING 🔮";

  }

}

</script>

*TO ADD THE ALBUM IMAGE YOU NEED TO PASTE THE IMAGE URL INTO THE HIGHLIGHTED PART!

TO ADD THE MUSIC YOU MUST GET THE MP3 LINK FOR THE SONG YOU WANT TO USE, THEN PASTE IT INTO THE UNDERLINED "MP3 LINK" PART!*

Feeding Fishes

<iframe width="400" height="300" frameborder="0" src="https://cdn.abowman.com/widgets/fish/fish.html?up_backgroundColor=f0f7ff&up_numFish=5&up_fishColor1=ff40ff&up_fishColor2=be38f3&up_fishColor3=00a3d7&up_fishColor4=f45540&up_fishColor5=77bb41&up_fishColor6=f5ec00&up_fishColor7=f45540&up_fishColor8=f45540&up_fishColor9=f45540&up_fishColor10=f45540"></iframe>