как вставить изображение в заголовок сообщения

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

Обычно в шаблоне Блоггер за заголовок статьи отвечает строка .post-title или  h3.post-title. От этого и будем исходить.

Идём во вкладку ТЕМА и находим строку ]]> </ b: skin> и над ним устанавливаем один из следующих кодов

1. Картинка справа от заголовка поста

изображение в названии поста


код

h3.post-title:before {
content: url(https://www.sonsurum.net/resimler/simgeler/sugarsync.png);
padding-right:12px;

  }



2. Картинка слева от заголовка
картинка в заголовке поста

код

h3.post-title:after {
content: url(http://loveballove.ru/favicon.ico);
  padding-left:15px;
  }


3. Картинка с двух сторон

картинка в заголовке поста


код

h3.post-title:before, h3.post-title:after {
content: url(http://loveballove.ru/favicon.ico);
   h3.post-title:before, h3.post-title:after {
content: url(http://loveballove.ru/favicon.ico);
   padding:15px;
   }


  Значение padding:15px; - отступы можно менять на своё усмотрение. url адреса иконки подбирайте свои. В моём случае я использовала картинки размером 48 на 48 px.

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

<style>тут весь код выбранного вами кода</style>


Еще можно сделать по такому же принципу красиво оформленный заголовок поста.

Сегодня у меня всё и до встречи. 

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

введите пожалуйста свой email :

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

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

    ОтветитьУдалить
    Ответы
    1. Вика, не так страшен чёрт, как его малюют. Не тяжёлое изображение особой роли не сыграет. всякие скрипты и фоны - это да. Про картинку в шапке ссылка в начале поста и вот здесь вариант http://www.shpargalochki.ru/2016/11/how-to-center-blogger-header-image.html

      Удалить
  2. Спасибо,Вика,за очередную красоту. В код не полезу,не получается у меня, а вот в редакторе поиграюсь.Удачи тебе в творчестве,побольше интересных идей)

    ОтветитьУдалить
    Ответы
    1. Зоя, спасибо и Вам. С шаблоном если пока сложно можно использовать как вариант вот такой метод http://www.shpargalochki.ru/2014/07/oformit-shablon-soobshenija.html это для всех сообщений. А так можно и по отдельности устанавливать. А лучше, как я всем советую создать блог тестовый (такой же) и тренироваться на нём.

      Удалить
  3. Викуля. А если я в коде поменяю картинку, она в предыдущих сообщениях исчезнет?

    ОтветитьУдалить
  4. Люба, не совсем поняла. Ты имеешь в виду установишь через редактор или в шаблоне . Если в редакторе для отдельного поста - меняй смело. Если в шаблоне, то да, поменяется.

    ОтветитьУдалить
    Ответы
    1. Спасибо. Я имела ввиду смену картинки в шаблоне.

      Удалить
  5. Хорошая идея, возможно, пригодиться. Спасибо!

    ОтветитьУдалить
  6. Валерия, иногда для отдельного поста вполне сгодится.

    ОтветитьУдалить
  7. Не знала, что в заголовок можно вставить картинку. Спасибо, но воздержусь.

    ОтветитьУдалить
  8. Ирина, с блоггером много чего можно сделать. Ты вот любитель всяких поздравлений, можно по каждому поводу к определённому посту картинку сделать. красиво ведь.

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

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

Пользовательский поиск