Как украсить шапку сайта к Новому году

 Есть много вариантов украшения блога или сайта к Новому году. В прошлом году я полностью меняла шапку блога. В этом решила просто добавить новогоднюю картинку в шапку. И сразу создается ощущение праздника 😉



Вы также можете добавить любую картинку к Новому году в шапку блога или сайта.

Для этого нужно:

• знать (хотя бы примерно) высоту шапки сайта,
• найти подходящую картинку в интернете на прозрачном фоне.

Простой способ узнать (если не помните) высоту шапки сайта, то можно просто сделать скриншот главной страницы сайта, затем вставить его в программу Paint. Обрезать все лишнее и в нижней части будут указаны ширина и высота изображения.

Ищем новогоднюю картинку небольшого размера. Например, в Яндекс.Картинках. Можно поискать новогодние ветки с шариками. Мне понравилась такая:

Или такая:

Но все эти красивые веточки перекрывали название блога и я написала в строке поиска "новогодние уголочки на прозрачном фоне".   

Они более компактные, но красивых тоже очень много. (Примерно 11 тыс. изображений!)

Еще сразу можно учесть - слева или справа в шапке сайта хотите расположить картинку. (Хотя в любом редакторе изображений картинку можно отобразить слева направо).

Главное, чтобы веточка или уголочек были на прозрачном фоне.

Итак, как добавить картинку в шапку сайта или блога.

Если Ваш блог на платформе Blogger - ниже пошаговая инструкция.

1. Нам нужна ссылка на изображение. Поэтому загружаем картинку в черновик сообщения Blogger.

2. Затем, поставив курсор на картинку, нажимаем правую кнопку мыши и копируем адрес изображения (или URL).

  Скопированный код можно пока в том же в черновике сообщения ниже вставить.

3. А сейчас код, который нам поможет новогоднюю картинку в шапку.

Вот он:

<div id="vetka" style="position:absolute;  top:0; right:0; z-index:999999;">
<a href="https://samasajt.blogspot.com/p/blog-page_15.html" target="_blank"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIKxiSnS9koyYcTxyg7DgiNbZMT1hZsWOr-XStTaR-iuXxz8I_aayDXUk8AjUyVYwO6tyAc62MyvZxu-Q7AySnlKLqzlGFJD4BN2SMAq70bhawN-y9CCyHEUWWqSySIriGRmJRvOB2CBY/s1600/350692_03a5a.png" alt="Новогодняя ветка"/></a>
</div>

В этом коде замените выделенное синим цветом на адрес своего изображения.

4. Далее заходим в настройки блога, на всякий случай делаем резервную копию темы (шаблона).

   Затем выбираем Изменить HTML.

5. Ставим курсор внутри рамки с кодом шаблона, нажимаем комбинацию клавиш Ctrl+F и в строке поиска пишем </header>

   Перед найденным тегом нажимаем 1 раз Enter и выше вставляем весь полученный выше код.

6.  Нажимаем кнопку Предварительный просмотр темы. Ждем, когда тема загрузится. Если все хорошо, нажимаем Сохранить тему.

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

! Если Вы хотите, чтобы изображение было слева, то замените в коде слово right на left

Еще вместо шапки сайта (например, ту же новогоднюю ветку) Вы можете добавить картинку в верхний угол сайта (левый или правый) по инструкции в статье Любая картинка в верхних углах блога.

❄❅❆❄❅❆❄❅❆❄❅❆❄❅❆❄❅❆❄❅❆❄❅❆❄❅❆

Поздравляю с наступающим Новым годом! 

Пусть он обязательно будет лучше предыдущего и исполнит все желания, 

загаданные в новогоднюю ночь!