Георгиевская ленточка

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

23.10.2016

Похожие сообщения для Blogger
Гаджет "похожие сообщения" (или "связанные") помогает авторам блога показать читателям конкретной статьи о том, какие еще сообщения можно почитать на данном блоге по этой теме. Тем самым увеличивается посещаемость страниц. И, конечно, хочется, чтобы этот гаджет выглядел привлекательно. Читайте ниже о похожих сообщениях для Blogger с девятью вариантами стилей! 

Я довольно долго пользовалась гаджетом похожих сообщений от сервиса Engageya. Было удобно, что на небольшом пространстве после сообщения компактно умещаются в два ряда 12 превью сообщений с заголовками. Правда, иногда там вместо одного из моих сообщений часто показывалось сообщение с постороннего сайта. Хотя я отмечала в настройках гаджета, чтобы показывались только мои посты.

Но вчера я обнаружила, что ситуация изменилась ровно в противоположную сторону: из 12-ти сообщений в гаджете было только одно с моего блога (см. скриншот)!!!

И как-то стало неприятно, что целых 11 лишних ссылок на чужие сайты присутствует после каждого моего поста...

Попробовала переустановить гаджет (вдруг сбой произошел), но нет. Когда я, не выходя из аккаунта, просматривала блог - все было нормально. Но зашла с другого браузера - картина маслом :(

Поэтому решила срочно поменять похожие сообщения 
(их еще называют "связанные" или Related Post
и нашла хороший вариант с девятью вариантами оформления (источник)!

Я все варианты проверила - работают. И сделала скриншоты для Вас.

Стиль 1. Показываются только заголовки связанных сообщений.

похожие сообщения стиль 1

Стиль 2. Отображаются заголовки постов и первые слова из сообщения.

похожие сообщения стиль 2

Стиль 3. Миниатюры плюс названия похожих сообщений, а также начальная часть поста.

похожие сообщения стиль 3

Стиль 4. Миниатюры, названия связанных постов и даты.

похожие сообщения стиль 4

Стиль 5. Отображаются только миниатюры и заголовки постов.

похожие сообщения стиль 5

Стиль 6. В этом стиле заголовки похожих сообщений накладываются на миниатюры.

похожие сообщения стиль 6

Стиль 7. Показываются только миниатюры из постов.

похожие сообщения стиль 7

Стиль 8. В этом варианте картинка расположена слева, справа - заголовки связанных постов, а также дата внизу.

похожие сообщения стиль 8

Стиль 9. Миниатюра из сообщения также расположена слева, справа заголовок плюс первые слова из сообщения.

похожие сообщения стиль 9

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



Я думаю, что из всего этого разнообразия Вы сможете подобрать подходящий стиль оформления похожих сообщений для Вашего блога на Blogger

Как добавить в блог похожие сообщения. 

Перед изменениями в блоге всегда делайте резервную копию!

1. В настройках блога заходим в пункт Шаблон, нажимаем Изменить HTML.

2. Ставим курсор внутри рамки с кодом, нажимаем клавиши Ctrl+F и в появившемся поле для поиска вставляем </head>

3. Над этим тегом вставляем код:

   <style type='text/css'>
.related-posts-container{margin:55px 0px;}.related-posts-container h4{font:20px &#39;Open Sans&#39;, sans-serif;margin-bottom:20px;}.related-posts-container ul,.related-posts-container ul li{list-style: none;margin: 0;padding: 0;}.related-posts-container ul li a{text-transform:capitalize !important;font:bold 13px &#39;Open Sans&#39;, sans-serif;outline: 0;}.related-snippets{margin-top:5px;font:italic 12px &#39;Open Sans&#39;, sans-serif;}.related-posts-1 li{list-style:inside none disc !important;}.related-posts-1 li,.related-posts-2 li{border-top:1px solid rgba(0,0,0,0.04);padding:0.8em 0 !important;}.related-posts-1 li:first-child,.related-posts-2 li:first-child{border-top:medium none;}li.related-post-item{margin:0 3% 3% 0 !important;width:22.7%;float:left;list-style:none;position:relative;}li.related-post-item:last-child{margin:0 0 2% !important;}.related-thumb-large{width:100%;height:auto;border:none;margin:0px auto 10px;padding:0 !important;}.related-posts-8 li .related-title,.related-posts-9 li .related-title,.related-posts-9 li .related-snippets{padding-left:74px;}.related-posts-8 li:nth-child(even),.related-posts-9 li:nth-child(even){margin:0 0 4% !important;}.related-posts-8 li,.related-posts-9 li{background-color:#ffffff;box-shadow:0 0 4px rgba(180, 180, 180, 0.55);width:42% !important;float:left;margin:0 4% 4% 0 !important;padding:3% !important;}.related-thumb{float:left;height:64px;margin-right:10px;object-fit:cover;width:64px;}.related-posts-6 li,.related-posts-6 a{line-height:0 !important;}.related-posts-6 .related-thumb-large{margin-bottom:0;}.related-posts-7 li.related-post-item{margin:0 !important;width:25% !important;}.related-wrapper{position:absolute;left:0px;right:0;top:0px;bottom:0;margin:0 auto;z-index:4;background:rgba(77,77,77,0.2);}.related-wrapper-inner{position:relative;height:100%;z-index:99;width:100%;display:table;vertical-align:middle;text-align:center;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}.related-wrapper .related-title{vertical-align:middle;display:table-cell;color:#ffffff;font:bold 16px &#39;Open Sans&#39;, sans-serif;padding:0 20px;}.related-date{margin-top:5px;font:italic 11px &#39;Open Sans&#39;, sans-serif;color:#999999;}
</style>



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



И вставляем вторую часть кода:

6. Нажимаем Просмотреть шаблон. Если блог отображается нормально - можно сохранять.

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

Настройка текста, который будет постоянно показываться над блоком с похожими сообщениями: в строке 8 заменяем выделенный цветом текст на свой (например "Почитайте еще по этой теме").

relatedHeading:&quot;&lt;h4&gt;&lt;span&gt;Related Posts&lt;/span&gt;&lt;/h4&gt;&quot;,

Количество связанных сообщений, отображаемых в блоке:
в строке 9 меняем значение "4" (по умолчанию) на свое - в зависимости от ширины блога. Я пробовала разные варианты, остановилась на 6. Но не всегда все 6 отображаются, т.к. показываются наиболее подходящие к теме посты.


relatedPosts:4
Размер миниатюр: по умолчанию выставлены размеры 300px шириной и 200px высотой. Я подбирала опытным путем. И в зависимости от того, сколько похожих сообщений будет отображаться (какое количество Вы поставили в настройке выше). Меняем размеры миниатюр 2 раза - в строках 11 и 12.

строка 11 thumbnailSize:&quot;w300-h200-p-nu&quot;
строка 12 defaultThumb:&quot;https://4.bp.blogspot.com/-BLiit18tHXA/V9gCeNNCXzI/AAAAAAAALt8/SF8SUhGI1m8QuoHklq24MKiIEwKHIqwBACLcB/w300-h200-c/no-thumb.png&quot;

Стиль всего блока похожих сообщений: скриншоты 9-ти стилей смотрите выше в статье. Цифра, обозначающая вариант стиля (от 1 до 9), измененная в строке 10 и будет менять весь блок. По умолчанию это стиль 4. На момент написания статьи я поставила стиль 5 (миниатюра+заголовок).

relatedStyle:4

похожие сообщения стиль 5

            
Закругленные углы миниатюр: по умолчанию картинки прямоугольные. Для закругленных углов (скриншот выше) в строке 13 замените значение "false" на "true"
roundThumbs:false

Выравнивание заголовка поста и начала сообщения по центру: в строке 16 замените значение "false" на "true"

centerText:false

Чтобы ссылка открывалась в новой вкладке: в строке 17 замените значение "false" на "true"
openNewTab:false

Изменить количество отображаемых символов от начала поста: (по умолчанию 45) измените значение в строке 15.

snippetLength:45

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

3 комментария:

  1. Здравствуйте! Всё получилось со второго раза. Спасибо Вам!
    Есть небольшая проблема: заменяю заголовок на русский, а система всё равно выдаёт "Related Posts". Может, это "глюк"? Делала всё по инструкции.

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

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

Загляните и на другие страницы ^