Как установить похожие сообщения с миниатюрами под каждым постом в Blogger.

похожие статьи
Доброго времени суток, читатели и гости блога. Для того чтобы вывести похожие статьи с миниатюрами в конце каждого сообщения блога, мы часто прибегаем к сторонним сервисам. Самые популярные, наверное, это    Linkwithin, nRelate и Engageya.
Сегодня предложу ещё один вариант.


 Как установить похожие сообщения  с миниатюрами под каждым постом в Blogger.

Мне очень приглянулся этот скрипт. Он достаточно лёгкий, особой нагрузки на блог нет. К тому же есть возможность подогнать его под любой дизайн.  Я его подглядела на сайте http://helplogger.blogspot.ru. Вся установка делается в 2 шага.



Для начала копируем оба кода себе в блокнот и разберём настройки.



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #CCCCCC ;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999 ; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }
#related-title {width:110px;height:100px; ;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>


background: #CCCCCC-цвет фона при наведении. 
color:#999999 - цвет заголовка (похожие сообщения).
font:18px-размер шрифта заголовка.
width:110px;height:100px;-ширина и высота миниатюры.




<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Похожие сообщения:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>

Цифра 5 это количество отображаемых постов. название можно придумать своё.

Приступим к установке. Заходим во вкладку шаблон и обязательно делаем резервное копирование. Нажимаем изменить HTML. И с помощью клавиш Ctrl+F находим закрывающийся тег </head>. Кто пока не знает, как это легко сделать прочитайте пост об этом. Сразу над ним вставляем первый код.

Далее.Там, где в шаблоне вся секция инклубов, найдите вот это <b:includable id='post' var='post'>. Нажмите на чёрную стрелочку (маркер) напротив, чтобы раскрыть всё содержимое. Посмотрите на скриншот. 


И здесь нам понадобится строка <div class='post-footer'>Или одна из следующих (если их несколько нам нужна последняя).

<div class='post-footer-line post-footer-line-1'>.
<div class='post-footer-line post-footer-line-2'>
<div class='post-footer-line post-footer-line-3'>

Сразу под ней устанавливаем второй код.



Нажмите просмотреть шаблон и сохранить если всё нормально. Что должно получиться посмотрите у меня в конце сообщения. А мне остаётся на этом поставить точку и пожелать вам удачи. До новых встреч.Спасибо, что читаете мои шпаргалки.


Ой, а что это там ниже? Ну надо же! Нажимаем!

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

Введите Ваш email


21 комментарий:

  1. Вика, здравствуйте. Я попробовала, вообще ничего нет. Не стала сохранять. Вроде, всё правильно делала. Кстати, пробовала много способов из интернета - ни один не сработал пока.

    ОтветитьУдалить
  2. В Вашем шаблоне закрывающийся тег head-где-то строка 577. Перед ним устанавливайте первый код.
    А второй, как я писала пробуйте под каждой строчкой. У всех по разному
    В Вашем случае
    div class='post-footer' у вас строка 1218
    post-footer-line-1 строка 1219
    post-footer-line-2 строка 1253
    post-footer-line-3 строка 1259

    Пробуйте с последней.

    ОтветитьУдалить
    Ответы
    1. Хорошо. Только я уже установила через Engageya. Вроде, пока работает. Кстати, я думала, что у вас много подписчиков. Ну, ладно, хотя бы так: http://hobby-boom.blogspot.com/2015/04/blog-post_24.html

      Удалить
    2. Да, ещё. Этот виджет видно только через Яндекс, через Мозиллу не отражается. Нашла минус Engageya.

      Удалить
    3. Хорошо что справились. Обращу внимание, что Яндекс это поисковик , а Мозила ОС. Насчёт подписчиков-хватает. В блоге только мои ПЧ.

      Удалить
    4. Хром нормально всё отображает.

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

      Удалить
    6. Попробуйте. У меня тоже стоял раньше Engageya но пришлось удалить были проблемы с ним. А насчёт награды, спаибо . Я сегодня уже получила уведомление об очередном Liebster Blog Award. Но вынуждена была извиниться. Так как она у меня 5 или 6. пусть лучше совсем молодые блоги продвигаются.

      Удалить
  3. Ответы
    1. Анна, если пригодилась Вам, очень приятно.

      Удалить
  4. Доброй ночи, Вика!Установила у себя коды, но только похожие сообщения видны, когда полностью раскрываешь сообщение, а на главной их нет. Хотелось бы, чтобы они были везде. Как это сделать? Посмотрите пожалуйста на моем блоге moyaliliya.blogspot.com.Спасибо.

    ОтветитьУдалить
    Ответы
    1. Да, Ирина. В коде специально есть строка, которой мы запретили показ их на главной странице, чтобы не было лишних ссылок на главной. Да и не красиво это смотрится. В основном все просят как их убрать с главной, чтобы не рябило в глазах. Но если вам надо наоборот уберите в коде вот эту строчку вместе со скобками b:if cond='data:blog.pageType == "item"' и внизу тег /b:if тоже со скобками.

      Удалить
  5. Вика, спасибо за подсказку. Удачи Вам!

    ОтветитьУдалить
  6. Вика, здравствуйте! Уже сколько бьюсь не могу поставить второй код, вернее не могу найти даже одну из четырех строчек, под которую его вставить. Не подскажете в чем дело? http://krokodelniza.blogspot.ru/

    ОтветитьУдалить
  7. елена, возможно вы не правильно ищите. Эти строки есть в каждом шаблоне. Вот статья, как правильно найти строку http://www.shpargalochki.ru/2014/04/stili-css-v-shablon-bloga.html
    Обращу лишь ваше внимаие, что сейчас в связи с переходом Блоггер на https соединение они могут не отображаться. Всё зависит от настроек.

    ОтветитьУдалить
  8. Нашла, ...... line post-footer-line-2', дальше нет ,все вставила, и первый код, и второй...не показывается((

    ОтветитьУдалить
  9. нашла и ....div class='post-footer-line post-footer-line-3', но только там продолжение есть без пробела ,а слитно, вот такое: span class='post-location'>
    Вставляю после него, ничего не получается. Вика, извините, замучила, наверное.

    ОтветитьУдалить
  10. Елена,вставляйте сразу после class='post-footer-line post-footer-line-3'>.
    Попробуйте после class='post-footer'> или class='post-footer-line post-footer-line-1'>
    в конце концов если уж так нужны эти похожие сообщения попробуйте просто установить от Linkwithin, ссылка в начале статьи или Engageya. Посоветую как всегда создать ещё один тестовый блог по подобию рабочего и на нём тренироваться. Удачи Вам.

    ОтветитьУдалить
  11. Вика, спасибо! И извините за беспокойство! Вот, как торкнет меня, так не остановлюсь! Есть тестовый блог, но чего-то в нем не тренируюсь)

    ОтветитьУдалить
  12. Елена, это ведь хорошо когда торкает. Хуже наоборот. Сама такая же. И нет никакого беспокойства, обращайтесь.

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

Пользовательский поиск
Foto Saya
My Photo