Как оформить блог на Новый год с помощью скриптов : Создание новогодних украшений для блога с использованием кода

Как добавить скрипты новогодней елки и обратный отсчет на блог

Я продолжаю писать статьи для рубрики новогодние украшения и собрал подборку из нескольких скриптов — отображение ёлочки и обратный отсчёт, которые создадут праздничную атмосферу на вашем блоге.

👉❓ Почему стоит использовать эти скрипты на Blogger

Легкость установки — код добавляется без изменения основной структуры сайта.
Быстрота — установка занимает несколько минут с помощью гаджета HTML/JavaScript .
Удаление — легко убрать в любой момент в настройках: Изменить ➜ Удалить.

Показать статью

Скопируйте код:

<div class="xmas-corner-wrapper">
  <div class="xmas-text">С НОВЫМ ГОДОМ!</div>
  
  <div class="xmas-tree-box">
    <div class="star-mini"></div>
    <div class="tree-top"></div>
    <div class="tree-mid"></div>
    <div class="tree-bot"></div>
    
    <!-- Шары с усиленным мерцанием -->
    <div class="ornament red-ball"></div>
    <div class="ornament gold-ball"></div>
    <div class="ornament blue-ball"></div>
    <div class="ornament white-ball"></div>
    <div class="ornament green-ball"></div>
  </div>
</div>

<style>
/* Фиксация и центровка в углу */
.xmas-corner-wrapper {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10000;
  pointer-events: none;
}

/* Текст */
.xmas-text {
  color: #ff0000;
  font-family: 'Verdana', sans-serif;
  font-weight: 900;
  font-size: 12px;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff;
  margin-bottom: 2px;
  letter-spacing: 1px;
}

/* Елка */
.xmas-tree-box {
  position: relative;
  width: 100px;
  height: 120px;
}

.tree-top, .tree-mid, .tree-bot {
  width: 0; height: 0;
  border-left: transparent solid;
  border-right: transparent solid;
  border-bottom: solid #0b6623;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}

.tree-top { border-width: 0 25px 35px 25px; top: 15px; }
.tree-mid { border-width: 0 35px 45px 35px; top: 40px; }
.tree-bot { border-width: 0 45px 55px 45px; top: 70px; }

.star-mini {
  position: absolute;
  top: 2px; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 16px;
  background: #ffff00;
  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 #ff0;
  z-index: 10;
}

/* Настройки мерцания */
.ornament {
  width: 10px; height: 10px;
  border-radius: 50%;
  position: absolute;
  z-index: 11;
  animation: flash 0.8s infinite alternate ease-in-out;
}

.red-ball   { background: #ff0000; top: 45px; left: 40px; animation-delay: 0s; }
.gold-ball  { background: #ffd700; top: 75px; left: 60px; animation-delay: 0.2s; }
.blue-ball  { background: #00eaff; top: 100px; left: 35px; animation-delay: 0.4s; }
.white-ball { background: #ffffff; top: 85px; left: 25px; animation-delay: 0.6s; }
.green-ball { background: #00ff00; top: 110px; left: 55px; animation-delay: 0.1s; }

@keyframes flash {
  0% { opacity: 0.4; transform: scale(0.8); box-shadow: 0 0 2px currentColor; }
  100% { opacity: 1; transform: scale(1.1); box-shadow: 0 0 12px currentColor, 0 0 20px currentColor; }
}
</style>

Добавьте код в блог:
- Откройте Настройки блога.
- Выберите пункт Дизайн.
- Нажмите «+ Добавить гаджет» и выберите HTML/JavaScript.
- Вставьте код гирлянды в поле Содержание и сохраните.

таким же способам можно добавить скрипт счетчика обратного отсчета до "Нового года осталось" (повторить п.1,2):

<div id="new-year-widget" style="
    background: #2c2c2c; 
    border: 2px solid #FFA500;
    color: #ffffff;
    width: 260px; 
    height: 280px;
    border-radius: 12px;
    text-align: center;
    font-family: Arial, sans-serif;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
">
    <a href="https://samasajt.blogspot.com/" style="display: block; padding: 20px 0; background: #1a1a1a; text-decoration: none;">
        <i class="fa-solid fa-tree" style="font-size: 80px; color: #2ecc71; filter: drop-shadow(0 0 10px rgba(46, 204, 113, 0.5));"></i>
    </a>

    <div style="font-size: 11px; padding: 8px 0; color: #ffffff; font-weight: bold; background: #333; letter-spacing: 1px;">
        ДО НОВОГО ГОДА ОСТАЛОСЬ:
    </div>

    <div style="height: 2px; background: #FFA500; width: 100%;"></div>

    <div style="padding: 20px 4px;">
        <div style="display: flex; justify-content: space-around; align-items: center;">
            <div style="flex: 1;">
                <div id="d" style="font-size: 22px; font-weight: bold; color: #fff;">00</div>
                <div style="font-size: 9px; color: #FFA500; margin-top: 2px;">ДН</div>
            </div>
            <div style="flex: 1;">
                <div id="h" style="font-size: 22px; font-weight: bold; color: #fff;">00</div>
                <div style="font-size: 9px; color: #FFA500; margin-top: 2px;">ЧАС</div>
            </div>
            <div style="flex: 1;">
                <div id="m" style="font-size: 22px; font-weight: bold; color: #fff;">00</div>
                <div style="font-size: 9px; color: #FFA500; margin-top: 2px;">МИН</div>
            </div>
            <div style="flex: 1;">
                <div id="s" style="font-size: 22px; font-weight: bold; color: #FFA500;">00</div>
                <div style="font-size: 9px; color: #ccc; margin-top: 2px;">СЕК</div>
            </div>
        </div>
    </div>
</div>

<script>
(function() {
    const update = () => {
        const now = new Date();
        const target = new Date(now.getFullYear() + (now.getMonth() === 0 && now.getDate() === 1 ? 0 : 1), 0, 1);
        const diff = target - now;

        if (diff <= 0) {
            document.getElementById('new-year-widget').innerHTML = 
                "<div style='padding:100px 20px; background:#2c2c2c; color:#FFA500; font-weight:bold; font-size:20px;'><i class='fa-solid fa-holly-berry'></i> С Новым Годом! 🎄</div>";
            return;
        }

        const d = Math.floor(diff / 86400000);
        const h = Math.floor((diff / 3600000) % 24);
        const m = Math.floor((diff / 60000) % 60);
        const s = Math.floor((diff / 1000) % 60);

        document.getElementById('d').innerText = d;
        document.getElementById('h').innerText = h.toString().padStart(2, '0');
        document.getElementById('m').innerText = m.toString().padStart(2, '0');
        document.getElementById('s').innerText = s.toString().padStart(2, '0');
    };
    setInterval(update, 1000);
    update();
})();
</script>

PSVS

понедельник, 2 марта 2026 г.