Widget Brad

Widget Brad de Crăciun cu Luminițe Animate Realizat de petre-vitan

Previzualizare widget în timp real:

Sărbători Fericite!

Codul sursă de copiat:

<!-- Script Brad de Crăciun Animat --> <!-- Realizat de petre-vitan --> <div class="blog-christmas-container"> <div class="christmas-tree-box"> <div class="tree-star"></div> <div class="tree-layer layer-1"></div> <div class="tree-layer layer-2"></div> <div class="tree-layer layer-3"></div> <div class="tree-trunk"></div> <div class="tree-lights"> <div class="light" style="top:18%; left:48%; --color: #ff0055; --delay: 0.1s;"></div> <div class="light" style="top:24%; left:44%; --color: #00ffcc; --delay: 0.3s;"></div> <div class="light" style="top:26%; left:52%; --color: #ffcc00; --delay: 0.5s;"></div> <div class="light" style="top:36%; left:41%; --color: #9900ff; --delay: 0.2s;"></div> <div class="light" style="top:40%; left:48%; --color: #ff00aa; --delay: 0.7s;"></div> <div class="light" style="top:38%; left:55%; --color: #00ffff; --delay: 0.4s;"></div> <div class="light" style="top:46%; left:37%; --color: #ff3300; --delay: 0.1s;"></div> <div class="light" style="top:48%; left:59%; --color: #ffcc00; --delay: 0.6s;"></div> <div class="light" style="top:55%; left:34%; --color: #ff0055; --delay: 0.5s;"></div> <div class="light" style="top:58%; left:43%; --color: #00ffcc; --delay: 0.2s;"></div> <div class="light" style="top:57%; left:52%; --color: #9900ff; --delay: 0.8s;"></div> <div class="light" style="top:59%; left:61%; --color: #ff00aa; --delay: 0.3s;"></div> <div class="light" style="top:64%; left:28%; --color: #00ffff; --delay: 0.6s;"></div> <div class="light" style="top:66%; left:47%; --color: #ff3300; --delay: 0.4s;"></div> <div class="light" style="top:63%; left:66%; --color: #00ff66; --delay: 0.1s;"></div> </div> </div> <div class="christmas-text">Sărbători Fericite!</div> </div> <style> @import url("https://googleapis.com"); .blog-christmas-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; background: #111; border-radius: 8px; margin: 10px auto; max-width: 300px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); } .christmas-tree-box { position: relative; width: 200px; height: 220px; display: flex; flex-direction: column; align-items: center; } .tree-star { width: 24px; height: 24px; background: #ffcc00; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); box-shadow: 0 0 15px #ffcc00; z-index: 5; margin-bottom: -4px; animation: starG 1.5s ease-in-out infinite alternate; } .tree-layer { width: 0; height: 0; border-left: transparent solid; border-right: transparent solid; border-bottom: #004d26 solid; filter: drop-shadow(0 0 10px rgba(0, 77, 38, 0.8)); } .layer-1 { border-left-width: 35px; border-right-width: 35px; border-bottom-width: 50px; margin-top: -5px; } .layer-2 { border-left-width: 60px; border-right-width: 60px; border-bottom-width: 70px; margin-top: -25px; } .layer-3 { border-left-width: 85px; border-right-width: 85px; border-bottom-width: 90px; margin-top: -35px; } .tree-trunk { width: 24px; height: 30px; background: #5c3214; border-radius: 0 0 4px 4px; } .tree-lights { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } .light { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px var(--color), 0 0 15px var(--color); animation: lightB 0.8s infinite alternate; animation-delay: var(--delay); z-index: 4; } .christmas-text { font-family: "Caveat", cursive; font-size: 2.5rem; color: #fff; margin-top: 15px; text-shadow: 0 0 5px #fff, 0 0 15px #ff0055, 0 0 30px #ff0055; animation: textP 2s infinite alternate; white-space: nowrap; } @keyframes starG { 0% { transform: scale(1); } 100% { transform: scale(1.15); } } @keyframes lightB { 0% { opacity: 0.2; transform: scale(0.7); } 100% { background: var(--color); opacity: 1; transform: scale(1.2); } } @keyframes textP { 0% { transform: scale(1); } 100% { transform: scale(1.04); } } </style>

🛠️ Cum se instalează pe Blogspot (Gadget de Sidebar sau Footer):

1. Copiați întregul cod prin acționarea butonului Copiază Codul din partea de sus.
2. Intrați în contul dumneavoastră de administrator Blogger.
3. Selectați secțiunea Aspect (Layout) din meniul lateral stâng.
4. Mergeți la zona dorită (Bara laterală sau Subsol) și faceți clic pe link-ul Adăugați un gadget (Add a Gadget).
5. Alegeți opțiunea de tip HTML/JavaScript din fereastra pop-up afișată.
6. Lipiți codul copiat direct în caseta text marcată drept Conținut (Content). Câmpul „Titlu” poate fi lăsat gol.
7. Apăsați butonul Salvați (Save) și finalizați prin salvarea generală a așezării din colțul dreapta-jos al panoului Blogger.