Всем привет. В магазинах уже полно новогодних игрушек. Пора и нам заняться красивыми рюшечками к нашему блогу или сайту.
В далеком 2012 году Yandex порадовал своих клиентов оригинальным подарком на своем почтовом портале. Веселая ёлочная гирлянда из веточек и шаров радовала глаз не только клиентов, но и владельцев других сайтов. Последние поспешили одолжить код построения новогодней гирлянды для собственных сайтов. И вот этот код уже второй год гуляет по планете, т.е. интернету. С легкой руки автора ее называют «Новогодняя мотня яндекса». Так он написал в комментарии одного из файлов. Название спорно, как для меня, ибо "мотня" это совсем другое), и называть так украшение как минимум не логично. Но я же не автор. Поэтому дальше просто разберем этот код для встраивания его в ваш любимый сайт или блог.
В далеком 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.
Поскольку заливать ничего не надо, эта гирлянда устанавливается очень просто. Берем в разделе дизайна любой html-блок и весь код гирлянды помещаем туда. Готово! Просто до безобразия.
Установка гирлянды на сайт.
Вот так вот. Просто и со вкусом. Надеюсь вы легко оживите свои сайты и блоги красивыми гирляндами.
Тест офф бест.
ОтветитьУдалить