Привет, друзья. В каких - то случаях можно добавить в заголовок блога маленькую картинку, чтобы поздравить своих пользователей с очередным праздником. Будь то Новый год, 8 марта или просто юбилей блога. Даже миниатюру сезона года. Вариантов много. Если вы проводите какие - то конкурсы тогда и логотип - картинка тоже будет хорошо смотреться.
Это добавит уникальность и привлечёт внимание пользователей. Не надо на стороне заказывать ничего, потому что в Blogger это очень легко организовать. Как только что - то становится уже не актуальным, можно убрать и в очередной раз установить опять, но уже другое. Посмотрите примерно несколько вариантов.
Живой пример на тестовом блоге.
Нам понадобится маленькая картинка или иконка, соответствующая случаю, в формате Png. Вы можете такую найти в интернете или создать сами. Можно воспользоваться сервисом iconfinder.com. О нём я писала в этом сообщении.
И наконец совсем малюсенький код.
#header-inner:after {
content: url(https://2.bp.blogspot.com/-1ZEagUoyjl0/WI9tHTAej6I/AAAAAAAAQJs/Jf_8QcbEu24RBKLpQT7RpEoyWuffCM--QCLcB/s1600/Valentines-BloggerSpice.png);
position: absolute;
z-index: 9999999;
margin-left: 35%;
margin-top: -12.6%;
}
content: url(https://2.bp.blogspot.com/-1ZEagUoyjl0/WI9tHTAej6I/AAAAAAAAQJs/Jf_8QcbEu24RBKLpQT7RpEoyWuffCM--QCLcB/s1600/Valentines-BloggerSpice.png);
position: absolute;
z-index: 9999999;
margin-left: 35%;
margin-top: -12.6%;
}
Скопируйте его в блокнот и замените адрес изображения на адрес вашей картинки. Или для пробы можете просто взять этот код. Идём во вкладку тема. Находим знакомую всем уже строку ]]></b:skin> и прямо над ним его устанавливаем. Сохраните и просмотрите результат.
Возможно, картинка не совсем корректно отобразиться относительно заголовка. Но это поправимо. Поиграйтесь со значениями margin-left: 35%; и margin-top: -12.6%;, которые я отметила синим цветом. Пример в статье отступы и поля.
margin-left: 35%; расстояние относительно левого края. Добавляйте или уменьшайте значение.
margin-top: -12.6%; отступы сверху.
Сделать это нужно всего один раз. Потом просто сохранить код для следующего случая.
Не думаю, что у вас будут проблемы с реализацией, но если всё же возникнут вопросы, обращайтесь.
Всем спасибо за визит. Увидимся.
здесь можно оформить подписку на новые шпаргалки
Виктория, очень ИНТЕРЕСНО! А эта картинка будет видна в начале каждого поста? А если она мне нужна только для одного поста? Попробую пока сделать ее в тестовом блога! Если получится или понравится, то можно попробовать поставить в пост!
ОтветитьУдалитьИрина, так это ведь для изображения в шапки блога а не для поста. Вроде по названию понятно.
ОтветитьУдалитьКартинка перед названием поста здесь http://www.shpargalochki.ru/2015/05/ikonka-v-zagolovke-posta.html
ОтветитьУдалитья пробую и в шапку блога и в пост,не видно у меня на предварительном просмотре
ОтветитьУдалитьОпять что - то не так делаешь. Пробуй на тестовом блоге. Там ещё нужно с отступами играться, а статье написано как. тем более у тебя ширина блога большая. Я уже говорила . Код совершенно простой без скриптов, косяков вообще не должно быть никаких.
Удалить