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

ИНСТРУМЕНТЫ

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/’;

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

Обратите внимание на мой миникурс о создании аватара