i'll add all my blog codes here and try update it when i add more !! if you have more questions on how to edit ur blog, feel free to ask in the comments <3
- tumblr has some rlly cute ones !! js look up "blinkie" w whatever u like, i usually add "pink" for cute ones
- pinterest has cute gifs if u look that up !!
- heres a strawpage that has links for alot of blinkies: https://malsgraphiclibrary.straw.page/home
just go to ur layout, click add gadget, and add ur image / blinkie !!
extras that i have:
- my chat room !! u can go in the code and change colors + text, it's a bit more complicated tho </3 also u add this by going to add gadget, and then click html code and paste it into the content area !!
<style></style>
<div class="chat-phone">
<div class="chat-phone-speaker"></div>
<div class="chat-phone-screen">
<div class="chat-phone-title">
chat w me <3
</div>
<div class="chat-phone-box">
<iframe
src="https://www5.cbox.ws/box/?boxid=966696&boxtag=vqaKwA"
width="100%"
height="350"
allowtransparency="yes"
allow="autoplay"
frameborder="0"
marginheight="0"
marginwidth="0"
scrolling="auto">
</iframe>
</div>
</div>
<div class="chat-phone-buttons">
<span>✦</span>
<span>♡</span>
<span>✦</span>
</div>
</div>
- my poll !! make ur own, u can customize everything and its super easy <3 js add the code into gadgets html <3
https://www.commoninja.com/widgets/poll/blogger/how-to-add
-moon phase rn !!
<!-- // Begin Current Moon Phase HTML (c) MoonConnection.com // --><table cellpadding="0" cellspacing="0" border="0" width="212"><tr><td align="center"><a href="https://www.moonconnection.com" target="mc_moon_ph"><img src="https://www.moonmodule.com/cs/dm/hn.gif" width="212" height="136" border="0" alt="" /></a><div style="position:relative;width:128px;"><div style="position:absolute;top:-20px;left:6px;background:#000000;width:116px;text-align:center;"><a href="https://www.moonconnection.com/moon_cycle.phtml" target="mc_moon_ph"><font color="#7F7F7F" size="1" face="arial,helvetica,sans-serif"><span style="color:#7F7F7F;font-family:arial,helvetica,sans-serif;font-size:10px;">moon cycles</span></a></font></div></div></td></tr></table><!-- // end moon phase HTML // -->
- my gify pet <3 super cute, u can customize the color, pet, background etc !!
https://gify.pet/
- custom cursor !! this is a bit harder to do too </3 u basically pick ur cursor, copy the code and then
- Go to Blogger Dashboard → Theme
- Click Customize
- In the left menu, click Advanced → Add CSS
- Paste the CSS code into the text box
- Click Apply to Blog (top right)
- water my garden !! u can go in the code and change colors + text, it's a bit more complicated tho </3 also u add this by going to add gadget, and then click html code and paste it into the content area !!
<link href="https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&display=swap" rel="stylesheet" />
<div id="wmg-widget">
<button id="wmg-btn" type="button">water my garden</button>
<div id="wmg-garden" class="wmg-stage-0">
<div class="wmg-flower" style="--i:0"></div>
<div class="wmg-flower" style="--i:1"></div>
<div class="wmg-flower" style="--i:2"></div>
<div class="wmg-flower" style="--i:3"></div>
<div class="wmg-flower" style="--i:4"></div>
<div class="wmg-ground"></div>
</div>
</div>
<style>
#wmg-widget {
max-width: 420px;
margin: 0 auto;
padding: 16px 10px 0;
background: linear-gradient(#fdf3f8, #fbe9f2 70%);
border-radius: 18px;
text-align: center;
overflow: hidden;
font-family: sans-serif;
}
#wmg-btn {
font-family: 'Mountains of Christmas', cursive;
font-weight: 700;
font-size: 30px;
color: #cbc5c5;
background: #fff;
border: 2px dashed #ffedf1;
border-radius: 35px;
padding: 6px 22px 10px;
cursor: pointer;
margin-bottom: 6px;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#wmg-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(232,99,158,0.25);
}
#wmg-btn:active { transform: translateY(1px) scale(0.97); }
#wmg-garden {
position: relative;
height: 150px;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 14px;
padding-bottom: 0;
}
.wmg-ground {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 24px;
background: #cfe9b8;
border-radius: 0 0 18px 18px;
z-index: 0;
}
.wmg-flower {
position: relative;
width: 26px;
height: 40px;
z-index: 1;
transition: height 0.6s ease;
}
.wmg-flower::before {
content: "";
position: absolute;
bottom: 22px;
left: 50%;
width: 4px;
background: #7fb56a;
border-radius: 2px;
transform: translateX(-50%);
transform-origin: bottom;
height: 30px;
transition: height 0.6s ease;
}
.wmg-flower::after {
content: "";
position: absolute;
bottom: 30px;
left: 50%;
width: 16px;
height: 8px;
background: #8fca77;
border-radius: 60% 0 60% 0;
transform: translateX(-70%) rotate(-15deg) scale(0.5);
transform-origin: right center;
opacity: 0.4;
transition: transform 0.6s ease, opacity 0.6s ease;
}
.wmg-bloom {
position: absolute;
left: 50%;
bottom: 48px;
width: 30px;
height: 30px;
transform: translateX(-50%) scale(0.35);
opacity: 0.35;
transition: transform 0.7s cubic-bezier(.34,1.56,.64,1), opacity 0.6s ease, bottom 0.6s ease;
}
.wmg-bloom span {
position: absolute;
top: 0; left: 50%;
width: 12px;
height: 22px;
background: linear-gradient(#ffd6ea, #f6a9d1);
border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
transform-origin: bottom center;
}
.wmg-bloom span:nth-child(1) { transform: translateX(-50%) rotate(0deg); }
.wmg-bloom span:nth-child(2) { transform: translateX(-50%) rotate(60deg); }
.wmg-bloom span:nth-child(3) { transform: translateX(-50%) rotate(120deg); }
.wmg-bloom span:nth-child(4) { transform: translateX(-50%) rotate(180deg); }
.wmg-bloom span:nth-child(5) { transform: translateX(-50%) rotate(240deg); }
.wmg-bloom span:nth-child(6) { transform: translateX(-50%) rotate(300deg); }
.wmg-bloom em {
position: absolute;
top: 10px; left: 50%;
width: 7px; height: 7px;
background: #ffe9a8;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.wmg-stage-0 .wmg-flower { height: 40px; }
.wmg-stage-0 .wmg-flower::before { height: 22px; }
.wmg-stage-0 .wmg-bloom { transform: translateX(-50%) scale(0.35); opacity: 0.35; bottom: 40px; }
.wmg-stage-0 .wmg-flower::after { opacity: 0; }
.wmg-stage-1 .wmg-flower { height: 60px; }
.wmg-stage-1 .wmg-flower::before { height: 40px; }
.wmg-stage-1 .wmg-bloom { transform: translateX(-50%) scale(0.6); opacity: 0.65; bottom: 58px; }
.wmg-stage-1 .wmg-flower::after { opacity: 0.5; transform: translateX(-70%) rotate(-15deg) scale(0.7); }
.wmg-stage-2 .wmg-flower { height: 84px; }
.wmg-stage-2 .wmg-flower::before { height: 60px; }
.wmg-stage-2 .wmg-bloom { transform: translateX(-50%) scale(0.85); opacity: 0.9; bottom: 80px; }
.wmg-stage-2 .wmg-flower::after { opacity: 0.75; transform: translateX(-70%) rotate(-15deg) scale(0.9); }
.wmg-stage-3 .wmg-flower { height: 110px; }
.wmg-stage-3 .wmg-flower::before { height: 82px; }
.wmg-stage-3 .wmg-bloom {
transform: translateX(-50%) scale(1);
opacity: 1;
bottom: 104px;
filter: drop-shadow(0 0 6px rgba(255,180,220,0.7));
}
.wmg-stage-3 .wmg-flower::after { opacity: 1; transform: translateX(-70%) rotate(-15deg) scale(1); }
.wmg-flower { animation-delay: calc(var(--i) * 0.08s); }
.wmg-drop {
position: absolute;
top: -10px;
width: 6px;
height: 10px;
background: #8fd0f0;
border-radius: 50% 50% 50% 0;
transform: rotate(45deg);
opacity: 0.85;
animation: wmg-fall 0.6s ease-in forwards;
z-index: 2;
pointer-events: none;
}
@keyframes wmg-fall {
to { top: 130px; opacity: 0; }
}
</style>
<script>
(function () {
var garden = document.getElementById('wmg-garden');
var btn = document.getElementById('wmg-btn');
var flowers = garden.querySelectorAll('.wmg-flower');
var stage = 0;
var maxStage = 3;
flowers.forEach(function (f) {
var bloom = document.createElement('div');
bloom.className = 'wmg-bloom';
bloom.innerHTML =
'<span></span><span></span><span></span><span></span><span></span><span></span><em></em>';
f.appendChild(bloom);
});
function waterDrops() {
flowers.forEach(function (f, i) {
setTimeout(function () {
var drop = document.createElement('div');
drop.className = 'wmg-drop';
var rect = f.getBoundingClientRect();
var gRect = garden.getBoundingClientRect();
drop.style.left = (rect.left - gRect.left + rect.width / 2 - 3) + 'px';
garden.appendChild(drop);
setTimeout(function () { drop.remove(); }, 650);
}, i * 60);
});
}
btn.addEventListener('click', function () {
waterDrops();
setTimeout(function () {
if (stage < maxStage) {
stage++;
garden.className = 'wmg-stage-' + stage;
} else {
btn.textContent = 'thank you <3';
}
}, 350);
});
})();
</script>
No comments:
Post a Comment