Animație Lumini de Crăciun

Script Instalație Crăciun - Jos și Laterale Realizat de petre-vitan

Previzualizare ghirlandă globală (Efect simulat pe marginile casetei negre):

ZONĂ CONȚINUT BLOG

Codul sursă de copiat:

<!-- ======================================================= --> <!-- INSTALAȚIE CRĂCIUN - LĂSATĂ PE JOS ȘI LATERALE --> <!-- REALIZAT DE PETRE-VITAN --> <!-- ======================================================= --> <div id="blogGlobalLights"></div> <style> #blogGlobalLights .christmas-lights { display: flex!important; justify-content: space-around!important; align-items: center!important; margin: 0!important; padding: 0!important; list-style: none!important; pointer-events: none!important; position: fixed!important; z-index: 99999!important; overflow: hidden!important; box-sizing: content-box!important; } #blogGlobalLights .christmas-lights[data-position="bottom"] { bottom: 0; left: 0; width: 100%; height: 35px; transform: scaleY(-1)!important; } #blogGlobalLights .christmas-lights[data-position="left"], #blogGlobalLights .christmas-lights[data-position="right"] { top: 0px; width: 35px; height: 100vh; flex-direction: column!important; } #blogGlobalLights .christmas-lights[data-position="left"] { left: 0; } #blogGlobalLights .christmas-lights[data-position="right"] { right: 0; } #blogGlobalLights .christmas-lights li { --christmas-lights-1: #ff0055; --christmas-lights-2: #00ffcc; --christmas-lights-3: #ffcc00; width: 14px!important; height: 14px!important; min-width: 14px!important; min-height: 14px!important; max-width: 14px!important; max-height: 14px!important; transform: none!important; box-sizing: content-box!important; border-radius: 50%!important; position: relative!important; flex-shrink: 0!important; margin: 8px!important; padding: 0!important; display: block!important; border: none!important; box-shadow: inset 0 0 3px #fff!important; filter: none!important; } #blogGlobalLights .christmas-lights li:before { content: ""!important; position: absolute!important; background: #505050!important; width: 8px!important; height: 5px!important; border-top-left-radius: 2px!important; border-top-right-radius: 2px!important; top: -4px!important; left: 3px!important; transform: none!important; } #blogGlobalLights .christmas-lights[data-position="bottom"] li:after { content: ""!important; top: -12px!important; left: 7px!important; position: absolute!important; width: 50px!important; height: 12px!important; border-bottom: solid #505050 1.5px!important; border-radius: 50%!important; transform: none!important; } #blogGlobalLights .christmas-lights li:last-child:after { content: none!important; } #blogGlobalLights .christmas-lights li:nth-child(3n+1) { background: var(--christmas-lights-1)!important; box-shadow: inset 0 0 3px #fff, 0 0 10px var(--christmas-lights-1)!important; animation: flash-hd-1 0.8s infinite alternate!important; } #blogGlobalLights .christmas-lights li:nth-child(3n+2) { background: var(--christmas-lights-2)!important; box-shadow: inset 0 0 3px #fff, 0 0 10px var(--christmas-lights-2)!important; animation: flash-hd-2 1.2s infinite alternate!important; } #blogGlobalLights .christmas-lights li:nth-child(3n+3) { background: var(--christmas-lights-3)!important; box-shadow: inset 0 0 3px #fff, 0 0 10px var(--christmas-lights-3)!important; animation: flash-hd-3 0.6s infinite alternate!important; } @keyframes flash-hd-1 { 0%, 100% { background: var(--christmas-lights-1); box-shadow: inset 0 0 3px #fff, 0 0 12px var(--christmas-lights-1); } 50% { background: #5a001e; box-shadow: none; } } @keyframes flash-hd-2 { 0%, 100% { background: var(--christmas-lights-2); box-shadow: inset 0 0 3px #fff, 0 0 12px var(--christmas-lights-2); } 50% { background: #005a48; box-shadow: none; } } @keyframes flash-hd-3 { 0%, 100% { background: var(--christmas-lights-3); box-shadow: inset 0 0 3px #fff, 0 0 12px var(--christmas-lights-3); } 50% { background: #5a4800; box-shadow: none; } } </style> <script type='text/javascript'> //<![CDATA[ // Script creat de PETRE-VITAN (function() { const root = document.getElementById("blogGlobalLights"); function build() { if(!root) return; root.innerHTML = ""; let hCount = Math.min(Math.floor(window.innerWidth / 45), 28); let vCount = Math.min(Math.floor(window.innerHeight / 45), 22); ["right", "bottom", "left"].forEach(pos => { const ul = document.createElement("ul"); ul.className = "christmas-lights"; ul.dataset.position = pos; let count = (pos === "bottom") ? hCount : vCount; for (let i = 0; i < count; i++) ul.appendChild(document.createElement("li")); root.appendChild(ul); }); } if (document.readyState === "complete" || document.readyState === "interactive") { build(); } else { document.addEventListener("DOMContentLoaded", build); } let t; window.addEventListener("resize", () => { clearTimeout(t); t = setTimeout(build, 150); }); })(); //]]> </script>

🛠️ Cum se instalează instalația globală pe Blogspot:

1. Copiați scriptul din caseta de mai sus utilizând butonul Copiază Codul.
2. Accesați panoul administrativ Blogger al blogului dumneavoastră.
3. În meniul din stânga, faceți clic pe opțiunea Temă (Theme).
4. Apăsați pe triunghiul mic de lângă butonul portocaliu/gri „Personalizează” și selectați Editați HTML (Edit HTML).
5. Faceți un clic în interiorul editorului de cod și apăsați scurtătura Ctrl + F pentru a deschide bara de căutare.
6. Căutați tag-ul de închidere structurală </body>.
7. Lipiți codul copiat exact deasupra / înainte de această etichetă </body>.
8. Apăsați pictograma de Salvare (dischetă) din colțul din dreapta-sus al ecranului. Instalația va înconjura fluid întregul ecran al blogului!