Добро пожаловать, дамы и господа! Используйте кнопки соцсетей, чтобы добавить меня в друзья.

Похожие сообщения — настраиваемый виджет Blogger

Привет, дамы и господа! Предлагаю вашему вниманию ещё один виджет для BloggerПохожие сообщения (Related Posts) - с 9 стилями оформления. Его можно даже назвать Виджет Похожие статьи всё в одном (девять разных виджетов в одном), то есть, если вам нужно связанные статьи без миниатюр - пожалуйста, с миниатюрами - милости просим и так далее. При настройках виджета, вам всего лишь нужно менять цифру от 1 до 9 и выбрать какой вам стиль похожих сообщений больше по душе. Вот, как то так. Подробности по установке и настройки гаджета читайте ниже.

Related Posts Blogger
Похожие сообщения - виджет Blogger

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

Как добавить Похожие сообщения в Blogger

Заходим в панель управления - Шаблон - Изменить HTML. Далее нужно использовать функцию поиска по шаблону, для этого, на клавиатуре нажимаем Ctrl+F, откроется окошко поиска в которое вставляем тег </head> и нажимаем Enter:

Поиск по шаблону
Поиск по шаблону Blogger

Искомая строчка (закрывающий тег </head>) выделиться желтым цветом, теперь чуть выше данной строки вставляем стили для виджета. Вот такой код CSS:

Можете сохранять изменения, а затем снова использовать поиск по шаблону для поиска такой строчки - <b:includable id='postQuickEdit' var='post'> :

Поиск по шаблону Blogger
Поиск по шаблону и вставка кода в Blogger

Здесь, также нужная строка выделится желтым цветом. Теперь чуть выше </b:includable> (смотрите скриншот) добавьте код сценария для вывода похожих статей после каждого сообщения вашего блога. Если над строчкой <b:includable id='postQuickEdit' var='post'> предыдущий код не развёрнут, тогда раскройте его, нажав черный треугольник и прокрутите вниз открывшейся код до </b:includable>. Скрипт добавлять такой:

Сохраняете шаблон и проверяете работу виджета. По умолчанию виджет имеет такой вид (4 прямоугольные миниатюры, заголовок и дата публикации поста):

Похожие сообщения
Похожие сообщения Blogger

Установка виджета закончена. Давайте, друзья, перейдём к тому, что вы можете изменить и как выбрать стиль для похожих сообщений.

Как настроить Похожие сообщения Blogger

В строке - relatedHeading: &quot;&lt;h4&gt;&lt;span&gt;Похожие сообщения:&lt;/span&gt;&lt;/h4&gt;&quot;, - меняете текст;

В строке - relatedPosts: 4, - количество выводимых связанных постов;

Вот тут - relatedStyle: 4, - самое интересное, от изменения цифры от 1 до 9 меняется стиль виджета. Например, ставим 1 и у нас получится виджет без миниатюр, только заголовки статей:

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

Или например, устанавливаем циферку 7 и у нас выводятся одни картинки:

Похожие записи миниатюры
Похожие записи в виде миниатюр

А с помощью 9 - ки можно вывести похожие статьи Blogger в таком стиле:

Похожие посты в Blogger
Похожие посты в Blogger с маленькими картинками

И так далее и тому подобное. Я не буду показывать, какое оформление виджета похожих постов скрывается за остальными цифрами, пусть для вас, как говориться - сюрприз будет. Идем дальше по настройкам:

Строка - thumbnailSize: &quot;w300-h200-p-nu&quot;, и 
defaultThumb: &quot;https://4.bp.blogspot.com/-BLiit18tHXA/V9gCeNNCXzI/AAAAAAAALt8/SF8SUhGI1m8QuoHklq24MKiIEwKHIqwBACLcB/w300-h200-c/no-thumb.png&quot;, - меняется размер миниатюр;

А в этой строчке - roundThumbs:false, - обозначение false меняете на true и у вас выводятся овальные картинки:

Овальные миниатюры
Овальные миниатюры в похожих статьях Blogger

В строчке - snippetLength:45, - задаётся количество выводимых символов в сниппете после заголовка статьи;

Здесь - centerText:false, - можно установить заглавие статьи по центру относительно миниатюры, заменив значение false на true :

Миниатюры похожих сообщений
Заголовок расположен по центру миниатюры

И последнее, если хотите, чтобы ссылка открывалась в новой вкладке, то в - openNewTab: false, - также нужно поменять false на true.

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

Комментарии

  • Спасибо! Очень легко установился! Удивительно даже 🙂 Главное — чтобы теперь работал исправно.

  • Установился, но не получается поменять стиль, текст и т.д. — ставлю разные цифры, а оформление остается то, что по умолчанию 🙁

  • Этот виджет у меня сработал, ура!

    Но и с ним у меня пара проблем.
    Первая — похожие сообщения располагаются вертикально,а не горизонтально;
    Вторая — на главной странице только под первым постом показывает, а хочется, чтобы у всех постов показывало

    Помогите пожалуйста исправить эти проблемки

  • Привет! Спасибо за виджет! Всё работает даже со шведским языком. Единственный вопрос остался: как сделать так, чтобы фрагмент текста из «похожего сообщения» не кучковался слева или центрировался, а растягивался по ширине столбца?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Решите задачку: *