Украшение на НГ

ВАЖНО: скачивание плагина и файлов (см. ниже) прекращено. Если вам ещё актуально, то пишите или в личку или в комментах.
Всех поздравляю с наступающим Новым годом!
Если вы ещё не успели украсить свой сайт на праздники, то предлагаю вам один из вариантов украшений на Новый Год. Выглядеть это будет примерно так
новогодее украшение для сайта
Помимо прочего, игрушки издают перезвон если по ним водить мышкой (картинка кликабательна, можете проверить).
Есть три варианта, как это сделать.
Подробности под катом.

Вариант 1: Руками

В хидер вашего шаблона (тут придётся немного поэксперементировать с расположением) вставляете подобную конструкцию.

<div class=«b-page_newyear»>
<div class=«b-page__content»>
<!-- Новогоднее украшения для сайта-->
<i class=«b-head-decor»>
<i class=«b-head-decor__inner b-head-decor__inner_n1»>
<div class=«b-ball b-ball_n1 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n2 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n3 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n4 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n5 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n6 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n7 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n8 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n9 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i1»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i2»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i3»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i4»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i5»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i6»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
</i>
<i class=«b-head-decor__inner b-head-decor__inner_n2»>
<div class=«b-ball b-ball_n1 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n2 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n3 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n4 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n5 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n6 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n7 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n8 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n9 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i1»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i2»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i3»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i4»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i5»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i6»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
</i>
<i class=«b-head-decor__inner b-head-decor__inner_n3»>
<div class=«b-ball b-ball_n1 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n2 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n3 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n4 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n5 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n6 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n7 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n8 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n9 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i1»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i2»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i3»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i4»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i5»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i6»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
</i>
<i class=«b-head-decor__inner b-head-decor__inner_n4»>
<div class=«b-ball b-ball_n1 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n2 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n3 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n4 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n5 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n6 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n7 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n8 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n9 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i1»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i2»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i3»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i4»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i5»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i6»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
</i>
<i class=«b-head-decor__inner b-head-decor__inner_n5»>
<div class=«b-ball b-ball_n1 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n2 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n3 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n4 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n5 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n6 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n7 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n8 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n9 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i1»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i2»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i3»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i4»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i5»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i6»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
</i>
<i class=«b-head-decor__inner b-head-decor__inner_n6»>
<div class=«b-ball b-ball_n1 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n2 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n3 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n4 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n5 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n6 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n7 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n8 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n9 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i1»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i2»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i3»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i4»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i5»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i6»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
</i>
<i class=«b-head-decor__inner b-head-decor__inner_n7»>
<div class=«b-ball b-ball_n1 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n2 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n3 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n4 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n5 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n6 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n7 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n8 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_n9 b-ball_bounce»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i1»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i2»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i3»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i4»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i5»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
<div class=«b-ball b-ball_i6»><div class=«b-ball__right»></div><div class=«b-ball__i»></div></div>
</i>
</i>
</div>
</div>

<link rel=«stylesheet» href=«clientscript/new_year/new_year_style.css»>
<script type=«text/javascript» src=«ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js»></script>
<script type=«text/javascript» src=«clientscript/new_year/swfobject.min.js»></script>
<script type=«text/javascript» src=«clientscript/new_year/newyear.js»></script> 


А в корень вашего сайта кладёте содержимое папки из архива по ссылке — «Ссылка для скачивания»
Обратите внимание, что следует обе папки из архива отдельно поместить в корень сайта или поправить вышеприведенный код, в котором указан путь к необходимым файлам.
Минусы такого подхода: возможно вам придётся поиграться с CSS настройками скрипта, чтоб подогнать под ваш сайт.

Вариант 2: Рекламный.

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

Вариант 3: Плагин для LS.

Замечательный программист AlikMis совершенно бесплатно реализовал для нашего сайта плагин, который выводит всю эту красоту.
Но, увы и ах, и тут есть свой минус:плагин реализован под наш оригинальный шаблон на основе developer и возможно вам придётся его немного адаптировать.
Примечание: если вам подошел плагин, то благодарите автора.

Данная реализация не претендует на абсолютную истину и точность. Прошу извинить за излишнее количество внешних ссылок и ещё раз поздравляю всё сообщество с наступающим Новым Годом!

4 комментария

avatar
Автор, наверное стоит перенести эту заметку в блог «Tips & tricks» :)
avatar
Да, наверное правильно. Перенёс.
avatar
У меня на странице входа так costolom.ru/login ;) В инете этот метод давно уже как года 2, сначала стоял у Яндекс.Почта т.е это их фича)))
avatar
И? ))
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.