Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

Добавить картинку к празднику в заголовок блога

миниатюра в шапке блога

Привет, друзья. В каких - то случаях можно добавить в заголовок блога маленькую картинку, чтобы поздравить своих пользователей с очередным праздником. Будь то Новый год, 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%;
}


Скопируйте его в блокнот и замените адрес изображения на адрес вашей картинки. Или для пробы можете просто взять этот код. Идём во вкладку тема. Находим знакомую всем уже строку ]]></b:skin> и прямо над ним его устанавливаем. Сохраните и просмотрите результат.

Возможно, картинка не совсем корректно отобразиться относительно заголовка. Но это поправимо. Поиграйтесь со значениями margin-left: 35%; и margin-top: -12.6%;, которые я отметила синим цветом. Пример в статье отступы и поля.

margin-left: 35%; расстояние относительно левого края. Добавляйте или уменьшайте значение.

margin-top: -12.6%; отступы сверху.

Сделать это нужно всего один раз. Потом просто сохранить код для следующего случая.

Не думаю, что у вас будут проблемы с реализацией, но если всё же возникнут вопросы, обращайтесь.

Всем спасибо за визит. Увидимся.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


5 комментариев:

  1. Виктория, очень ИНТЕРЕСНО! А эта картинка будет видна в начале каждого поста? А если она мне нужна только для одного поста? Попробую пока сделать ее в тестовом блога! Если получится или понравится, то можно попробовать поставить в пост!

    ОтветитьУдалить
  2. Ирина, так это ведь для изображения в шапки блога а не для поста. Вроде по названию понятно.

    ОтветитьУдалить
  3. Картинка перед названием поста здесь http://www.shpargalochki.ru/2015/05/ikonka-v-zagolovke-posta.html

    ОтветитьУдалить
  4. я пробую и в шапку блога и в пост,не видно у меня на предварительном просмотре

    ОтветитьУдалить
    Ответы
    1. Опять что - то не так делаешь. Пробуй на тестовом блоге. Там ещё нужно с отступами играться, а статье написано как. тем более у тебя ширина блога большая. Я уже говорила . Код совершенно простой без скриптов, косяков вообще не должно быть никаких.

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML