Привет, друзья. Покажу вам как добавить маленькую картинку к заголовкам постов. Сделать это достаточно просто и даже, начинающие вести блог, смогут такое реализовать без затруднений. Абсолютно похож на тот как вставить картинку к празднику в заголовок блога.
Обычно в шаблоне Блоггер за заголовок статьи отвечает строка .post-title или h3.post-title. От этого и будем исходить.
Идём во вкладку ТЕМА и находим строку ]]> </ b: skin> и над ним устанавливаем один из следующих кодов
1. Картинка справа от заголовка поста
код
2. Картинка слева от заголовка
код
3. Картинка с двух сторон
код
Значение padding:15px; - отступы можно менять на своё усмотрение. url адреса иконки подбирайте свои. В моём случае я использовала картинки размером 48 на 48 px.
После установки кода, сохраните шаблон и посмотрите результат. Следует отметить, что иконки будут применены абсолютно ко всем постам в блоге. Если нужно таким образом оформить заголовки отдельных постов, то не нужно ничего добавлять в шаблон. Просто при написании поста перейти в редакторе в режим Html и заключить код выбранного варианта в теги
Еще можно сделать по такому же принципу красиво оформленный заголовок поста.
Сегодня у меня всё и до встречи.
Обычно в шаблоне Блоггер за заголовок статьи отвечает строка .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;
}
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;
}
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;
}
content: url(http://loveballove.ru/favicon.ico);
h3.post-title:before, h3.post-title:after {
content: url(http://loveballove.ru/favicon.ico);
padding:15px;
}
После установки кода, сохраните шаблон и посмотрите результат. Следует отметить, что иконки будут применены абсолютно ко всем постам в блоге. Если нужно таким образом оформить заголовки отдельных постов, то не нужно ничего добавлять в шаблон. Просто при написании поста перейти в редакторе в режим Html и заключить код выбранного варианта в теги
<style>тут весь код выбранного вами кода</style>
Еще можно сделать по такому же принципу красиво оформленный заголовок поста.
Сегодня у меня всё и до встречи.
хотите оформить подписку на новые шпаргалки
Очень актуальный пост. У меня как раз возникла недавно задача, как вставить изображение в шапку. Но вот в чем вопрос. Эти примочки очень пригружают страницу, и она плохо грузится, что сейчас особенно не гуд. Но на всякий случай, Виктория, есть у тебя пост на тему, как вставить изображение в шапку ? (Я искала у тебя, но не нашла).
ОтветитьУдалитьВика, не так страшен чёрт, как его малюют. Не тяжёлое изображение особой роли не сыграет. всякие скрипты и фоны - это да. Про картинку в шапке ссылка в начале поста и вот здесь вариант http://www.shpargalochki.ru/2016/11/how-to-center-blogger-header-image.html
УдалитьСпасибо !
УдалитьСпасибо,Вика,за очередную красоту. В код не полезу,не получается у меня, а вот в редакторе поиграюсь.Удачи тебе в творчестве,побольше интересных идей)
ОтветитьУдалитьЗоя, спасибо и Вам. С шаблоном если пока сложно можно использовать как вариант вот такой метод http://www.shpargalochki.ru/2014/07/oformit-shablon-soobshenija.html это для всех сообщений. А так можно и по отдельности устанавливать. А лучше, как я всем советую создать блог тестовый (такой же) и тренироваться на нём.
УдалитьВикуля. А если я в коде поменяю картинку, она в предыдущих сообщениях исчезнет?
ОтветитьУдалитьЛюба, не совсем поняла. Ты имеешь в виду установишь через редактор или в шаблоне . Если в редакторе для отдельного поста - меняй смело. Если в шаблоне, то да, поменяется.
ОтветитьУдалитьСпасибо. Я имела ввиду смену картинки в шаблоне.
УдалитьХорошая идея, возможно, пригодиться. Спасибо!
ОтветитьУдалитьВалерия, иногда для отдельного поста вполне сгодится.
ОтветитьУдалитьНе знала, что в заголовок можно вставить картинку. Спасибо, но воздержусь.
ОтветитьУдалитьИрина, с блоггером много чего можно сделать. Ты вот любитель всяких поздравлений, можно по каждому поводу к определённому посту картинку сделать. красиво ведь.
ОтветитьУдалить