Как установить Новогоднюю гирлянду на сайт

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

ИНСТРУМЕНТЫ

1. Сайт
2. Хостинг – http://saitcom.ru/hosting
3. Файлы гирлянды – скачать

ПЛАН ДЕЙСТВИЙ

ШАГ 1 Заходим на сайт как Администратор

http://ВАШ_САЙТ/wp-admin

ШАГ 2 В левой части сайта переходим в меню

ВНЕШНИЙ ВИД – РЕДАКТОР

ШАГ 3 Справа выбираем файл: “Заголовок (header.php)”

И открываем его на редактирование.

ШАГ 4 Загружаем файлы гирлянды

Переходим на хостинг и загружаем файлы гирлянды

ШАГ 5 Подключаем файлы гирлянды

Теперь начинаем вставлять код по шагам.

HTML

Вот этот код вставляем после тега body:

<!– новогодняя гирлянда начало –>
<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” data-note=”0″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n2 b-ball_bounce” data-note=”1″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n3 b-ball_bounce” data-note=”2″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n4 b-ball_bounce” data-note=”3″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n5 b-ball_bounce” data-note=”4″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n6 b-ball_bounce” data-note=”5″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n7 b-ball_bounce” data-note=”6″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n8 b-ball_bounce” data-note=”7″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n9 b-ball_bounce” data-note=”8″><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” data-note=”9″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n2 b-ball_bounce” data-note=”10″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n3 b-ball_bounce” data-note=”11″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n4 b-ball_bounce” data-note=”12″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n5 b-ball_bounce” data-note=”13″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n6 b-ball_bounce” data-note=”14″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n7 b-ball_bounce” data-note=”15″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n8 b-ball_bounce” data-note=”16″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n9 b-ball_bounce” data-note=”17″><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” data-note=”18″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n2 b-ball_bounce” data-note=”19″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n3 b-ball_bounce” data-note=”20″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n4 b-ball_bounce” data-note=”21″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n5 b-ball_bounce” data-note=”22″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n6 b-ball_bounce” data-note=”23″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n7 b-ball_bounce” data-note=”24″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n8 b-ball_bounce” data-note=”25″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n9 b-ball_bounce” data-note=”26″><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” data-note=”27″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n2 b-ball_bounce” data-note=”28″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n3 b-ball_bounce” data-note=”29″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n4 b-ball_bounce” data-note=”30″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n5 b-ball_bounce” data-note=”31″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n6 b-ball_bounce” data-note=”32″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n7 b-ball_bounce” data-note=”33″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n8 b-ball_bounce” data-note=”34″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n9 b-ball_bounce” data-note=”35″><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” data-note=”0″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n2 b-ball_bounce” data-note=”1″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n3 b-ball_bounce” data-note=”2″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n4 b-ball_bounce” data-note=”3″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n5 b-ball_bounce” data-note=”4″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n6 b-ball_bounce” data-note=”5″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n7 b-ball_bounce” data-note=”6″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n8 b-ball_bounce” data-note=”7″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n9 b-ball_bounce” data-note=”8″><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” data-note=”9″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n2 b-ball_bounce” data-note=”10″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n3 b-ball_bounce” data-note=”11″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n4 b-ball_bounce” data-note=”12″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n5 b-ball_bounce” data-note=”13″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n6 b-ball_bounce” data-note=”14″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n7 b-ball_bounce” data-note=”15″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n8 b-ball_bounce” data-note=”16″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n9 b-ball_bounce” data-note=”17″><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” data-note=”18″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n2 b-ball_bounce” data-note=”19″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n3 b-ball_bounce” data-note=”20″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n4 b-ball_bounce” data-note=”21″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n5 b-ball_bounce” data-note=”22″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n6 b-ball_bounce” data-note=”23″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n7 b-ball_bounce” data-note=”24″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n8 b-ball_bounce” data-note=”25″><div class=”b-ball__right”></div><div class=”b-ball__i”></div></div>
<div class=”b-ball b-ball_n9 b-ball_bounce” data-note=”26″><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>
<!– новогодняя гирлянда конец –>

CSS

<link rel=”stylesheet” href=”style.css”>

JS

Подключаем скрипт:

<script src=”script.js” defer></script>

В архиве со скриптом есть папка audio со всеми нотками в mp3 формате.

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

Для этого в файле script.js ищем строчку:

var path = ‘audio/’;

И корректируем в зависимости от расположения папки audio на сайте.

Например,

var path = ‘/templates/demo/audio/’;

Файлы гирлянды – скачать