So, Last week I posted a snow fall effect snippet and I thought why not add a little more the aid the festive vibe .
Too bad I can do sophisticated stuffs, because I'm thinking of add the google style light. Yes that one you see on the google homepage.
Mxm, I made something similar - a super cool light effect for any site headers (h1 h2 and h3 tags).
You can see it on this site already, and can also add it on yours. No stress. Just copy, paste, and boom - your site is glowing!
<!-- dynamic christmas header lights -sdavidprince.space -->
<script>function addChristmasLights(){const headings=document.querySelectorAll('h1:not(.nolight), h2:not(.nolight), h3:not(.nolight)');headings.forEach((element)=>{const tag=element.tagName;const colors=tag==='H1'?['red','green','gold']:tag==='H2'?['blue','purple','cyan']:['pink','orange','lime'];const gradient=tag==='H1'?'linear-gradient(45deg, #ff6b81, #ff4757)':tag==='H2'?'linear-gradient(45deg, #70a1ff, #1e90ff)':'linear-gradient(45deg, #ffa502, #ff6348)';element.style.position='relative';element.style.display='inline-block';element.style.margin='30px';element.style.padding='10px 20px';element.style.textTransform='uppercase';element.style.borderRadius='10px';element.style.color='#fff';element.style.boxShadow=`0 0 20px ${colors[0]}`;element.style.background=gradient;element.style.border=`5px solid ${colors[0]}`;const width=element.offsetWidth;const numBulbs=Math.floor(width/30);for(let i=0;i<numBulbs;i++){const wire=document.createElement('div');wire.style.position='absolute';wire.style.width='2px';wire.style.height='10px';wire.style.background='gray';wire.style.left=`${(width / numBulbs) * i}px`;wire.style.top='-12px';element.appendChild(wire);const light=document.createElement('div');light.style.position='absolute';light.style.borderRadius=tag==='H1'?'50%':tag==='H2'?'30%':'60%';light.style.width=tag==='H1'?'12px':tag==='H2'?'10px':'15px';light.style.height=tag==='H1'?'12px':tag==='H2'?'10px':'15px';light.style.boxShadow=`0 0 15px ${colors[i % colors.length]}`;light.style.animation='blink 1.2s infinite alternate';light.style.left=`${(width / numBulbs) * i}px`;light.style.top='-22px';light.style.background=colors[i%colors.length];element.appendChild(light)}});const style=document.createElement('style');style.innerHTML=`
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0.4; }
100% { opacity: 1; }
}
`;document.head.appendChild(style)}
window.addEventListener('DOMContentLoaded',addChristmasLights);window.addEventListener('resize',()=>{document.querySelectorAll('h1, h2, h3 > div').forEach((el)=>el.remove());addChristmasLights()});</script>🎄✨ With this simple code, your <h1>, <h2>, and <h3> headers will light up with dynamic, glowing Christmas bulbs that automatically adjust to the text size.
Exclusion Option:
If you don’t want lights on certain headers? Just add class="nolight" to those headers, and they’ll stay decoration-free!
Example : <h1 class="nolight">No Lights Here!</h1>
Blogger Users:
Blogger users should paste this code as gadget.
How:
1. In the Blogger dashboard, select the blog where you want to add the code.
2. Click on the Layout tab from the left sidebar
3. Locate the section where you want the code to appear (e.g., Sidebar, Footer, or Main Section).
4. Click on the Add a Gadget link in that section.
5 Scroll down and select the HTML/JavaScript gadget from the list.
6. A popup box will appear where you can paste your code.
7 Leave the Title Field Empty (optional, as this code doesn't need a title).
8. Copy and paste the full code I provided above into the Content Box.
9. Save changes. It would be applied then you can refresh your site.
Make sure it appears well on your site. If it does't try locating the areas and add the nolight class
Other Sites Implementation
For any other site you can paste this code anywhere in your template.
Closing this post
There you have it - A text light effect on your site.
Your h1 and h2 headers will have glowing Christmas lights automatically. No need to add extra classes or edit anything. It just works.
