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

Новый год

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

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

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

Вот и вся установка. Обновите страницу и наслаждайтесь гирляндой. Если хотите, чтобы не было звука, из папки удалите файл ny_sing.swf.
Для выбора цветов шаров в гирлянде, найдите в файле style.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}

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

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

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

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

New Year Bals7
Скрипт гирлянды украшения сайта к новому году
Скачано: 16, размер: 396.8 KB
Интересно:
Сбербанк, коллекторы и налоговая. А у вас есть в стране полный тёзка?
[/sociallocker]

Поделиться с друзьями

С уважением Денис Иванов, автор блога dendrblog.ru

Подписка

на обновления блога

Никакого спама никогда не будет. Только оповещения о выходе новых материалов на блоге.

Оцените статью
( Пока оценок нет )
Поделиться с друзьями
Добавить комментарий

Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.

  1. Ирина

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

    Ответить
    1. Денис Иванов автор

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

      Ответить
  2. Лера

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

    Ответить
    1. Денис Иванов автор

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

      Ответить
  3. Татьяна

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

    Ответить
    1. Денис Иванов автор

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

      Ответить
  4. MikeIcem

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

    Ответить
  5. olgalaura

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

    Ответить
    1. Денис Иванов автор

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

      Ответить
  6. Анна

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

    Ответить
  7. Максад Исаев

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

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

    Ответить
    1. Денис Иванов автор

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

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

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

      Ответить
  8. Сергей

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

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

    Ответить
    1. Денис Иванов автор

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

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

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

    Ответить
    1. Денис Иванов автор

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

      Ответить