Георгиевская ленточка

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

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

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

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

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


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

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

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

    ОтветитьУдалить
  3. A very interesting article, with useful content such as the Aesthetic Medicine Center in Madrid. Novoclinic with Professionals Endorsed by more than 10 years of experience. Treatments and discounts in cosmetic surgery, cosmetic medicine, laser dermatology and laser hair removal, visit us in Madrid.
    To congratulate the women with flowers, we have the florist and accessories in Boadilla del Monte store Hana Floristeria. .

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

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