🎅 Как украсить свой блог Blogger к Новому году : Как добавить новогоднее настроение на блог Blogpost

Как украсить новогодними скриптами блог на Blogger

 Один из  способов украсить блог — это добавить анимацию падающего снега или новогоднюю гирлянду. В этой статье покажу, как легко и быстро можно установить эти эффекты на Blogger.

🎄 Как добавить новогоднюю гирлянду и снег на блог Blogger

💡Добавить новогодние украшения на блог Blogger с помощью JavaScript — это просто и эффектно!
Теперь и вы будете знать, как установить гирлянду и снег на свой блог, создавая праздничное настроение для посетителей.
Экспериментируйте с настройками и создавайте уникальный праздничный дизайн!

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

👉❓ Почему стоит использовать скрипты для украшений?

• Легкость установки — код добавляется без изменения основной структуры сайта.
• Быстрота — установка занимает несколько минут.
• Удаление — украшения легко убрать в любой момент.

---

Добавление скрипта новогодней гирлянды

1. Скопируйте код гирлянды:

   
   

   <style type="text/css">
   #garland {position:absolute;top:0;left:0;background-image:url('http://dleshka.org/img/christmas-lights.png');height:36px;width:100%;overflow:hidden;z-index:99}
   #nums_1 {padding:100px}
   .garland_1 {background-position: 0 0}
   .garland_2 {background-position: 0 -36px}
   .garland_3 {background-position: 0 -72px}
   .garland_4 {background-position: 0 -108px}
   </style>
   
   <div id="garland" class="garland_4"><div id="nums_1">1</div></div><div style="position:absolute;top:-1000px">
   
   <script type="text/javascript">
   function garland() {
     nums = document.getElementById('nums_1').innerHTML;
     if(nums == 1) {document.getElementById('garland').className='garland_1';document.getElementById('nums_1').innerHTML='2'}
     if(nums == 2) {document.getElementById('garland').className='garland_2';document.getElementById('nums_1').innerHTML='3'}
     if(nums == 3) {document.getElementById('garland').className='garland_3';document.getElementById('nums_1').innerHTML='4'}
     if(nums == 4) {document.getElementById('garland').className='garland_4';document.getElementById('nums_1').innerHTML='1'}
   }
   setInterval(function(){garland()}, 600);
   </script>
       

2. Добавьте код в блог:

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

3. Настройте картинку:

   Замените ссылку в первой строке скрипта http://dleshka.org/img/christmas-lights.png на ссылку к своей картинке или добавьте эту:
   
   

   
   

---

Добавление скрипта падающего снега

• Скопируйте код снега:

  <script type="text/javascript">
    var num_flakes = 50; 
    var snowflakes = [];
  
    for (var i = 0; i < num_flakes; i++) {
      var snowflake = document.createElement("div");
      snowflake.className = "snowflake";
      document.body.appendChild(snowflake);
      snowflakes.push(snowflake);
    }
  
    function positionSnowflakes() {
      for (var i = 0; i < snowflakes.length; i++) {
        var snowflake = snowflakes[i];
        var x = Math.random() * window.innerWidth;
        var y = Math.random() * window.innerHeight;
        snowflake.style.left = x + "px";
        snowflake.style.top = y + "px";
      }
    }
  
    function animateSnowflakes() {
      for (var i = 0; i < snowflakes.length; i++) {
        var snowflake = snowflakes[i];
        var speed = Math.random() * 1 + 0.5;
        var movement = snowflake.offsetTop + speed;
  
        if (movement > window.innerHeight) {
          movement = -20;
        }
  
        snowflake.style.top = movement + "px";
      }
      requestAnimationFrame(animateSnowflakes);
    }
  
    positionSnowflakes();
    animateSnowflakes();
  </script>
  
  <style>
    .snowflake {
      position: absolute;
      background-color: #fff;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      opacity: 0.8;
    }
  </style>
      

• Добавьте код в блог:

  1. Перейдите в Настройки блога.
  2. Откройте раздел Дизайн.
  3. Нажмите «+ Добавить гаджет» и выберите HTML/JavaScript.
  4. Вставьте код снега в поле Содержание и сохраните.

---

✨💡 Советы по настройке

1. Измените num_flakes, чтобы регулировать количество снежинок.
2. Подберите свою картинку для гирлянды, чтобы она лучше сочеталась с дизайном.
3. Оба скрипта можно включать и отключать в любое время — они легко удаляются из гаджета.

---