More Blog Codes

Heyy girlsss, I hope you’re all doing well. Someone requested the code for the pink falling stars on my blog through my Google Forms, and for the other requested ones I’m still working on them my lovees. If you love the effect and want it on your blog too, feel free to use it. The stars fall gently across your screen in pretty shades of pink. 

To add them, go to Blogger → Layout → Add a Gadget → HTML/JavaScript, paste the code, and save. Enjoy your own little pink starfall! 

Here’s the code below: 

Pink Falling Stars

<style> #pinkStarfallLayer { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 99998; } .pink-falling-star { position: absolute; top: -45px; color: #e85b9b; line-height: 1; opacity: 0; animation: pinkStarDrift linear infinite; will-change: transform, opacity; filter: drop-shadow(0 1px 2px rgba(205,55,130,.12)); } .pink-falling-star svg { display: block; width: 100%; height: 100%; fill: currentColor; } @keyframes pinkStarDrift { 0% { transform: translate3d(0,-30px,0) rotate(0deg); opacity: 0; } 10% { opacity: .85; } 50% { transform: translate3d(24px,50vh,0) rotate(100deg); opacity: .8; } 90% { opacity: .7; } 100% { transform: translate3d(-12px,110vh,0) rotate(220deg); opacity: 0; } } @media (prefers-reduced-motion: reduce) { #pinkStarfallLayer { display: none; } } </style> <div id="pinkStarfallLayer" aria-hidden="true"></div> <script> (function () { var layer = document.getElementById("pinkStarfallLayer"); if (!layer || layer.dataset.started === "yes") return; layer.dataset.started = "yes"; var starCount = 25; var shades = [ "#e85b9b", "#ed6ca8", "#df4f91", "#f080b5", "#e65c9f" ]; for (var i = 0; i < starCount; i++) { var star = document.createElement("span"); star.className = "pink-falling-star"; var size = 10 + Math.random() * 12; var duration = 14 + Math.random() * 12; var delay = -(Math.random() * duration); star.style.left = (Math.random() * 100) + "%"; star.style.width = size + "px"; star.style.height = size + "px"; star.style.color = shades[ Math.floor(Math.random() * shades.length) ]; star.style.animationDuration = duration + "s"; star.style.animationDelay = delay + "s"; star.innerHTML = '<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">' + '<polygon points="50,3 61,36 96,36 68,57 79,91 50,70 21,91 32,57 4,36 39,36"/>' + '</svg>'; layer.appendChild(star); } })(); </script>

Add the copied code to a Blogger HTML/JavaScript gadget.

Xoxo
-Roshan