Виджет Blogger — Похожие сообщения

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

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

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

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

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

Blogger код
Поиск кода в Blogger

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

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

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

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

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

Похожие сообщения после статьи
Вывод похожих сообщений после статьи

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

Как настроить Похожие сообщения 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 с маленькими картинками

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

Строка - 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 :

Виджет Blogger
Заголовок расположен по центру миниатюры

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

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

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

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

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