Alivia.GR: Diaries of a Writer: Blog Codes

Here are some of the blog codes I've used and where I originally found them!

CURSER:

I copied a code directly from the below website, and I added it straight into the CSS section in Blogger, Customise.

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

PAINT WIDGET

I copied this code directly from a tiktok comment!

GOODREADS

To embed goodreads straight into a blog, just grab the HTML code from your account (under Grid Widgets) and paste it into Blogger, Layout, as it's own widget.

Tutorial from:

https://chapterbreak.net/2015/11/23/how-to-embed-a-goodreads-shelf-into-a-blog-post/

LETTERBOXD

To embed letterboxd straight into the blog, you'll need to take your profile link and put it into this website to generate the HTML code. With the code, you then paste it into Blogger, Layout, as it's own widget.

https://letterboxd-embed.timcieplowski.com/

CHATBOX

I used the below website to generate an HTML code to embed a chat on the blog page. Insert this code into Blogger, Layout, as it's own widget.

https://www.cbox.ws/

CUSTOM FOLLOW LINK

Used this tutorial to add a follow button that matched the blog's aesthetic.

https://support.google.com/blogger/thread/241108333/how-to-customize-the-follow-button-using-css?hl=en

IMAGES FOR TABS

I directly copied Diary of an indigenous Diva's tutorial for this, the original code is on her page and my modification is below (https://indigenousdivadiary.blogspot.com/p/blog-codes.html)

<style>

.image-tabs {

display: flex;

justify-content: center;

align-items: flex-start;

gap: 20px;

flex-wrap: wrap;

padding: 12px;

max-width: 100%;

}

.image-tabs a {

display: flex;

flex-direction: column;

align-items: center;

width: 100px;

text-decoration: none !important;

color: inherit;

transition: opacity 0.2s ease;

}

.image-tabs a:hover {

opacity: 0.75;

}

.image-tabs img {

width: 100px;

height: 100px;

object-fit: cover;

display: block;

border: none;

}

.image-tabs span {

margin-top: 8px;

font-size: 13px;

text-align: center;

font-weight: normal;

}

</style>

</a>

<span>About Me</span>

</a>

<span>General Posts</span>

</a>

<span>Mini Dives</span>

</a>

<span>Journal Prompts</span>

</a>

<span>Recommend</span>

</a>

<span>Blog Codes</span>

</a>

</div>

ORACLE FORTUNES:

I wrote this code, using inspiration from Diary of an indigenous Diva (https://indigenousdivadiary.blogspot.com/p/blog-codes.html) and Reddit (https://www.reddit.com/r/blogspot/).

This should be pasted in Blogger Layout as it's own widget. Replace the titles and fortune texts with your own.

<h2 class="academia-title">The Oracle</h2>

<p class="academia-subtitle">Consult the text. Uncover your fate.</p>

<p id="academia-fortune-text">"Your pages remain unwritten. Click below to break the seal."</p>

</div>

<button class="academia-btn" onclick="generateFortune()">Consult</button>

</div>

<style>

/* --- DARK ACADEMIA STYLING (CCS) --- */

.academia-fortune-container {

display: flex;

justify-content: center;

align-items: center;

padding: 7px;

background-colour: #1a1512; /* Dark mahogany vibe */

font-family: 'Georgia', 'Times New Roman', serif;

}

.academia-card {

background-colour: #f4edd8; /* Vintage parchment paper */

border: 2px solid #5c4033; /* Dark brown trim */

padding: 7px;

max-width: 90px;

text-align: center;

box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.6);

border-radius: 3px;

}

.academia-title {

colour: #2b1d16;

font-size: 11px;

text-transform: uppercase;

letter-spacing: 2px;

margin: 0 0 5px 0;

font-weight: 700;

}

.academia-subtitle {

colour: #5c4033;

font-style: italic;

font-size: 10px;

margin: 0 0 15px 0;

}

.academia-divider {

border: 0;

height: 1px;

background: #5c4033;

width: 60%;

margin: 0 auto 20px auto;

}

.fortune-display-box {

min-height: 30px;

display: flex;

align-items: center;

justify-content: center;

margin-bottom: 20px;

padding: 10px;

border: 1px dashed #a08060;

background-colour: #faf6eb;

}

#academia-fortune-text {

colour: #2b1d16;

font-size: 10px;

line-height: 1.6;

font-style: italic;

margin: 0;

}

.academia-btn {

background-colour: #2b1d16;

colour: #f4edd8;

border: 1px solid #5c4033;

padding: 7px 20px;

font-family: 'Georgia', serif;

font-size: 5px;

text-transform: uppercase;

letter-spacing: 1px;

cursor: pointer;

transition: all 0.3s ease;

}

.academia-btn:hover {

background-colour: #5c4033;

colour: #ffffff;

box-shadow: 0px 4px 8px rgba(0,0,0,0.2);

}

</style>

// --- SCHOLARLY / LITERARY FORTUNES ---

const academiaFortunes = [

"\"Beware of cold coffee and unfinished footnotes.\"",

"\"You will find a new muse in an unexpected place.\"",

"\"Through the chaos you must understand when you are in need of respite.\"",

"\"The secret of your week involves a letter from an old friend.\"",

"\"Like a leather-bound classic, your true value deepens with time. Trust the slow process.\"",

"\"Enjoy the little things in life; read a new book, try a different recipe, sketch a unique doodle.\"",

"\"Burn the midnight oil tonight; an intellectual breakthrough is closer than you think.\"",

"\"In search of your desires, you shall find a troublesome fork. Follow the path of morality.\"",

"\"An autumn wind brings a change in your perspective. Let go of old theories that no longer serve you.\"",

"\"You will soon be forced to choose between the safety of the archive and the adventure of the unknown.\"",

"\"A local thrifting trip will yield a hidden treasure that changes your current creative path.\"",

"\"A question rests within your mind and the answer is...yes, probably.\""

];

function generateFortune() {

const textElement = document.getElementById("academia-fortune-text");

const randomIndex = Math.floor(Math.random() * academiaFortunes.length);

// Add a quick fade effect

textElement.style.opacity = 0;

setTimeout(() => {

textElement.innerHTML = academiaFortunes[randomIndex];

textElement.style.opacity = 1;

}, 100);

}

</script>

BACKGROUND MUSIC

This is another code inspired by Diary of an indigenous Diva, their blog is amazing (https://indigenousdivadiary.blogspot.com/p/blog-codes.html) !!

However, instead of linking Spotify, I downloaded royalty free classical music - pasting the URL's into the code. I downloaded these through https://pixabay.com/

This should be pasted in Blogger Layout as it's own widget. Replace the Artist names, Song titles, and music file URLs with your own.

<div class="gramophone-player"> <div class="player-header">ARCHIVAL AUDIO PRODUCTION</div> <div class="track-info"> <span id="player-composer" class="composer">Frédéric Chopin</span> <span id="player-composition" class="composition"> Nocturne in E-flat major, Op. 9, No. 2 </span> </div>

<div class="player-controls"> <button type="button" id="audio-toggle-btn" class="play-btn" onclick="toggleAcademiaMusic()"> ▶ PLAY AUDIO </button> </div> <div class="track-navigation"> <button type="button" class="nav-btn" onclick="previousTrack()">◀</button>

</div> <div class="playlist-title">SELECT RECORDING</div> <div id="playlist"></div> <div class="audio-attribution"> </div> </div> <script> (function() {

const tracks = [

{

composer: "Frédéric Chopin",

title: "Nocturne in E-flat major, Op. 9, No. 2",

url: "https://commons.wikimedia.org/wiki/Special:Redirect/file/Nocturne_Op._9_no._2_in_E_flat_major.mp3"

{

composer: " Peter Tchaikovsky",

title: "Barcarolle Prelude",

url: "https://cdn.pixabay.com/download/audio/2021/08/09/audio_8d874b47ea.mp3?filename=juliush-barcarolle-prelude-tschaikowsky-piano-the-seasons-jahreszeiten-7185.mp3"

{

composer: "Claude Debussy",

title: "Clair de lune",

url: "https://cdn.pixabay.com/download/audio/2026/06/28/audio_52a3f15fa5.mp3?filename=geibral-clair-de-lune-claude-debussy-555550.mp3"

}

];

let currentTrack = 0;

const audio = document.getElementById("academia-audio");

const btn = document.getElementById("audio-toggle-btn");

const composer = document.getElementById("player-composer");

const composition = document.getElementById("player-composition");

const trackNumber = document.getElementById("track-number");

const playlist = document.getElementById("playlist");

function loadTrack(index, autoplay = false) {

currentTrack = index;

const track = tracks[currentTrack];

audio.src = track.url;

composer.textContent = track.composer;

composition.textContent = track.title;

trackNumber.textContent =

(currentTrack + 1) + " / " + tracks.length;

document.querySelectorAll(".playlist-item").forEach(function(item, i) {

item.classList.toggle("active", i === currentTrack);

});

audio.load();

btn.innerHTML = "▶ PLAY AUDIO";

btn.classList.remove("playing");

if (autoplay) {

audio.play()

.then(function() {

btn.innerHTML = "◼ PAUSE AUDIO";

btn.classList.add("playing");

})

.catch(function(error) {

console.log("Playback could not start:", error);

});

}

function toggleAcademiaMusic() {

if (audio.paused) {

audio.play()

.then(function() {

btn.innerHTML = "◼ PAUSE AUDIO";

btn.classList.add("playing");

})

.catch(function(error) {

console.error("Audio playback failed:", error);

btn.innerHTML = "▶ PLAY AUDIO";

btn.classList.remove("playing");

});

} else {

audio.pause();

btn.innerHTML = "▶ PLAY AUDIO";

btn.classList.remove("playing");

}

function nextTrack() {

const next =

(currentTrack + 1) % tracks.length;

loadTrack(next, true);

}

function previousTrack() {

const previous =

(currentTrack - 1 + tracks.length) % tracks.length;

loadTrack(previous, true);

}

/* Automatically play the next recording */

audio.addEventListener("ended", function() {

nextTrack();

});

/* Keep button synchronized */

audio.addEventListener("play", function() {

btn.innerHTML = "◼ PAUSE AUDIO";

btn.classList.add("playing");

});

audio.addEventListener("pause", function() {

btn.innerHTML = "▶ PLAY AUDIO";

btn.classList.remove("playing");

});

/* Build playlist */

tracks.forEach(function(track, index) {

const item = document.createElement("button");

item.type = "button";

item.className = "playlist-item";

item.innerHTML =

'<span class="playlist-composer">' +

track.composer +

'</span>' +

'<span class="playlist-track">' +

track.title +

'</span>';

item.onclick = function() {

loadTrack(index, true);

};

playlist.appendChild(item);

});

/* Make functions available to the buttons */

window.toggleAcademiaMusic = toggleAcademiaMusic;

window.nextTrack = nextTrack;

window.previousTrack = previousTrack;

/* Load first track */

loadTrack(0, false);

})();

</script>

<style>

.gramophone-player {

background-colour: #f4edd2;

border: 1px dashed #d4c5a1;

padding: 15px;

max-width: 360px;

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

colour: #2b261f;

box-shadow: 3px 3px 10px rgba(0,0,0,0.1);

}

.player-header {

font-size: 9px;

letter-spacing: 2px;

text-align: center;

colour: #7a6e58;

border-bottom: 1px dashed #d4c5a1;

padding-bottom: 6px;

margin-bottom: 10px;

}

.track-info {

display: flex;

flex-direction: column;

text-align: center;

margin-bottom: 15px;

}

.composer {

font-size: 11px;

font-weight: bold;

letter-spacing: 1px;

colour: #9e2a2b;

text-transform: uppercase;

}

.composition {

font-size: 12px;

font-style: italic;

margin-top: 3px;

colour: #2b261f;

line-height: 1.3;

}

/* MAIN PLAY BUTTON */

.player-controls {

display: flex;

justify-content: center;

margin-bottom: 10px;

}

.play-btn {

background: transparent;

border: 1px solid #2b261f;

colour: #2b261f;

padding: 7px 14px;

font-family: 'Courier New', monospace;

font-size: 11px;

font-weight: bold;

cursor: pointer;

transition: all 0.3s ease;

letter-spacing: 1px;

}

.play-btn:hover {

background: #2b261f;

colour: #f4edd2;

}

.play-btn.playing {

border-colour: #9e2a2b;

colour: #9e2a2b;

}

.play-btn.playing:hover {

background: #9e2a2b;

colour: #f4edd2;

}

/* PREVIOUS / NEXT */

.track-navigation {

display: flex;

justify-content: center;

align-items: center;

gap: 12px;

margin: 8px 0 14px;

font-size: 10px;

colour: #7a6e58;

}

.nav-btn {

background: transparent;

border: none;

colour: #2b261f;

font-family: 'Courier New', monospace;

font-size: 12px;

cursor: pointer;

padding: 3px 6px;

}

.nav-btn:hover {

colour: #9e2a2b;

}

/* PLAYLIST */

.playlist-title {

border-top: 1px dashed #d4c5a1;

padding-top: 10px;

margin-bottom: 7px;

font-size: 8px;

letter-spacing: 2px;

colour: #7a6e58;

text-align: center;

}

.playlist-item {

display: flex;

flex-direction: column;

width: 100%;

text-align: left;

background: transparent;

border: none;

border-bottom: 1px dashed #d4c5a1;

padding: 8px 4px;

cursor: pointer;

colour: #2b261f;

font-family: 'Courier New', monospace;

}

.playlist-item:hover {

background-colour: rgba(212,197,161,0.25);

}

.playlist-item.active {

background-colour: rgba(158,42,43,0.08);

border-left: 3px solid #9e2a2b;

padding-left: 7px;

}

.playlist-composer {

font-size: 9px;

font-weight: bold;

colour: #9e2a2b;

letter-spacing: 1px;

}

.playlist-track {

font-size: 10px;

font-style: italic;

line-height: 1.4;

margin-top: 2px;

}

/* ATTRIBUTION */

.audio-attribution {

margin-top: 10px;

font-size: 7px;

line-height: 1.4;

text-align: center;

colour: #8a806e;

}

</style>

CURRENT READS

This code was a bit more simple, where I basically took the base of the background sounds and my favourite quotes codes but made it static. This should be pasted in Blogger Layout as it's own widget. Replace the books and dates with your own.

<div class="card-header">LIBRARY BUREAU CAT. NO. 1145</div>

<tr><th>DUE</th><th>ALIVIA GR</th></tr>

<tr><td>01 SEP</td><td><span class="returned">The Wedding People</span></td></tr>

<tr><td>10 OCT</td><td><span class="returned">Doors of Midnight</span></td></tr>

<tr><td>NOW</td><td class="reading">Taipei Story</td></tr>

</table>

</div>

<style>

.library-card {

background-colour: #f4edd2; /* Aged paper colour */

border: 1px solid #d4c5a1;

box-shadow: 3px 3px 10px rgba(0,0,0,0.1);

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

padding: 12px;

max-width: 370px;

colour: #2b261f;

}

.card-header {

font-size: 8px;

letter-spacing: 1px;

border-bottom: 2px solid #9e2a2b; /* Ink red */

padding-bottom: 5px;

margin-bottom: 10px;

colour: #7a6e58;

}

.card-table {

width: 100%;

border-collapse: collapse;

font-size: 11px;

}

.card-table th {

font-size: 9px;

colour: #9e2a2b;

text-align: left;

border-bottom: 1px dashed #7a6e58;

padding-bottom: 5px;

}

.card-table td {

padding: 8px 0;

border-bottom: 1px dashed #d4c5a1;

}

.returned {

text-decoration: line-through;

colour: #8c826e;

}

.reading {

font-weight: bold;

colour: #1b3a2b; /* Dark hunter green */

}

</style>

FAVOURITE QUOTES

Again, this code should be pasted in Blogger, Layout, as it's own widget. Replace the quotes and author names with your own.

This code wasnt too hard to get after the background sounds code, but I needed a bit more help from Reddit for the scrolling effect! (https://www.reddit.com/r/css/).

<style>

/* The container box */

.academia-quote-box {

background-color: #f4edd8; /* MATCHED: Vintage parchment paper background */

border: 2px solid #5c4033; /* MATCHED: Classic dark brown border */

border-radius: 3px; /* MATCHED: Subtle corner curve */

padding: 10px; /* MATCHED: Equal internal card padding */

width: 120px; /* MATCHED: Uniform explicit card width */

height: 250px; /* Fixed height remains required for vertical scrolling */

box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.6); /* MATCHED: Deep, atmospheric drop shadow */

font-family: 'Georgia', 'Times New Roman', serif; /* MATCHED: Font family stack */

overflow: hidden; /* Keeps scrolling text inside the box */

margin: 0 auto;

box-sizing: border-box; /* Ensures padding doesn't break explicit width layouts */

}

/* Styling for the quotes */

.academia-quote-box .quote {

color: #2b1d16; /* MATCHED: Rich ink black/brown palette */

font-size: 14px; /* Keeping font scale legible for long passages */

font-style: italic;

line-height: 1.5;

margin: 0 0 5px 0;

text-align: center;

}

/* Styling for the authors */

.academia-quote-box .author {

color: #5c4033; /* MATCHED: Accent text coloring */

font-size: 12px;

text-transform: uppercase;

letter-spacing: 1px;

text-align: right;

margin: 0 0 25px 0; /* Space before the next quote loops */

}

</style>

<p class="quote">“I have become something wonderful, she thought. I have become something terrible. Was she now a goddess or a monster? Perhaps neither. Perhaps both.”</p>

<p class="author">— R.F. Kuang</p>

<p class="quote">"The human species is cued by the love of other people, and by the worry we feel for them, and by our desire to be safe and warm in our own bodies."</p>

<p class="author">— Sally Rooney</p>

<p class="quote">"Even if we don't have the power to choose where we come from, we can still choose where we go from there."</p>

<p class="author">— Stephen Chbosky</p>

<p class="quote">"All animals are equal, but some animals are more equal than others."</p>

<p class="author">— George Orwell</p>

<p class="quote">"It gets easier. Every day it gets a little easier. But you gotta do it every day—that’s the hard part. But it does get easier."</p>

<p class="author">— Raphael Bob-Waksberg</p>

<p class="quote">"Oh, I have a horrible feeling that I'm a greedy, perverted, selfish, apathetic, cynical, depraved, morally bankrupt woman who can't even call herself a feminist."</p>

<p class="author">— Phoebe Waller-Bridge</p>

<p class="quote">"You can’t keep doing shitty things and then feel bad about yourself like that makes it okay! You need to be better!"</p>

<p class="author">— Vera Santamaria</p>

<p class="quote">"It is very, very dangerous to live even one day."</p>

<p class="author">— Virginia Woolf</p>

<p class="quote">"Nobody has to be fully satisfied by just one thing, and nor do they have to aim to be like everyone else. Plenty of people can enjoy things a good amount, and be satisfied with their life overall."</p>

<p class="author">— Asako Yuzuki</p>

<p class="quote">"Books are letters in bottles, cast into the waves of time, from one person trying to save the world to another.”</p>

<p class="author">— Amal El-Mohtar</p>

<p class="quote">"To learn what we fear is to learn who we are. Horror defies our boundaries and illuminates our souls."</p>

<p class="author">— Shirley Jackson</p>

</marquee>

</div>

Alivia.GR: Diaries of a Writer

Tabs

Blog Codes

Readers

Search This Blog

Wikipedia!

Translate

Report Abuse

DUE	ALIVIA GR
01 SEP	The Wedding People
10 OCT	Doors of Midnight
NOW	Taipei Story