-->

Friday, August 14, 2026

Codes on my blog

Hi guys,  Here are the HTML codes for some stuff on my blog. Just copy and paste the code onto the HTML content and it should work. You might have to change some stuff to get different colors or sizes, goodluck!

To remove white background from around img

Go to theme >customize>advanced >scroll to add CSS ; copy and paste this code and save !

 .post-body img, .post-body .tr-caption-container,

.Profile img, .Image img,

.BlogList .item-thumbnail img {

padding: none !important;

border: none !important;

background: none !important;

-moz-box-shadow: 0px 0px 0px transparent !important;

-webkit-box-shadow: 0px 0px 0px transparent

!important;

box-shadow: 0px 0px 0px transparent !important;

}


 Vibe check:


<div class="y2k-poll-card">
  <div class="poll-header">✨ VIBE CHECK ✨</div>
  <form id="y2kPollForm">
    <label class="poll-option">
      <input type="radio" name="vibe" value="cozy" />
      <span class="custom-radio"></span>
      <span class="option-text"> Cozy</span>
    </label>
    <label class="poll-option">
      <input type="radio" name="vibe" value="tired" />
      <span class="custom-radio"></span>
      <span class="option-text">Tired</span>
    </label>
    <label class="poll-option">
      <input type="radio" name="vibe" value="energetic" />
      <span class="custom-radio"></span>
      <span class="option-text">Energetic</span>
    </label>
    <button type="button" class="poll-btn" onclick="showResults()">SUBMIT ☆</button>
  </form>

  <div id="pollResults" class="poll-results" style="display: none;">
    <div class="result-header">~ RESULTS ~</div>
    <div class="result-bar-wrap">
      <span> Cozy</span>
      <div class="bar"><div class="fill" style="width: 50%;"></div></div>
    </div>
    <div class="result-bar-wrap">
      <span> Tired</span>
      <div class="bar"><div class="fill" style="width: 15%;"></div></div>
     
    </div>
    <div class="result-bar-wrap">
      <span> Energetic</span>
      <div class="bar"><div class="fill" style="width: 35%;"></div></div>
    </div>
  </div>
</div>

<style>
  .y2k-poll-card {
    width: 240px;
    background: #708090;
    border: 2px solid #b0c4de;
    border-radius: 12px;
    padding: 14px;
    font-family: 'Courier New', Courier, monospace;
    color: #fff;
    box-shadow: 3px 3px 0px #4682b4;
  }
  .poll-header {
    text-align: center;
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 12px;
    color: #e0ffff;
    text-shadow: 1px 1px #2f4f4f;
  }
  .poll-option {
    display: flex;
    align-items: center;
    background: #5c6f84;
    border: 1px dashed #b0c4de;
    padding: 6px 8px;
    margin-bottom: 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
  }
  .poll-option:hover {
    background: #6a8098;
  }
  .poll-option input {
    display: none;
  }
  .custom-radio {
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    background: #46596f;
    border-radius: 50%;
    margin-right: 8px;
    display: inline-block;
  }
  .poll-option input:checked + .custom-radio {
    background: #00ffff;
    box-shadow: 0 0 4px #00ffff;
  }
  .poll-btn {
    width: 100%;
    background: #b0c4de;
    border: 1px solid #fff;
    color: #2f4f4f;
    font-weight: bold;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 4px;
    font-family: inherit;
    font-size: 11px;
  }
  .poll-btn:hover {
    background: #e0ffff;
  }
  .poll-results {
    margin-top: 10px;
    border-top: 1px dashed #b0c4de;
    padding-top: 8px;
  }
  .result-header {
    text-align: center;
    font-size: 11px;
    margin-bottom: 6px;
    color: #e0ffff;
  }
  .result-bar-wrap {
    font-size: 10px;
    margin-bottom: 5px;
  }
  .bar {
    background: #46596f;
    border: 1px solid #b0c4de;
    height: 6px;
    border-radius: 3px;
    margin: 2px 0;
    overflow: hidden;
  }
  .fill {
    background: #00ffff;
    height: 100%;
  }
  .pct {
    float: right;
    font-size: 9px;
  }
</style>

<script>
  function showResults() {
    document.getElementById('y2kPollForm').style.display = 'none';
    document.getElementById('pollResults').style.display = 'block';
  }
</script>



Paint widget


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

imovie widget




<div class="imovie-window">
  <div class="imovie-toolbar">
    <div class="window-buttons">
      <span class="btn-close"></span>
      <span class="btn-minimize"></span>
      <span class="btn-zoom"></span>
    </div>
    <div class="imovie-title">iMovie - Project Workspace</div>
  </div>
  <div class="imovie-content">
  

<iframe width="400" height="225" src="https://www.youtube.com/embed/rlIT18Se1gI?si=LPsi6k5fTfKL60Oy" 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>
  </div>
</div>

<style>
.imovie-window {
  max-width: 480px;
  margin: 20px auto;
  background: #FCF;
  border-radius: 8px;
  border: 1px solid #FCF;
  box-shadow: 0 15px 30px rgba(15, 23, 42, 0.4);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.imovie-toolbar {
  background: linear-gradient(to bottom, #FCF, #FCF);
  padding: 8px 10px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #0f172a;
}
.window-buttons {
  display: flex;
  gap: 6px;
}
.window-buttons span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.btn-close { background: #ff5f56; }
.btn-minimize { background: #ffbd2e; }
.btn-zoom { background: #27c93f; }
.imovie-title {
  flex-grow: 1;
  text-align: center;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 500;
}
.imovie-content {
  background: #020617;
  padding: 8px;
  display: flex;
  justify-content: center;
}
</style>


>>To change the video in the screen you can go to the youtube video you want, go to share and embed and copy all that code. Then replace this line of code with the one you've copied. then change the width to 400 and height to 225 to fit the ratio.<<





Fortune 


<div class="origami-widget">

  <div class="origami-title">Let Fate Decide</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:#FFC0CB;" onclick="openFortune('Youll never know if you dont go.')">Pink</div>

    <div class="origami-tab" style="background:#008080;" onclick="openFortune('You are stronger than you think.')">Teal</div>

    <div class="origami-tab" style="background:#800080;" onclick="openFortune('Every metamorphosis is a promise')">purple</div>

    <div class="origami-tab" style="background:#c7ceea;" onclick="openFortune('You can go further if you confront what scares you.')">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>

Mood board 



<div class="status-badge">

  <div class="badge-header">What are the vibes?</div>

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

  <div class="status-item"><b>Drinking:</b> smoothie</div>

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

</div>


<style>

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

.badge-header { font-weight: bold; color: #008080; 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: #008080; }

</style>










at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)