Diary of an Indigenous Diva: 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)

Poll Widget

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

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

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

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="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-title">COZY FORTUNE 🌸</div>

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

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...";

}