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

25.12.2018

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



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

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

  • знать (хотя бы примерно) высоту шапки сайта,
  • найти подходящую картинку в интернете на прозрачном фоне.
Простой способ узнать (если не помните) высоту шапки сайта, то можно просто сделать скриншот главной страницы сайта, затем вставить его в программу 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://2.bp.blogspot.com/-WmuhlNcg0AQ/XB8pragy8HI/AAAAAAAAIcI/bxLEu5-UW0UJJK_ZZrXYzI70xaaFN2g6gCLcBGAs/s1600/350692_03a5a.png" alt="Новогодняя ветка"/></a>
</div>

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

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

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




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

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



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




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

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

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

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

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


2 комментария:

  1. Спасибо, Мария!!!! С Новым годом Вас!!!! Спасибо за советы, очень помогают!

    ОтветитьУдалить
  2. Очень хорошо! Вставить картинку, не меняя в целом дизайн — отличная идея)))

    ОтветитьУдалить

Загляните и на другие страницы ^