Новогодний привет от Яндекса.

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

В далеком 2012 году Yandex порадовал своих клиентов оригинальным подарком на своем почтовом портале. Веселая ёлочная гирлянда из веточек и шаров радовала глаз не только клиентов, но и владельцев других сайтов. Последние поспешили одолжить код построения новогодней гирлянды для собственных сайтов. И вот этот код уже второй год гуляет по планете, т.е. интернету. С легкой руки автора ее называют «Новогодняя мотня яндекса». Так он написал в комментарии одного из файлов. Название спорно, как для меня, ибо "мотня" это совсем другое), и называть так украшение как минимум не логично. Но я же не автор. Поэтому дальше просто разберем этот код для встраивания его в ваш любимый сайт или блог. 

Вариант от Яндекса.

Итак вначале берем классический вариант,  т.е. тот который и появился впервые на Яндексе.

Установка гирлянды на сайт.

Гирлянда состоит из папки с изображениями шариков и веточек /balls, папки /scripts c тремя скриптами  jquery.min.js, newyear.js и swfobject.js, а также двух файлов style.css  и ny2012.swf. Кроме того в body вашей html-страницы где вы будете вызывать гирлянду надо будет вставить блок  div class="b-page_newyear"…div. Более подробно вы можете глянуть в архиве. А рабочий пример здесь.

Также в архиве я добавил вам вариант скрипта newyear2.js на тот случай если вам неудобно добавлять на свой сайт целый  блок div, а захотите  только одной строкой типа script type='text/javascript' src='newyear2.js'

Главное чтобы jquery.min.js вызывался первым!

Какие особенности надо помнить? Гирлянда появляется в самом вверху окна браузера, при вертикальном скроллинге скрывается там же. При наведении курсора мыши шарики раскачиваются и звучит приятный  звон. На каждом шарике разный! Автор постарался сделать не просто украшение, а музыкальную шкатулку. Молодец!

Установка гирлянды на блог в blogger.

Поскольку на блоггер файлы не залить, то их надо разместить на другом доступном ресурсе. Вот как у меня.) После этого все изменения производятся в самом шаблоне вашего блога. Надо только помнить что все src-ссылки надо вставлять с полным путем, например script type='text/javascript' src='http://flasher911.narod.ru/scripts/newyear2.js'

Как это работает на моем блоге будет видно ближе к новому году.)

Вариант от Blogger.vipbiz.org.

А теперь про облегченный вариант гирлянды, который видимо специально затачивался для blogger-a.

Какие особенности второго варианта? Во первых, он состоит из одного блока стилей. Все изображения заблаговременно залиты на гугл. Во вторых, этот вариант всегда вверху окна, даже при скроллинге. В третьих, он не музыкальный(, потому и облегченный. И шарики двигаются сами по себе, возможно это и к лучшему.

Установка гирлянды на блог blogger.

Поскольку заливать ничего не надо, эта гирлянда устанавливается очень просто. Берем в разделе дизайна любой html-блок и весь  код гирлянды помещаем туда. Готово! Просто до безобразия.

Установка гирлянды на сайт.

Точно так же как и на любой сайт. В любое место после тега body. Можете наблюдать ее работу здесь.

Вот так вот. Просто и со вкусом. Надеюсь вы легко оживите свои сайты и блоги красивыми  гирляндами.