Привет всем! Скоро новый год,а снега не хватает. Но на наше счастье есть возможность добавить снежку в блог. Что может быть более приятным, чем приветствуя посетителей блога с падающим снегом. Снег плавно падает вниз страницы, а затем исчезает. Мы можем контролировать количество снежинок, а также время, после которого они должны исчезнуть. Вы можете легко заменить снег с любым Вашим изображением, который вы предпочитаете. Виджет хорош тем, что он всепогодный. Стоит только поменять снег на осенние листья или сердечки и т.д. Виджет: красиво падающий снег установить можно с помощью обыкновенного гаджета HTML/JavaScript.

Давайте сначала посмотрим. Демо. Теперь перейдём к установке.
Как установить виджет: красиво падающий снег в блог

Перейти Дизайн. Выберите HTML/JavaScript гаджет.Вставьте в его поле следующий  код:

<script type="text/javascript">
  //Configure below to change URL path to the snow image
  var snowsrc="https://lh6.googleusercontent.com/-BY_1vzDtGGk/TuA3QE5YV9I/AAAAAAAACnU/N5CcD1uJfhE/s24/snow.gif"
  // Configure below to change number of snow to render
  var no = 15;
  // Configure whether snow should disappear after x seconds (0=never):
  var hidesnowtime = 0;
  // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
  var snowdistance = "pageheight";
///////////Stop Config//////////////////////////////////
  var ie4up = (document.all) ? 1 : 0;
  var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
  var dx, xp, yp;    // coordinate and position variables
  var am, stx, sty;  // amplitude and step variables
  var i, doc_width = 800, doc_height = 600;

  if (ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
  } else if (ie4up) {
    doc_width = iecompattest().clientWidth;
    doc_height = iecompattest().clientHeight;
  }
  dx = new Array();
  xp = new Array();
  yp = new Array();
  am = new Array();
  stx = new Array();
  sty = new Array();
  snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "https://lh6.googleusercontent.com/-BY_1vzDtGGk/TuA3QE5YV9I/AAAAAAAACnU/N5CcD1uJfhE/s24/snow.gif" : snowsrc
  for (i = 0; i < no; ++ i) {
    dx[i] = 0;                        // set coordinate variables
    xp[i] = Math.random()*(doc_width-50);  // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20;         // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random();     // set step variables
        if (ie4up||ns6up) {
      if (i == 0) {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
      } else {
        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
      }
    }
  }
  function snowIE_NS6() {  // IE and NS6 main animation function
    doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
        doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
    for (i = 0; i < no; ++ i) {  // iterate for every dot
      yp[i] += sty[i];
      if (yp[i] > doc_height-50) {
        xp[i] = Math.random()*(doc_width-am[i]-30);
        yp[i] = 0;
        stx[i] = 0.02 + Math.random()/10;
        sty[i] = 0.7 + Math.random();
      }
      dx[i] += stx[i];
      document.getElementById("dot"+i).style.top=yp[i]+"px";
      document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
    }
    snowtimer=setTimeout("snowIE_NS6()", 10);
  }
    function hidesnow(){
        if (window.snowtimer) clearTimeout(snowtimer)
        for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
    }  
if (ie4up||ns6up){
    snowIE_NS6();
        if (hidesnowtime>0)
        setTimeout("hidesnow()", hidesnowtime*1000)
        }
</script>

Настройки: var no = 15; -- это строчка отвечает за количество падающих снежинок. Выделенным жирным шрифтом это URL адрес изображения снежинок. Вы можете менять картинки на свои: листья,бриллианты, сердечки,да на что угодно по вашему желанию. Теперь сохраните гаджет и перетащите его куда нибудь,желательно на верх в свободное место. Всё. Мы установили в блог виджет: красиво падающий снег на Новый год. До новых встреч.


Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями в соцсетях:


30 коммент. :

  1. Александр Глотов14 декабря 2011 г., 9:50

    Спасибо, скрипт работает отлично

    ОтветитьУдалить
  2. Пожалуйста.Пользуйтесь на здоровье.

    ОтветитьУдалить
  3. У меня не срабатывает этот скрипт, почему-то... Пишет следующее: Ошибка при синтаксическом анализе XML (строка 929, столбец 40): The entity name must immediately follow the '&' in the entity reference.

    ОтветитьУдалить
  4. У Вас какой шаблон?Должен работать.

    ОтветитьУдалить
  5. В смысле, какой? Блоггеровский :)

    ОтветитьУдалить
  6. Попробуй вот это:http://new-school-blogger.blogspot.com/2011/12/vidzhetpadajuschie-snezhinkizvjozdylist.html

    ОтветитьУдалить
  7. А что прописать надо чтобы он непрерывно шел ??

    ОтветитьУдалить
  8. А он разве перестаёт?Где вы это увидели? Что то я Вас не пойму.

    ОтветитьУдалить
  9. Я имею ввиду чтобы он непрерывно падал !!

    А он падает так: сначало выпадет первый слой снега а потом 2 и т.д.

    ОтветитьУдалить
  10. Это же простой виджет.Поставь попробуй мелкий снег.Помоему он падает непрерывно:http://new-school-blogger.blogspot.com/2011/12/vidzhetpadajuschie-snezhinkizvjozdylist.html

    ОтветитьУдалить
  11. Я увидел у Вас в Блоге Фиджет.

    Подскажите пожалуйста устраивает ли он, Чем он особенно полезен Вам.

    Мы разрабатываем Российский аналог подобного виджета.

    Я был бы очень признателен Вам если бы Вы зашли на сайт http://karcher-23.ru/
    и нажали сначало на кнопку Ы и потом на В

    Откроется наш вариант Фиджета
    Также на сайте http://www.letsrockworld.ru расположен рядом с фиджетом и наш вариант.
    Это вариант не срытой установки. Но также на этом сайте расположен и скрытый.

    Сайт http://karcher-23.ru/ более посещаем поэтому на нем наиболее заметна динамика работы нашего варианта.

    Если Вы наведете мышь на Город то увидите подсказку.
    Если на ведете на слово Пришел то увидите откуда пришел посетитель или по какому запросу.
    Если Вы наведете на Посетитель то увидите операционную систему и браузер посетителя.

    Нажимать не надо. Достаточно просто навести мышь.

    Также помимо трекера установлена с право закладка с возможностью написать блогеру в соц. сети или поговорить онлайн.

    В планах добавить:

    1 Авто формирования облака Тегов (из запросов по которым пришли посетители) для увеличения посещаемости сайта. И облегчения нахождения его поисковыми системами.

    2 Автоприветствия посетителя. Например если посетитель пришел из Пушкина ему можно будет сказать Что и Вы были в Пушкино и что Вам там понравилось. Или то что Вы доставляете в Пушкино Ваши товары.

    3 И мини блок бесплатной рекламы в котором будет показываться реклама Блогов тех кто установил виджет у себя на в блогах.

    Установили бы себе такой? Или что то надо доработать под Вас?
    Скажите пожалуйста что еще может быть интересно Вам и что может помочь поднять посещаемость Вашего блога.

    Извините что побеспокоил.
    Буду благодарен Вам за Ваши комментарии ftd199@bk.ru.

    С Уважением
    Аскар

    ОтветитьУдалить
  12. Я новенькая в ваших рядах. Так что, если вопрос глупый, не ругайтесь)) Например, в блоге несколько страниц, тогда снег будет падать на всех страницах, на одной (которой установлю), на главной или все из этих вариантов возможны (по отдельности, конечно)))?

    ОтветитьУдалить
  13. Можно установить на главной,можно на любой,как сделать это смотрите у меня в другом блоге:http://new-school-blogger.blogspot.com/2011/11/pokaz-vidzhetovgadzhetov-na.html

    ОтветитьУдалить
  14. Рахівська центральна районна б6 декабря 2012 г., 10:31

    Огромное спасибо за снежинки! Украсила ими и наш библиотечный блог, красота неописуемая! :))

    ОтветитьУдалить
  15. Огромное пожалуйста.

    ОтветитьУдалить
  16. Спасибо класс +5. Что получилось можно посмотреть тут http://rstut-dengi.blogspot.ru/ Просто класс!

    ОтветитьУдалить
  17. Благодарю за виджет "падающий снег", блог его "принял", так как остальные попытки украсить блог к празднику завершались грозными предупреждениями удалить страницы из-за спама.

    Начинающий ("детищу" два месяца) блогер.

    ОтветитьУдалить
  18. Вы можете попробовать более удобный сервис: http://new-school-blogger.blogspot.ru/2012/01/vidzhet-blogger-padajuwij-sneg-dozhd.html проще установка.Можно выключать снег и потом включать.

    ОтветитьУдалить
  19. Отлично!его я и поставлю на новый год

    ОтветитьУдалить
  20. Доброго времени суток! А у меня вместо снега падает квадратик не открывшегося изображения

    ОтветитьУдалить
    Ответы
    1. Здравствуйте,Ирина! Может у вас фон блога белый?Тогда надо снежинки поменять. 8-)

      Удалить
  21. Спасибо большое за снег на блоге. Жаль только, что он повторяется не по всей странице, а только в верхней части. А смотрится очень даже красиво и настроение создаёт праздничное.

    ОтветитьУдалить
    Ответы
    1. Пожалуйста,Клавдия! Попробуйте вот этот виджет может он лучше.Читайте в моем блоге здесь-http://shkolablogger.ru/krasivyie-ukrasheniya-dlya-bloga-na-lyubyie-prazdniki.html

      Удалить
  22. Классный виджет! Только никак не соображу, а как поменять снежинки на листья?

    ОтветитьУдалить
    Ответы
    1. Картинку снега заменить на изображения листьев.

      Удалить