hi guyssss! I’ve stripped everything off my page and I thought it’d be nice to share some of my saved codes with you guys since a few people asked for a tutorial. plus I'd get to store them here since I’m not using them rn... so enjoy!
｡ﾟ•┈୨♡୧┈• ｡ﾟ
♡ my melody tv ♡
♡ here's the png. ♡
｡ﾟ୨୧｡ﾟ
preview
the screen size is adjustable btw, just in case you want to change the png!
｡ﾟ•┈୨♡୧┈• ｡ﾟ
go to your dashboard, click layout > add a gadget >
html/java script, and paste it there ❤
<![CDATA[
<div class="mymelody-tracker-container">
<!-- 1. YOUR GIFS -->
<div class="screen-content">
<img alt="Show 1" class="tracker-media active" src="LINK" />
<img alt="Show 2" class="tracker-media" src="LINK" />
<img alt="Show 3" class="tracker-media" src="LINK" />
</div>
<!-- 2. COMPUTER FRAME OVERLAY -->
<img alt="My Melody Computer" class="computer-frame" src="LINK" />
</div>
<style>
/* Main Box Layout */
.mymelody-tracker-container {
position: relative;
display: block;
width: 100%;
max-width: 700px;
margin: 0 auto;
}
/* Computer Frame Styling */
.computer-frame {
display: block;
width: 100%;
height: auto;
position: relative;
z-index: 2;
pointer-events: none;
}
/* Screen Content Box - Expanded to fill the right and bottom white gaps */
.screen-content {
position: absolute;
top: 10%;
left: 15.10%;
width: 47%; /* adjustable to stretch to the right edge */
height: 56%; /* adjustable to stretch to the bottom edge */
z-index: 1;
background: #000;
overflow: hidden;
}
/* Individual Image/GIF Scaling & Fade Transitions */
.tracker-media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
/* Displays the active show */
.tracker-media.active {
opacity: 1;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const rotationSpeed = 3000;
const images = document.querySelectorAll('.tracker-media');
let currentIndex = 0;
function rotateImages() {
if (images.length === 0) return;
images[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % images.length;
images[currentIndex].classList.add('active');
}
setInterval(rotateImages, rotationSpeed);
});
</script>
]]>
Copy Code
♡ falling effect ♡
preview
｡ﾟ୨୧｡ﾟ
❤ this is a CSS code! I usually use the imagepaste.org site to
convert any gif to url. it also works for png ❤
｡ﾟ•┈୨♡୧┈• ｡ﾟ
to use it, go to your dashboard, click theme > customise >
advanced > add css, and paste it there ❤
<![CDATA[
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
pointer-events: none;
opacity: 0.3; /* Adjust faintness here */
/* The Single GIF Link */
background-image: url('YOUR GIF');
/* Creates massive breathing room between the repeating GIFs */
background-size: 180px 240px;
background-repeat: repeat;
animation: scatteredFall 12s linear infinite;
}
@keyframes scatteredFall {
0% {
background-position: 0px 0px;
}
100% {
/* Drifts down and diagonally to make it look organic */
background-position: 180px 960px;
}
}
]]>
Copy Code
♡ polaroid reading tracker ♡
preview
every time you log your progress, the last updated date
refreshes automatically!
｡ﾟ•┈୨♡୧┈• ｡ﾟ
go to your dashboard, click layout > add a gadget >
html/java script, and paste it there ❤
<![CDATA[
<!-- Styling for the Tiny Polaroid Widget with Matching Caramel Brown Fonts -->
<style>
.polaroid-container {
max-width: 140px; /* Shrunk significantly to fit your narrow sidebar */
margin: 10px auto;
background: #ffffff;
padding: 8px 8px 12px 8px; /* Tighter padding for a small footprint */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
border: 1px solid #eaeaea;
transform: rotate(-1deg);
}
.polaroid-cover-wrapper {
position: relative; /* Allows the clip to anchor to the cover box */
width: 100%;
}
.polaroid-cover {
width: 100%;
aspect-ratio: 2 / 3;
object-fit: cover;
background-color: #f7f7f7;
display: block;
}
/* Soft Pink, Semi-Transparent Flipped Page Clip Layout */
.polaroid-goal-clip {
position: absolute;
top: 12px;
right: -12px;
background: rgba(244, 143, 177, 0.85);
color: #ffffff;
font-size: 8px;
font-weight: bold;
padding: 4px 6px 4px 10px;
border-radius: 12px 0px 0px 12px;
border: none;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08);
z-index: 10;
white-space: nowrap;
}
/* Compact Soft Pink Progress Bar Styling */
.polaroid-progress {
margin-top: 8px;
display: flex;
align-items: center;
gap: 4px;
}
.polaroid-progress-bg {
background: #fce7f3;
border-radius: 99px;
height: 5px;
flex: 1;
overflow: hidden;
}
.polaroid-progress-fill {
background: #f48fb1;
height: 100%;
border-radius: 99px;
}
/* Progress numbers changed to matching caramel brown font color */
.polaroid-progress-text {
font-size: 9px;
font-weight: bold;
color: #b37c57;
}
/* Soft Divider Line under the bar */
.polaroid-divider {
border: 0;
border-top: 1px solid #fce7f3;
margin: 8px 0 6px 0;
}
/* Thoughts Caption Styling changed to matching caramel brown font color */
.polaroid-caption {
text-align: center;
font-size: 10px;
color: #b37c57; /* changeable! */
line-height: 1.4;
word-wrap: break-word;
font-weight: 500;
}
/* Monospace Sub-date stamp sitting right underneath the container */
.polaroid-date-stamp {
font-family: inherit !important; /* Matches your status font perfectly */
font-size: 10px;
color: #b37c57; /* changeable! */
margin: 6px 0 0 0;
text-transform: lowercase;
letter-spacing: 0.3px;
display: block;
text-align: center;
font-weight: normal;
}
</style>
<!-- Widget Content -->
<div class="polaroid-wrapper-block">
<div class="polaroid-container">
<div class="polaroid-cover-wrapper">
<!-- 1. YOUR GOAL TRACKER CORNER CLIP -->
<div class="polaroid-goal-clip" id="pol-goal-data">
📚 00/00
</div>
<!-- 2. PASTE YOUR BOOK COVER URL HERE -->
<img alt="Book Cover" class="polaroid-cover" id="pol-cover-data" src="LINK" />
</div>
<!-- 3. UPDATE THE PROGRESS PERCENTAGE IN BOTH PLACES BELOW -->
<div class="polaroid-progress">
<div class="polaroid-progress-bg">
<div class="polaroid-progress-fill" style="width: [change your progress here]%;"></div>
</div>
<span class="polaroid-progress-text" id="pol-progress-data">[change your progress here]%</span>
</div>
<!-- Divider Line -->
<hr class="polaroid-divider" />
<!-- 4. EDIT YOUR THOUGHTS HERE -->
<div class="polaroid-caption" id="pol-caption-data">
HERE
</div>
</div>
<!-- Outside/Underneath: Automatic lowercase date stamp -->
<p class="polaroid-date-stamp" id="auto-polaroid-date">last updated: loading...</p>
</div>
<script>
(function() {
// Collect the dynamic details from the widget elements above
var currentGoal = document.getElementById("pol-goal-data") ? document.getElementById("pol-goal-data").innerText.trim() : "";
var currentCover = document.getElementById("pol-cover-data") ? document.getElementById("pol-cover-data").getAttribute("src").trim() : "";
var currentProgress = document.getElementById("pol-progress-data") ? document.getElementById("pol-progress-data").innerText.trim() : "";
var currentCaption = document.getElementById("pol-caption-data") ? document.getElementById("pol-caption-data").innerText.trim() : "";
// Combine everything into a single text fingerprint string
var currentFingerprint = currentGoal + "|" + currentCover + "|" + currentProgress + "|" + currentCaption;
var storedFingerprint = localStorage.getItem("reading_polaroid_fingerprint");
var storedDate = localStorage.getItem("reading_polaroid_date");
// Helper function to format date seamlessly like "oct 14"
function formatCurrentDate() {
var d = new Date();
var months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];
return months[d.getMonth()] + " " + d.getDate();
}
// If the widget text is different from what we saved last time, update the date stamp
if (currentFingerprint !== storedFingerprint || !storedDate) {
storedDate = formatCurrentDate();
localStorage.setItem("reading_polaroid_fingerprint", currentFingerprint);
localStorage.setItem("reading_polaroid_date", storedDate);
}
// Inject the final automated date string
document.getElementById("auto-polaroid-date").innerText = "last updated: " + storedDate;
})();
</script>
]]>
Copy Code
♡ archive diary ♡
｡ﾟ୨୧｡ﾟ
preview
｡ﾟ•┈୨♡୧┈• ｡ﾟ
go to your dashboard, click layout > add a gadget >
html/java script, and paste it there ❤
<![CDATA[
<div class="whimsi-folder-archive">
<!-- The Folder Index Tab using love symbols -->
<div class="folder-tab">♡ diary index ♡</div>
<!-- Main Folder Body -->
<div class="folder-body">
<div class="folder-inner-grid">
<span class="folder-heart-accent">♡♡♡</span>
<p class="folder-meta">select diary entry date...</p>
<div class="folder-drawers">
<!-- Month Selection Layer (Label on Top) -->
<div class="file-stack">
<label class="file-label" for="folderMonth">♡ month:</label>
<select class="folder-select" id="folderMonth">
<option value="">♡ all months ♡
<option value="01">🏔️ january ♡
<option value="02">💌 february ♡
<option value="03">🍃 march ♡
<option value="04">🌸 april ♡
<option value="05">🐝 may ♡
<option value="06">🏖️ june ♡
<option value="07">☀️ july ♡
<option value="08">👙 august ♡
<option value="09">🍂 september ♡
<option value="10">🎃 october ♡
<option value="11">🧣 november ♡
<option value="12">🌬️ december ♡
</option></option></option></option></option></option></option></option></option></option></option></option></option></select>
</div>
<!-- Year Selection Layer (Label on Top) -->
<div class="file-stack">
<label class="file-label" for="folderYear">♡ year:</label>
<select class="folder-select" id="folderYear">
<option value="2026">♡ 2026 ♡
<option value="2025">♡ 2027 ♡
<option value="2024">♡ 2028 ♡
</option></option></option></select>
</div>
</div>
<!-- Action button with love symbols -->
<button class="folder-open-btn" onclick="openFolderArchive()">
★ open diary entries ★
</button>
</div>
</div>
</div>
<style>
/* Base layout setup */
.whimsi-folder-archive {
max-width: 210px;
margin: 25px auto 15px auto;
font-family: "Courier New", Courier, monospace;
text-align: center;
position: relative;
}
/* File Folder Index Tab */
.folder-tab {
background-color: #ffccd5;
color: #ffffff;
font-size: 10px;
font-weight: bold;
display: inline-block;
padding: 5px 12px 3px 12px;
border-radius: 8px 8px 0 0;
position: absolute;
top: -20px;
left: 8px;
letter-spacing: 0.5px;
box-shadow: 2px -2px 5px rgba(255, 204, 213, 0.3);
}
/* Main Dynamic Folder Container */
.folder-body {
background: #ffffff;
border: 2px solid #ffccd5;
border-radius: 0 14px 14px 14px;
padding: 12px 10px;
box-shadow: 0 5px 15px rgba(255, 204, 213, 0.4);
position: relative;
z-index: 2;
}
/* Soft background grid texture */
.folder-inner-grid {
background-image: radial-gradient(#fff0f2 1.5px, transparent 1.5px);
background-size: 8px 8px;
padding: 6px;
border-radius: 8px;
}
.folder-heart-accent {
font-size: 10px;
color: #ff7893;
display: block;
margin-bottom: 2px;
}
.folder-meta {
font-size: 9px;
color: #cca2ac;
margin: 0 0 14px 0;
font-style: italic;
}
.folder-drawers {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 14px;
}
/* Stacks elements vertically so labels stay perfectly on top */
.file-stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.file-label {
font-size: 10px;
color: #ff7893;
font-weight: bold;
text-align: left;
padding-left: 2px;
}
/* Miniature drop-down selector mechanics */
.folder-select {
width: 100%;
border: 1px dashed #ffe3e7;
background: #fff5f7;
color: #7d686c;
font-family: inherit;
font-size: 10px;
outline: none;
cursor: pointer;
padding: 5px;
border-radius: 6px;
box-sizing: border-box;
}
.folder-select:hover, .folder-select:focus {
background: #ffe3e7;
color: #ff7893;
border-style: solid;
}
/* Action submission button */
.folder-open-btn {
background: #ffffff;
color: #ff7893;
border: 1px solid #ffccd5;
padding: 6px 0;
border-radius: 12px;
font-size: 10px;
font-family: inherit;
cursor: pointer;
width: 100%;
transition: all 0.2s ease-in-out;
box-shadow: 0 2px 5px rgba(255, 204, 213, 0.2);
}
.folder-open-btn:hover {
background: #ffccd5;
color: #ffffff;
box-shadow: 0 4px 10px rgba(255, 120, 147, 0.25);
transform: translateY(-1px);
}
.folder-open-btn:active {
transform: translateY(1px);
}
</style>
<script>
function openFolderArchive() {
var selectedMonth = document.getElementById('folderMonth').value;
var selectedYear = document.getElementById('folderYear').value;
if (!selectedYear) {
alert("♡ Please select a year to open! ♡");
return;
}
var urlBase = window.location.protocol + "//" + window.location.hostname;
var targetDestination = urlBase + "/" + selectedYear + "/";
if (selectedMonth) {
targetDestination += selectedMonth + "/";
}
window.location.href = targetDestination;
}
</script>
]]>
Copy Code
OR if you'd rather have the calendar version that tracks the posting date...!
preview
｡ﾟ•┈୨♡୧┈• ｡ﾟ
go to your dashboard, click layout > add a gadget >
html/java script, and paste it there ❤
<![CDATA[
<!-- Square Grid Archive Calendar -->
<div style="background: #ffffff; border-radius: 14px; border: 2.5px solid #ffccd5; box-sizing: border-box; display: block !important; font-family: inherit, 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif; margin: 10px auto; max-width: 260px; overflow: hidden; padding: 12px; width: 100%;">
<!-- Title Track Header Card Layout -->
<div style="color: #88606c; display: block !important; font-size: 7px; font-weight: bold; letter-spacing: 2px; padding: 2px 4px 10px 4px; text-align: center; text-transform: uppercase;">
</div>
<!-- Creamy Ivory Navigation Strip Bar Container -->
<div style="align-items: center !important; background: #fffdf0; border-radius: 6px; border: 1.5px solid #ffeeb5; box-sizing: border-box; color: #88606c; display: flex !important; font-size: 11px; font-weight: bold; justify-content: space-between !important; margin-bottom: 12px; padding: 6px 12px;">
<span id="wb-prev-btn" style="color: #ffccd5; cursor: pointer; font-size: 12px; font-weight: bold; user-select: none;">♡</span>
<span id="cal-month-year-label" style="font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;">-</span>
<span id="wb-next-btn" style="color: #ffccd5; cursor: pointer; font-size: 12px; font-weight: bold; user-select: none;">♡</span>
</div>
<!-- Weekday Labels Forced 7-Column Grid Header Track -->
<div style="display: grid !important; gap: 4px !important; grid-template-columns: repeat(7, 1fr) !important; margin-bottom: 6px !important; text-align: center !important;">
<span style="color: #88606c; font-size: 11px; font-weight: bold; text-transform: uppercase;">s</span>
<span style="color: #88606c; font-size: 11px; font-weight: bold; text-transform: uppercase;">m</span>
<span style="color: #88606c; font-size: 11px; font-weight: bold; text-transform: uppercase;">t</span>
<span style="color: #88606c; font-size: 11px; font-weight: bold; text-transform: uppercase;">w</span>
<span style="color: #88606c; font-size: 11px; font-weight: bold; text-transform: uppercase;">t</span>
<span style="color: #88606c; font-size: 11px; font-weight: bold; text-transform: uppercase;">f</span>
<span style="color: #88606c; font-size: 11px; font-weight: bold; text-transform: uppercase;">s</span>
</div>
<!-- Calendar Day Cells 7-Column Grid Grid Block -->
<div id="cal-days-main-box" style="background: transparent !important; display: grid !important; gap: 4px !important; grid-template-columns: repeat(7, 1fr) !important;"></div>
<!-- Legend Label Track -->
<div style="border-top: 1.5px dashed #ffccd5; color: #e57399; display: block !important; font-size: 11px; font-weight: bold; margin-top: 12px; padding-left: 2px; padding-top: 10px; text-align: left;">
★ diary entries! tap to read them ♥
</div>
</div>
<script type="text/javascript">
(function() {
var displayTargetDate = new Date();
var blogPostArchiveMap = {};
var dataLoaded = false;
function fetchBlogPosts() {
var script = document.createElement('script');
script.src = '/feeds/posts/summary?alt=json&max-results=500&callback=wbCalendarFeedCallback';
document.body.appendChild(script);
}
window.wbCalendarFeedCallback = function(json) {
if (json.feed && json.feed.entry) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
var postUrlLink = "";
for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel === 'alternate') {
postUrlLink = entry.link[j].href;
break;
}
}
var dateStr = entry.published.$t || entry.updated.$t;
if (dateStr) {
var rawDate = dateStr.substring(0, 10).split("-");
var yr = parseInt(rawDate[0], 10);
var mo = parseInt(rawDate[1], 10) - 1;
var day = parseInt(rawDate[2], 10);
if (!blogPostArchiveMap[yr]) blogPostArchiveMap[yr] = {};
if (!blogPostArchiveMap[yr][mo]) blogPostArchiveMap[yr][mo] = {};
blogPostArchiveMap[yr][mo][day] = postUrlLink;
}
}
}
dataLoaded = true;
buildCrispHdCalendarGrid();
};
function buildCrispHdCalendarGrid() {
var yr = displayTargetDate.getFullYear();
var mo = displayTargetDate.getMonth();
var todayReal = new Date();
var monthLabels = ["🏔️JAN", "💌FEB", "🍃MAR", "🌷APR", "🐝MAY", "🏖️JUN", "☀️JUL", "👙AUG", "🍂SEP", "🎃OCT", "🧣NOV", "🌬️DEC"];
var headerLabel = document.getElementById('cal-month-year-label');
if (headerLabel) headerLabel.innerHTML = monthLabels[mo] + " " + yr;
var targetBox = document.getElementById('cal-days-main-box');
if (!targetBox) return;
var paddingOffsetSpaces = new Date(yr, mo, 1).getDay();
var totalDaysCount = new Date(yr, mo + 1, 0).getDate();
var htmlGridContent = "";
// Print empty padding blocks to push dates to their correct day columns
for (var p = 0; p < paddingOffsetSpaces; p++) {
htmlGridContent += "<span style='aspect-ratio: 1/1 !important; display: block !important; background: transparent !important; border: none !important;'></span>";
}
// Render day structural blocks dynamically
for (var day = 1; day <= totalDaysCount; day++) {
var isToday = (day === todayReal.getDate() && mo === todayReal.getMonth() && yr === todayReal.getFullYear());
// Uses aspect-ratio: 1/1 to lock perfect square behavior securely
var cellStyle = "aspect-ratio: 1/1 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #ffffff !important; border: 1.5px solid #fff0f2 !important; border-radius: 5px !important; box-sizing: border-box !important; font-size: 11px !important; color: #bfaeb2 !important;";
if (isToday) {
cellStyle = "aspect-ratio: 1/1 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #eef9ff !important; border: 1.5px solid #b3e5fc !important; border-radius: 5px !important; box-sizing: border-box !important; font-size: 11px !important; color: #0288d1 !important; font-weight: bold !important;";
}
var postUrlLink = (blogPostArchiveMap[yr] && blogPostArchiveMap[yr][mo]) ? blogPostArchiveMap[yr][mo][day] : null;
if (postUrlLink) {
var entryStyle = "aspect-ratio: 1/1 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #ffeaf0 !important; border: 1.5px solid #ffb3c6 !important; border-radius: 5px !important; box-sizing: border-box !important; font-size: 11px !important; font-weight: bold !important;";
htmlGridContent += '<span style="' + entryStyle + '"><a href="' + postUrlLink + '" style="color: #e57399 !important; text-decoration: none !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important;">' + day + '</a></span>';
} else {
htmlGridContent += '<span style="' + cellStyle + '">' + day + '</span>';
}
}
targetBox.innerHTML = htmlGridContent;
}
var safetyMountLoopCounter = 0;
var initialMountCheckInterval = setInterval(function() {
safetyMountLoopCounter++;
var elCheck = document.getElementById('cal-days-main-box');
if (elCheck) {
clearInterval(initialMountCheckInterval);
fetchBlogPosts();
buildCrispHdCalendarGrid();
document.getElementById('wb-prev-btn').onclick = function() {
displayTargetDate.setMonth(displayTargetDate.getMonth() - 1);
buildCrispHdCalendarGrid();
};
document.getElementById('wb-next-btn').onclick = function() {
displayTargetDate.setMonth(displayTargetDate.getMonth() + 1);
buildCrispHdCalendarGrid();
};
}
if (safetyMountLoopCounter > 40) clearInterval(initialMountCheckInterval);
}, 100);
})();
</script>
]]>
Copy Code
♡ pop up msg ♡
preview
｡ﾟ•┈୨♡୧┈• ｡ﾟ
go to your dashboard, click layout > add a gadget >
html/java script, and paste it there ❤
<![CDATA[
<!-- ========================================================= -->
<!-- 1. THE LAYOUT STRUCTURE (HTML) -->
<!-- Replace the placeholders inside quotes with your image URLs -->
<!-- ========================================================= -->
<div class="gate-overlay" id="entranceGate" style="display: none;">
<!-- Main Horizontal Rectangle Popup Box with Custom Background Image -->
<div class="horizontal-popup" style="background-image: url('YOUR PNG');">
<!-- STICKER LAYER SAFELY CONSTRAINED INSIDE THE POPUP BOX -->
<div class="stickers-layer">
<!-- Top-left circle sticker -->
<img alt="Left sticker" class="sticker-item" src="YOUR PNG" style="left: 18%; top: 60%; width: 90px;" />
<!-- Bottom-left sticker -->
<img alt="sticker" class="sticker-item" src="YOUR PNG" style="left: 18%; top: 85%; width: 90px;" />
<!-- Bottom-right sticker -->
<img alt="sticker" class="sticker-item" src="YOUR PNG" style="left: 87%; top: 83%; width: 90px;" />
</div>
<!-- TOP: Your "Welcome to my page" Image Header (Centered) -->
<div class="popup-header-img">
<img alt="pic" class="heading-pic" src="YOUR PNG" />
</div>
<!-- MIDDLE: Text Caption -->
<div class="popup-caption-text">
<p>♡ leave your msg here ♡</p>
</div>
<!-- BOTTOM: Your Clickable "Enter" Button Image & Heart Label (Centered) -->
<div class="popup-enter-container">
<div class="popup-enter-action">
<a href="javascript:void(0);" onclick="enterBlog()">
<img alt="Enter Blog" class="enter-btn-pic" src="YOUR PNG" />
</a>
</div>
<!-- Heart label placed neatly right below the enter image -->
<p class="tap-label">♡ tap me to enter ♡</p>
</div>
</div>
</div>
<!-- ========================================================= -->
<!-- 2. THE STYLING & SOFT PINK TRANSPARENCY (CSS) -->
<!-- ========================================================= -->
<style>
/* Fills the whole screen with a soft pink tint that peeks through clearly */
.gate-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(255, 230, 238, 0.55); /* Soft pink, semi-transparent background tint */
backdrop-filter: blur(0px); /* Clean transparency - no blur effect to keep blog sharp */
z-index: 999999; /* Keeps it strictly on top of your layout */
display: flex;
align-items: center;
justify-content: center;
}
/* The wide horizontal layout rectangle container card */
.horizontal-popup {
position: relative; /* Anchor framework for the absolute positions */
width: 90%;
max-width: 550px; /* Wide box configuration */
height: auto;
min-height: 350px;
background-color: transparent !important; /* Explicitly forces container transparent */
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
border-radius: 16px;
padding: 30px;
display: flex;
flex-direction: column;
align-items: center; /* Centers all items horizontally */
justify-content: space-between; /* Spreads components top to bottom evenly */
box-sizing: border-box;
/* Pins the glowing effect safely to the card container border perimeter only */
box-shadow: 0px 0px 30px 10px rgba(255, 140, 175, 0.65),
0px 0px 15px 2px rgba(255, 185, 205, 0.4);
}
/* Absolute Positioning Layer for Stickers */
.stickers-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* Allows clicks to bypass stickers straight to elements below */
z-index: 1; /* Places images behind the text layers to avoid overlaps */
}
.sticker-item {
position: absolute;
height: auto;
transform: translate(-50%, -50%); /* Locks coordinates to the dead-center of the stickers */
}
/* Centered Header image adjustments */
.popup-header-img {
position: relative;
z-index: 2;
width: 100%;
max-width: 380px;
display: flex;
justify-content: center;
margin-bottom: 10px;
}
.heading-pic {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
/* The text caption layout settings */
.popup-caption-text {
position: relative;
z-index: 2;
width: 92%; /* Widened text box container slightly for custom text flow look */
font-family: inherit; /* Dynamically steals your Blogspot system theme fonts */
font-size: 14px;
color: #555555;
text-align: center; /* Centers the words */
line-height: 1.5;
margin: 28px 0 11px 0;
top: -7px;
}
/* Bottom Container to group the smaller image and the text label together */
.popup-enter-container {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-top: 10px;
}
/* Made smaller: max-width adjusted from 180px down to 120px */
.popup-enter-action {
width: 100%;
max-width: 100px;
display: flex;
justify-content: center;
}
.popup-enter-action a {
display: flex;
width: 100%;
max-width: 100px;
text-align: center;
transition: transform 0.15s ease;
justify-content: center;
}
/* Squash compression animation effect when pressed */
.popup-enter-action a:active {
transform: scale(0.95);
}
.enter-btn-pic {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
cursor: pointer;
}
/* Styling for the tap label under the image */
.tap-label {
font-family: inherit; /* Uses your Blogspot system font */
font-size: 12px;
color: #ff7597;
margin: 5px 0 0 0;
text-align: center;
font-weight: bold;
letter-spacing: 0.5px;
}
</style>
<!-- ========================================================= -->
<!-- 3. THE DISMISS TRIGGER ACTION & SESSION REMEMBER LOGIC -->
<!-- ========================================================= -->
<script>
// Check tab memory as soon as layout scripts initialize
document.addEventListener("DOMContentLoaded", function() {
var hasEnteredBefore = sessionStorage.getItem("blogGatePassed");
var targetGate = document.getElementById("entranceGate");
// Only display gate if they haven't clicked enter during this tab session
if (!hasEnteredBefore && targetGate) {
targetGate.style.display = "flex";
}
});
function enterBlog() {
// Vanishes the entrance cover screen completely when button clicked
document.getElementById("entranceGate").style.display = "none";
// Set a storage flag token that expires when the tab closes
sessionStorage.setItem("blogGatePassed", "true");
}
</script>
]]>
Copy Code
♡ bookshelf ♡
｡ﾟ୨୧｡ﾟ
actually if it were up to me, I’d probably gatekeep this gadget code
bcs it's very personal and the project I'm most proud of. but then again
it feels like an honour to share it with you guys <3
preview
｡ﾟ•┈୨♡୧┈• ｡ﾟ
go to your dashboard, click layout > add a gadget >
html/java script, and paste it there ❤
<![CDATA[
<div class="sidebar-peg-shelf">
<div class="shelf-wrapper">
<!-- Top Items Row -->
<div class="shelf-top-items">
<!-- LEFT SHELF SIDE GROUPS -->
<div class="left-books-group">
<div class="flat-stack">
<!-- ==================== FLAT BOOK 1 ==================== -->
<!-- CUSTOMIZE IMAGES HERE: openShelfInfo('BOOK_COVER_IMAGE_URL') -->
<div class="sk-book-flat b-pink-1" onclick="openShelfInfo('https://gr-assets.com')">
<span>Book 1</span>
</div>
<!-- ==================== FLAT BOOK 2 ==================== -->
<div class="sk-book-flat b-pink-2" onclick="openShelfInfo('YOUR BOOK COVER')">
<span>Book 2</span>
</div>
</div>
<!-- Upright Standing Books -->
<!-- ==================== BOOK 3 ==================== -->
<div class="sk-book-upright b-cream" onclick="openShelfInfo('YOUR BOOK COVER')"><span>Book 3</span></div>
<!-- ==================== BOOK 4 ==================== -->
<div class="sk-book-upright b-pink-1" onclick="openShelfInfo('YOUR BOOK COVER')"><span>Book 4</span></div>
<!-- ==================== BOOK 5 ==================== -->
<div class="sk-book-upright b-pink-3" onclick="openShelfInfo('YOUR BOOK COVER')"><span>Book 5</span></div>
</div>
<!-- Center Accents: Chando Succulent Pink Pot & Lit Candle -->
<div class="center-accents">
<div class="mini-succulent-pot">
<div class="succulent-leaves">
<div class="s-leaf sl-1"></div>
<div class="s-leaf sl-2"></div>
<div class="s-leaf sl-3"></div>
<div class="s-leaf sl-4"></div>
<div class="s-leaf sl-5"></div>
</div>
<div class="pink-pot-rim"></div>
<div class="pink-pot-base"></div>
</div>
<div class="mini-candle">
<div class="candle-flame"></div>
<div class="candle-wax"></div>
</div>
</div>
<!-- Right Straight Books Pair -->
<div class="right-books-group">
<!-- ==================== BOOK 6 ==================== -->
<div class="sk-book-upright b-pink-2" onclick="openShelfInfo('YOUR BOOK COVER')"><span>Book 6</span></div>
<!-- ==================== BOOK 7 ==================== -->
<div class="sk-book-upright b-cream" onclick="openShelfInfo('YOUR BOOK COVER')"><span>Book 7</span></div>
<!-- ==================== BOOK 8 ==================== -->
<div class="sk-book-upright b-pink-1" onclick="openShelfInfo('YOUR BOOK COVER')"><span>Book 8</span></div>
</div>
<!-- THE GLOBAL FULL-SCREEN MODAL LAYOUT -->
<div id="global-book-overlay" style="align-items: center; background: rgba(255,245,247,0.45); display: none; height: 100vh; justify-content: center; left: 0; position: fixed; top: 0; width: 100vw; z-index: 99999999;">
<div style="background: #ffffff; border-radius: 16px; border: 2px dashed #ffdae3; box-shadow: 0 10px 25px rgba(255,182,193,0.4); box-sizing: border-box; padding: 24px 20px 20px 20px; position: relative;">
<button onclick="closeGlobalBookCover()" style="background: none; border: none; color: lightpink; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; position: absolute; right: 12px; top: 8px;">✕</button>
<div style="align-items: center; display: flex; justify-content: center;">
<img alt="Book Cover" id="global-popup-cover-img" src="" style="border-radius: 8px; border: 2px solid #ffffff; box-shadow: 0 4px 10px rgba(255,182,193,0.3); display: block; height: 195px; object-fit: cover; outline: 1px solid #ffdae3; width: 130px;" />
</div>
</div>
</div>
<script>
// Exposes code window actions cleanly to make the click pop up instantly
window.showGlobalBookCover = function(coverUrl) {
var imgEl = document.getElementById('global-popup-cover-img');
if (imgEl) {
imgEl.src = coverUrl || '';
document.getElementById('global-book-overlay').style.display = 'flex';
}
};
window.closeGlobalBookCover = function() {
document.getElementById('global-book-overlay').style.display = 'none';
};
</script>
</div>
<!-- Long Pink Wood Shelf Board Plinth -->
<div class="main-plank"></div>
<!-- Long Hanging Panel (Hearts only) -->
<div class="backing-panel">
<div class="heart-window"></div>
<div class="heart-window"></div>
<div class="heart-window"></div>
<div class="heart-window"></div>
</div>
</div>
<!-- Instruction Text Underneath the Shelf -->
<div class="shelf-instruction">★ click books to view</div>
</div>
<style>
/* Sidebar Width sizing */
.sidebar-peg-shelf {
position: relative;
width: 78%;
max-width: 143px;
margin: 10px auto;
background: transparent;
box-sizing: border-box;
font-family: inherit;
}
.shelf-wrapper {
position: relative;
width: 100%;
display: flex;
flex-direction: column;
}
.shelf-top-items {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 0 4px;
margin-bottom: -1px;
z-index: 10;
}
.left-books-group, .right-books-group { display: flex; align-items: flex-end; }
.flat-stack { display: flex; flex-direction: column-reverse; gap: 1px; margin-right: 2px; }
.sk-book-flat {
width: 32px; height: 7px; border: 1px solid #7d6b67; border-radius: 1px;
display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sk-book-flat span { font-size: 5.5px; font-weight: bold; color: #7d505c; transform: scale(0.9); pointer-events: none; }
.sk-book-upright {
width: 9px; height: 32px; border: 1px solid #7d6b67; border-radius: 1px 1px 0 0; margin-left: -1px;
display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.1s ease;
}
.sk-book-upright:hover { transform: translateY(-2px); }
.sk-book-upright span { font-size: 6px; font-weight: 600; color: #7d505c; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; pointer-events: none; }
.center-accents { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 1px; }
.mini-succulent-pot { display: flex; flex-direction: column; align-items: center; position: relative; }
.succulent-leaves { width: 14px; height: 12px; position: relative; margin-bottom: -2px; z-index: 1; }
.s-leaf { position: absolute; background: #a9beae; border: 0.75px solid #6c7d71; border-radius: 50% 50% 40% 40%; }
.sl-1 { width: 5px; height: 9px; left: 4.5px; bottom: 0; z-index: 5; }
.sl-2 { width: 4.5px; height: 8px; left: 1px; bottom: 1px; transform: rotate(-25deg); z-index: 4; }
.sl-3 { width: 4.5px; height: 8px; right: 1px; bottom: 1px; transform: rotate(25deg); z-index: 4; }
.sl-4 { width: 4px; height: 7px; left: -1px; bottom: 2px; transform: rotate(-50deg); z-index: 3; }
.sl-5 { width: 4px; height: 7px; right: -1px; bottom: 2px; transform: rotate(50deg); z-index: 3; }
.pink-pot-rim { width: 13px; height: 2.5px; background: #ffccd5; border: 1px solid #7d6b67; border-radius: 1.5px; z-index: 2; }
.pink-pot-base { width: 11px; height: 9px; background: #ffccd5; border: 1px solid #7d6b67; border-top: none; border-radius: 0 0 3px 3px; margin-top: -1px; z-index: 2; }
.mini-candle { display: flex; flex-direction: column; align-items: center; }
.candle-flame { width: 3px; height: 5px; background: #ffb703; border-radius: 50% 50% 20% 20%; animation: flicker 1s infinite alternate; }
.candle-wax { width: 8px; height: 10px; background: #fff0f3; border: 1px solid #7d6b67; border-radius: 1px; }
@keyframes flicker { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.15); opacity: 1; } }
.b-pink-1 { background: #ffccd5; }
.b-pink-2 { background: #ffb3c1; }
.b-pink-3 { background: #ff85a1; }
.b-cream { background: #fff0f3; }
.main-plank { height: 7px; background: #ffe5ec; border: 1px solid #fbc4d2; border-radius: 2px; z-index: 3; }
.backing-panel { width: calc(100% - 12px); margin: -1px auto 0 auto; background: #fff0f3; border: 1px solid #fbc4d2; border-top: none; border-radius: 0 0 4px 4px; display: flex; align-items: center; justify-content: space-around; padding: 8px 4px 6px 4px; box-sizing: border-box; z-index: 1; }
.heart-window { position: relative; width: 9px; height: 9px; background: #ffffff; transform: rotate(45deg); }
.heart-window::before, .heart-window::after { content: ""; position: absolute; width: 9px; height: 9px; background: #ffffff; border-radius: 50%; }
.heart-window::before { left: -4.5px; }
.heart-window::after { top: -4.5px; }
.shelf-instruction { width: 100%; text-align: center; font-size: 9px; color: #d68297; margin-top: 6px; font-style: italic; letter-spacing: 0.5px; }
</style>
<script>
function openShelfInfo(coverImg) {
// Routes the event cleanly to your top window layout level to dodge the frame blocker block
if (window.parent && window.parent.showGlobalBookCover) {
window.parent.showGlobalBookCover(coverImg);
} else if (window.top && window.top.showGlobalBookCover) {
window.top.showGlobalBookCover(coverImg);
}
}
</script>
]]>
Copy Code
｡ﾟyou can adjust the width of the shelf to suit your preferences! ｡ﾟ
｡ﾟ•┈୨♡୧┈• ｡ﾟ
that's all for now! I unfortunately lost a few of my fave gadget codes bcs I never thought I'd be making this page. so I can only share the codes I was able to save. hope these help! these codes are fully tested before sharing but lmk if you have any trouble with them!
last updated [october 24, 2026]
tysm for sharing this! I added the calendar to my blog, and I've been trying for ages, so thank you for the codes! I'll add something else eventually, check it out if you want to <3 Love from https://emoglobina5.blogspot.com/
ReplyDeleteaww I hope you're liking it <3 you can also change the colour actually^^ I forgot to include it in my post but I'll update the post soon!! (ʃƪ＾3＾）
Delete