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

Автор статьи
Денис Иванов
Время на чтение: 58 минут
АА

Новый год

Здравствуйте. Сегодня статья будет об украшении сайта к приближающимся новогодним праздникам. Перепробовал несколько вариантов. Ни один из них не нравился. И тут на одном из сайтов увидел симпатичную гирлянду в шапке. Ее и решил себе установить. В интернете скрипт этой гирляны проскакивает под странным название «Новогодняя мотня от Яндекса». Пишут, что несколько лет назад поисковик украсил свой сайт. Кто-то спарсил скрипт, картинки и выложил в сеть.

Гирлянда в шапке блога

Если поводить мышкой по гирлянде, то шары качаются и издают мелодичный звук. В исходном варианте в гирлянде только красные и белые шары. Мной добавлены шары синего цвета.
Как же украсить сайт к новому году с помощью этой гирлянды. В конце статьи дам ссылку на скачивание архива. В архиве сам скрипты и все необходимые файлы. Распаковать архив и разместить папку в корне вашего блога. Не скопировать файлы в корень, а именно всю папку скопировать.
В файле header.php разместите такой код

[php]<script type=»text/javascript» src=»http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js»></script>

<script type=»text/javascript» src=»/new_year_bals7/swfobject.min.js»></script>
<script type=»text/javascript» src=»/new_year_bals7/newyear.js»></script>

<link rel=»stylesheet» href=»/new_year_bals7/style.css»>

<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>[/php]

Вот и вся установка. Обновите страницу и наслаждайтесь гирляндой. Если хотите, чтобы не было звука, из папки удалите файл ny_sing.swf.
Для выбора цветов шаров в гирлянде, найдите в файле style.css в папке скрипта такой код

[css].b-ball_n1 .b-ball__i{background:url(balls/b-ball_n1_blue.png) no-repeat}
.b-ball_n2 .b-ball__i{background:url(balls/b-ball_n2.png) no-repeat}
.b-ball_n3 .b-ball__i{background:url(balls/b-ball_n3.png) no-repeat}
.b-ball_n4 .b-ball__i{background:url(balls/b-ball_n4.png) no-repeat}
.b-ball_n5 .b-ball__i{background:url(balls/b-ball_n5_blue.png) no-repeat}
.b-ball_n6 .b-ball__i{background:url(balls/b-ball_n6.png) no-repeat}
.b-ball_n7 .b-ball__i{background:url(balls/b-ball_n7.png) no-repeat}
.b-ball_n8 .b-ball__i{background:url(balls/b-ball_n8.png) no-repeat}
.b-ball_n9 .b-ball__i{background:url(balls/b-ball_n9.png) no-repeat}[/css]

Чтобы поменять цвет шара с красного на синий, добавьте в конце названия файла «_blue». Шар поменяет свой цвет.

Все красные шары продублированы синими. Белые оставлены без изменений. Если у вас пропал белый шар, значит переименовали не ту строчку.

Скрипт актуализирован для jquery 1.11.1. Звук гирлянды есть. Теперь и при использовании последней версии библиотеки сможете украсить сайт к новому году.

Сам архив со скриптом

Рейтинг автора
Автор статьи
Денис Иванов
Автор блога, всея заработка в этих ваших интернетах
Написано статей
183
Помогла статья? Оцените её
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 Оценка: 4,83 (голосов: 6)
Загрузка...
Комментарии
  1. Ирина

    Что-то не нашла по ссылке ЗДЕСЬ где подписаться на рассылку.

    • Денис Иванов

      Форма рассылки на главной боковой панели.

  2. Лера

    Добрый день. Подскажите где ссылка на архив? на рассылку подписалась….

    • Денис Иванов

      Добрый. В письме после подписки придет код. Его нужно ввести в поле.

  3. Татьяна

    Здравствуйте! С НАСТУПАЮЩИМ НОВЫМ ГОДОМ!
    У меня вопрос, как эту прелесть установить на сайте Водпресс, куда именно вставлять код, чтобы эти шары были на всех страницах. Тема сайта Blain
    Спасибо,
    С УВ Татьяна

    • Денис Иванов

      В файл заголовка header.php. Папку из архива скопировать в корень сайта.

  4. MikeIcem

    В самом деле к Новому году хочется украсить свой сайт, чтобы было праздничное настроение. Тем более, что это настроение будет и у вас и у читателей.

  5. olgalaura

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

    • Денис Иванов

      Главное не переборщить с украшениями. Все хорошо в меру.

  6. Анна

    Прикольно, надо попробовать!

  7. Максад Исаев

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

    Вначале вообще не было желания украшать свой блог. Но вот зашел в вам в гости !Классное украшение! Мне тоже очень понравилось! Так что с удовольствием воспользуюсь!

    • Денис Иванов

      Дио́ни́с(др.-греч. Διόνυσος, лат. Dionysus), Ва́кхос, Ба́хус (др.-греч. Βάκχος, лат. Bacchus) — в древнегреческой мифологии младший из олимпийцев, бог растительности, виноградарства, виноделия, производительных сил природы, вдохновения.

      Современное имя Денис произошло от др.-греч. Διονύσιος и греч. Διόνυσος, означающего «принадлежащий, посвящённый Дионису». Дионис — олимпийский бог виноградарства, виноделия, плодородия, вдохновения, производительных сил природы в древнегреческой мифологии.

      Так что, все повязано. :)

  8. Сергей

    Денис, может сжать png файлы в сборке? Прогнал через тинипнг — сэкономил 58% на размере картинок.

    Украшение то, что надо! Забрал к себе)

    • Денис Иванов

      Можно и сжать конечно. Или просто пересохранить в gif фотошопом. Обычно ставят на пару недель и удаляют. Можно и не жать.

  9. Александр Каратаев

    Пару лет назад ставил себе на блог подобный скрипт. В этот раз решил блог никак не украшать… Смотрел на других — у кого-то снег идёт, у кого-то гирлянда… Приелось всё уже. Но сам по себе скрипт неплох. Я когда себе ставил тоже что-то в нём модифицировал, уж не помню точно что и CSS правил…

    • Денис Иванов

      Я в этот год тоже не стал ничего на блог добавлять. Тоже все приелось.

Добавить комментарий
Adblock
detector