PLEASE READ: If you plan to use these codes, please comment your blog down below in the comments. Thank you!
Websites and blogs that helped me:
- Elfsight (https://elfsight.com/)
- Lotus of My Soul (https://lotusofmysoul.blogspot.com/p/codes-copy-okay-divas-currently.html)
- HTML code tester (https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro)
- Diary of an Indigenous Diva (https://indigenousdivadiary.blogspot.com/p/blog-codes.html)
- Cursor website (https://www.cursors-4u.com/)
polaroid photo:
(easy)
INSTRUCTIONS:
- you need to insert the URL to your image in this code where it says 'INSERT_URL_HERE'.
- to get URL, you need to draft a post on blogger, paste the image and then go onto the HTML view and copy the link after it says 'src='.
<div onmouseout="this.style.transform='translateY(0) rotate(0deg)'; this.style.boxShadow='0 3px 10px rgba(50,35,25,0.15)';" onmouseover="this.style.transform='translateY(-4px) rotate(0.7deg)'; this.style.boxShadow='0 9px 18px rgba(50,35,25,0.22)';" style="background: repeat rgb(255, 255, 255); box-shadow: rgba(50, 35, 25, 0.15) 0px 3px 10px; display: inline-block; padding: 12px 12px 38px; transition: 0.4s;">
<div style="text-align: center;">
<img height="276" src="INSERT_URL_HERE" width="207" />
</div>
<div style="text-align: center;"><br /></div>
<div style="text-align: center;">
<i><span style="font-family: georgia;">I miss summer</span></i>
</div>
</div>cutesy poll:
(easy)
INSTRUCTIONS:
- replace the emojis and poll options/question with the text you want!
<div class="poll-widget">
<div class="poll-title">What should I watch? 🍂</div>
<div id="poll-options">
<div class="poll-opt" onclick="castVote(0)">🍁 Pretty Little Liars</div>
<div class="poll-opt" onclick="castVote(1)">☕ Gilmore Girls</div>
<div class="poll-opt" onclick="castVote(2)">🍂 One Tree Hill</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>Autumn:</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: #f5eee3;
border: 3px solid #8b5e3c;
border-radius: 12px;
font-family: 'Courier New', monospace;
box-shadow: 4px 4px 0px #b97845;
margin: 0 auto;
text-align: left;
}
.poll-title {
font-weight: bold;
font-size: 13px;
color: #7a4528;
text-align: center;
margin-bottom: 10px;
}
.poll-opt {
background: #fffaf2;
border: 1px solid #c58b5c;
border-radius: 6px;
padding: 6px;
margin-bottom: 6px;
font-size: 11px;
cursor: pointer;
transition: 0.2s;
text-align: center;
color: #5c4033;
}
.poll-opt:hover {
background: #ead5bd;
transform: translateX(2px);
}
.res-bar-container {
font-size: 10px;
color: #6b4a38;
margin-bottom: 6px;
display: flex;
flex-direction: column;
}
.res-bar {
height: 10px;
background: #a85d32;
border-radius: 4px;
width: 0%;
transition: width 0.5s ease-out;
margin: 2px 0;
}
</style>audio player:
INSTRUCTIONS:
- this widget is from Elfsight (https://elfsight.com/). open the widget 'audio player' on the website.
- customise it to the colour, vibe, shape and placement on the builder.
TO UPLOAD SONGS:
- on Spotify, search up the song you want to add, and hover over 'share'. Then click 'copy link to song'.
- Then go onto the website Spotmate (https://spotmate.online/en1). It should load you onto a page with a bar saying 'paste link'.
- After pasting the link, it should show you the song you just downloaded. Click on the button 'convert'.
- Then click 'upload tracks'
- Simply add the mp3 from your downloads and you're done!
slap phone:
- Credits to Lotus of My Soul (https://lotusofmysoul.blogspot.com)
INSTRUCTIONS:
- Search up 'Slap phone' online and it should come up with a phone looking like this.
- Use Canva to add an image of yourself.
- In the code, change the text to how you want it: e.g. 'Happy October! This is my blog, stay a while !'.
<div class="pear-phone-wrapper" style="text-align: center; width: 100%; margin: 0 auto;">
<link rel="stylesheet" href="https://googleapis.com">
<div class="pear-container" id="pearPhoneWidget">
<img class="pear-img" src="IMAGE_URL_HERE" alt="Pear Phone" />
<!-- statusbubble.lotusofmysoul-->
<div class="pear-popup" id="pearPopup">
slap update divas <br /> click me ♡
</div>
<!--NAME HERE.lotusofmysoul-->
<div class="pear-top-text" id="pearTop">
NAME_HERE
</div>
<!-- maintext.lotusofmysoul -->
<div class="pear-center-screen" id="pearScreen">
This is is where you<br />
place your text,<br />
try it out!
</div>
<!-- feelingtext.lotusofmysoul -->
<div class="pear-feeling-text" id="pearFeeling">
HAPPY
</div>
</div>
<style>
.pear-container {
position: relative;
display: inline-block;
margin: 0 auto;
cursor: pointer;
user-select: none;
text-align: center;
}
.pear-img {
width: 300px;
height: auto;
display: block;
margin: 0 auto;
filter: drop-shadow(0 20px 25px rgba(255, 150, 200, .4));
animation: floatPear 3s ease-in-out infinite;
position: relative;
z-index: 2;
}
.pear-container.shake .pear-img {
animation: shakePhone .45s ease;
}
.pear-popup {
position: absolute;
top: -30px;
right: 0px;
background: #fff1f8;
border: 2px solid #ffadc9;
border-radius: 18px;
padding: 10px 15px;
width: 120px;
font-family: 'Georgia', sans-serif;
font-size: 10px;
font-weight: normal;
color: #ffadc9;
text-align: center;
box-shadow: 0 5px 15px rgba(255, 150, 200, .25);
z-index: 10;
pointer-events: none;
opacity: 1;
transform: translateY(0) scale(1);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.pear-popup.hide-bubble {
opacity: 0 !important;
transform: translateY(-15px) scale(0.8) !important;
}
.pear-popup:after {
content: "";
position: absolute;
bottom: -8px;
left: 30px;
width: 15px;
height: 15px;
background: #fff1f8;
border-right: 2px solid #ffadc9;
border-bottom: 2px solid #ffadc9;
transform: rotate(45deg);
}
/* pop uptxt.lotusofmysoul */
.pear-top-text {
position: absolute;
top: 43px;
left: 35%;
transform: rotate(-1.5deg);
font-family: 'Orbitron', sans-serif;
font-size: 8px;
font-weight: 700;
color: #9b00e8;
text-align: left;
letter-spacing: 0.5px;
opacity: 0;
z-index: 5;
}
.pear-top-text.show {
opacity: 1;
animation: typingEffect 0.5s steps(10) forwards, glowEffect 1.5s infinite alternate;
}
/* maintxt.lotusofmysoul */
.pear-center-screen {
position: absolute;
top: 50px;
left: 52%;
transform: translateX(-50%) rotate(-1.5deg);
width: 110px;
height: 40px;
font-family: 'Tahoma', sans-serif;
font-size: 8px;
font-weight: normal;
line-height: 12px;
color: #000;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
z-index: 5;
}
.pear-center-screen.show {
opacity: 1;
animation: typingEffect 1.5s steps(40) forwards, glowEffect 1.5s infinite alternate;
}
/* bottomtxt.lotusofmysoul */
.pear-feeling-text {
position: absolute;
top: 100px;
left: 48%;
transform: rotate(-1.5deg);
font-family: 'Tahoma', sans-serif;
font-size: 8px;
font-weight: normal;
color: #9b00e8;
opacity: 0;
z-index: 5;
white-space: nowrap;
}
.pear-feeling-text.show {
opacity: 1;
animation: typingEffect 1.5s steps(10) forwards, glowEffect 1.5s infinite alternate;
}
/* backgroundsprkl.lotusofmysoul */
.pear-sparkle {
position: absolute;
pointer-events: none;
background: #ffb2d6;
border-radius: 50%;
width: 16px;
height: 16px;
z-index: 1;
box-shadow: 0 0 12px #fff;
}
/* just animations */
@keyframes floatPear {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@keyframes shakePhone {
0% { transform: rotate(0); }
25% { transform: rotate(-4deg); }
50% { transform: rotate(4deg); }
75% { transform: rotate(-2deg); }
100% { transform: rotate(0); }
}
@keyframes typingEffect {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0); }
}
@keyframes glowEffect {
from { filter: drop-shadow(0 0 2px #ffc4df); }
to { filter: drop-shadow(0 0 6px #ff9fc8); }
}
</style>
<script>
let pearPhone = document.getElementById("pearPhoneWidget");
let pearPopup = document.getElementById("pearPopup");
let pearTop = document.getElementById("pearTop");
let pearScreen = document.getElementById("pearScreen");
let pearFeeling = document.getElementById("pearFeeling");
const sparkleColors = ['#ffb2d6', '#ff1f8b', '#008080', '#fff7fb'];
function createSparkleBurst() {
for (let i = 0; i < 18; i++) {
let sparkle = document.createElement("div");
sparkle.classList.add("pear-sparkle");
sparkle.style.left = "50%";
sparkle.style.top = "50%";
sparkle.style.backgroundColor = sparkleColors[Math.floor(Math.random() * sparkleColors.length)];
let angle = Math.random() * Math.PI * 2;
let velocity = Math.random() * 140 + 50;
let destinationX = Math.cos(angle) * velocity;
let destinationY = Math.sin(angle) * velocity;
pearPhone.appendChild(sparkle);
let animation = sparkle.animate([
{ transform: 'translate(-50%, -50%) scale(1)', opacity: 1 },
{ transform: `translate(calc(-50% + ${destinationX}px), calc(-50% + ${destinationY}px)) scale(0)`, opacity: 0 }
], {
duration: Math.random() * 900 + 500,
easing: 'cubic-bezier(0.1, 0.8, 0.3, 1)'
});
animation.onfinish = () => sparkle.remove();
}
}
pearPhone.onclick = function() {
pearPopup.classList.add("hide-bubble");
pearPhone.classList.remove("shake");
void pearPhone.offsetWidth;
pearPhone.classList.add("shake");
pearTop.classList.remove("show");
void pearTop.offsetWidth;
pearTop.classList.add("show");
pearScreen.classList.remove("show");
void pearScreen.offsetWidth;
pearScreen.classList.add("show");
pearFeeling.classList.remove("show");
void pearFeeling.offsetWidth;
pearFeeling.classList.add("show");
createSparkleBurst();
};
</script>
</div>interactive character:
- you need to find your character (mine is snoopy). How I did this is I went onto GIF Tenor (any gif website will do), locate the gif you would like and add the URL in the code where it says 'ENTER IMAGE'.
- It makes it much easier if you choose a gif already with no background, if it does have a background you can use other platforms to remove it such as Canva.
- You can change the colour of the text box by finding the number for the colour you want and replacing it with the current default colour (pink).
- Lastly, the text in the speech bubble is now 'ENTER TEXT' or something along those lines. You need to change the text by simply replacing the 'enter' bit with the sentences you want.
<!-- =========================================
BEA AUTUMN CLICKABLE CHARACTER
BOTTOM-RIGHT CORNER
========================================= -->
<div class="bea-widget">
<!-- TEXT BOX -->
<div class="bea-speech" id="beaSpeech">
<span id="beaText">ENTER_TEXT</span>
</div>
<!-- BEA CHARACTER -->
<button
class="bea-character"
id="beaCharacter"
type="button"
aria-label="Click character"
>
<img
src="INSERT_IMAGE_HERE"
alt="Character"
/>
</button>
</div>
<style>
/* =========================================
BEA WIDGET
========================================= */
.bea-widget {
position: fixed;
right: 20px;
bottom: 15px;
width: 240px;
text-align: center;
font-family: Georgia, "Times New Roman", serif;
z-index: 9999;
}
/* =========================================
PINK TEXT BOX
========================================= */
.bea-speech {
position: relative;
width: 220px;
min-height: 75px;
margin: 0 auto 16px auto;
padding: 18px 15px;
box-sizing: border-box;
background: #ffd6e7;
color: #8a3158;
border: 2px dashed #ff8fbd;
border-radius: 12px;
font-family: Georgia, "Times New Roman", serif;
font-size: 14px;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: 3px 3px 0 rgba(255, 105, 165, 0.18);
animation: boxBreathing 3.5s ease-in-out infinite;
}
/* =========================================
TEXT BOX BREATHING
========================================= */
@keyframes boxBreathing {
0% { transform: translateY(0); }
50% { transform: translateY(-6px); }
100% { transform: translateY(0); }
}
/* =========================================
SPEECH BUBBLE POINT
========================================= */
.bea-speech::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #ff8fbd;
}
.bea-speech::before {
content: "";
position: absolute;
bottom: -7px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #ffd6e7;
z-index: 2;
}
/* =========================================
BEA CHARACTER
========================================= */
.bea-character {
display: block;
width: 155px;
margin: 12px auto 0 auto;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.bea-character img {
display: block;
width: 155px;
height: auto;
margin: 0 auto;
transition: transform 0.18s ease;
}
/* =========================================
HOVER
========================================= */
.bea-character:hover img {
transform: translateY(-4px) rotate(-2deg);
}
/* =========================================
CLICK
========================================= */
.bea-character:active img {
transform: scale(0.93);
}
/* =========================================
KEYBOARD FOCUS
========================================= */
.bea-character:focus-visible {
outline: 2px dashed #ff8fbd;
outline-offset: 5px;
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 500px) {
.bea-widget {
right: 8px;
bottom: 8px;
width: 190px;
}
.bea-speech {
width: 175px;
min-height: 68px;
padding: 14px 12px;
font-size: 12px;
}
.bea-character,
.bea-character img {
width: 125px;
}
}
/* =========================================
REDUCED MOTION
========================================= */
@media (prefers-reduced-motion: reduce) {
.bea-speech {
animation: none;
}
}
</style>
<script>
(function () {
const bea = document.getElementById("beaCharacter");
const text = document.getElementById("beaText");
/* =========================================
CHARACTER MESSAGES
========================================= */
const messages = [
"ENTER_TEXT"
];
let currentMessage = 0;
/* =========================================
CLICK CHARACTER
========================================= */
bea.addEventListener("click", function () {
text.textContent = messages[currentMessage];
});
})();
</script>Hope this helps! xxx Remember to comment your blog, and also any code ideas you woud like me to add.
No comments:
Post a Comment