Как быстро поставить Георгиевскую ленту на свой сайт

Здравствуйте, друзья! В предверии дня Победы хочу с вами поделиться способом быстрой вставки Георгиевской ленты на свой сайт. Сделать это вовсе не так и сложно. От вас потребуется только Элементарная аккуратность, а всё остальное я вам расскажу, покажу. И естественно поделюсь с вами всеми необходимыми исходными данными.

Сразу хочу сказать, что способ пригодится вам скорее всего не один раз, потому что код является универсальным. И им можно воспользоваться накануне любого праздника. Естественно, что нужно будет только иметь картинку соответствующей тематики.

Для меня вообще праздник Победы – очень важный праздник. В прошлом году, когда я только начинал вести блог, одной из моих первых статей стала статья Мы обязаны помнить.

Для тех кто читает эту статью уже после того, как я убрал ленту со своего блога, я покажу скриншот, как это выглядело в то время, когда лента стояла в праздничные дни.

Для того, чтобы установить такую ленту Вам понадобится вот такой код.

<div style="position: absolute; top: 10%; left: 0;">
<img src="ссылка на картинку"
title="Мы помним! Мы Гордимся!">
</div>

Его можно просто скопировать, и после этого поставить в файл header.php Вашей темы перед тегом </head>. Указанный выше код прикрепляет на страницу Вашего сайта ленту таким образом, что при прокрутке страницы лента уходит вверх. Это полезная функция, особенно, если сайт в основном просматривают с мобильных телефонов. Это позволяет сделать максимально доступным чтение контента.

Если применять код, который указан ниже, то лента будет неподвижной.

<div style="position: fixed; top: 10%; left: 0;">
<img src="ссылка на картинку"
title="Мы помним! Мы Гордимся!">
</div>

По большому счёту для десктопных посетителей Вашего блога это не страшно. Но тем, кто зайдёт на сайт с мобильного, она будет уже мешать. Если большинство Ваших читателей пользуются именно настольными компьютерами, или тема Вашего сайта не адаптивная, то в этом случае можно выбирать этот второй вариант.

В любом случае Вы можете изменить левое положение картинки на странице на правое (заменив left на right). И соответственно изменяя значения, указанные для top и left, отрегулировать отступы сверху и сбоку.

Вы можете на свое усмотрение поставить любую другую картинку вместо Георгиевской ленточки, можете воспользоваться моим предложением из вот такой подборки.

Вот вам ссылка на неё. Все картинки залиты на фотохостинг Япикс. Как их оттуда достать и, как ими пользоваться, можно посмотреть в видео которое  расположено ниже. Думаю, теперь Вы поняли, что я имел ввиду, когдая сказал в начале статьи, что это будет очень быстрый способ вставки, потому что у Вас есть готовый код (скачать текстовый документ с кодом и пояснениями), будет набор картинок (перейти в фотохостинг) и будет короткое поясняющие видео. Вы, как раз сейчас и можете его посмотреть:

Надеюсь у Вас не осталось вопросов по установке Георгиевской ленты, надеюсь что Вы читаете эту статью хотя бы 9 мая и ещё успеете сделать праздничным дизайн своего сайта. Но если нет, то берите себе способ на заметку. Праздников впереди еще много, а код универсальный. Пишите в комментариях, что у Вас получилось. Если будут вопросы, Я конечно же на них отвечу.

С уважением, Сергей Почечуев