Список похожих сообщений под каждым постом BLOGGER

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

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

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

Скопируйте приведённый ниже код.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
   for (var i = 0; i < json.feed.entry.length; i++) {
      var entry = json.feed.entry[i];
      relatedTitles[relatedTitlesNum] = entry.title.$t;
      for (var k = 0; k < entry.link.length; k++) {
         if (entry.link[k].rel == 'alternate') {
            relatedUrls[relatedTitlesNum] = entry.link[k].href;
            relatedTitlesNum++;
            break;
         }
      }
   }
}
function removeRelatedDuplicates() {
   var tmp = new Array(0);
   var tmp2 = new Array(0);
   for(var i = 0; i < relatedUrls.length; i++) {
      if(!contains(tmp, relatedUrls[i])) {
         tmp.length += 1;
         tmp[tmp.length - 1] = relatedUrls[i];
         tmp2.length += 1;
         tmp2[tmp2.length - 1] = relatedTitles[i];
      }
   }
   relatedTitles = tmp2;
   relatedUrls = tmp;
}
function contains(a, e) {
   for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
      return false;
}
function printRelatedLabels() {
   var cuantosPosts = 0;
   var r = Math.floor((relatedTitles.length - 1) * Math.random());
   var i = 0;
   var dirURL = document.URL;
   document.write('<ul>');
   while (i < relatedTitles.length && i < 50) {
      if (relatedUrls[r] != dirURL) {
         document.write('<li><a href="' + relatedUrls[r] + '" title=" ' + relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
      }
      if (r < relatedTitles.length - 1) {
         r++;
      } else {
         r = 0;
      }
      i++;
      cuantosPosts++;
      if (cuantosPosts == 5) {
         break;
      }
   }
   document.write('</ul>');
}
function mixRelatedLabels() {
  for(var i = 0; i < relatedTitles.length; i++){
    var indice = Math.floor((relatedTitles.length - 1) * Math.random());
    var tempTitle = relatedTitles[i];
    var tempUrls = relatedUrls[i];

    relatedTitles[i] = relatedTitles[indice];
    relatedUrls[i] = relatedUrls[indice];

    relatedTitles[indice] = tempTitle;
    relatedUrls[indice] = tempUrls;
  }
}
//]]>
</script>

<b:loop values='data:post.labels' var='label'>
  <b:if cond='data:label.name != &quot;название_ярлыка_который_не_нужно_учитывать&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=30&quot;'/>
  </b:if>
</b:loop>
&lt;div class=&quot;pohozhie-stayi&quot;&gt;Ещё статьи по теме:
  <script>
    removeRelatedDuplicates();
    mixRelatedLabels();
    printRelatedLabels();
  </script>
&lt;/div&gt;
</b:if>

Сейчас нужно зайти во вкладку тема (сделайте на всякий случай резервное копирование) и найти строку -

<div class='post-footer-line post-footer-line-1'>

Сразу под ней вставляйте скопированный код.
Чтобы было понятнее где эти строчки находятся, посмотрите скриншот. Откройте коды, нажав на чёрную стрелку слева, где находятся все секции b:includable.

Сохраните шаблон. Если список похожих статей не отобразился, ищем такие строки. Шаблоны у всех разные.

<div class='post-footer-line post-footer-line-2'>

или

<div class='post-footer-line post-footer-line-3'>

И уже над одной из них ставим код. В моём случае это был второй вариант. Замените цифру 5 на желаемое количество отображаемых постов. И пояснительный текст с заголовком по необходимости.

По умолчанию в Блогере маркер отображается в виде сплошного кружочка.

• список 1
• список 2
• список 3

Его вид можно изменить если задать определённые стили. Для этого во вкладке тема перед строкой  ]]></b:skin> добавить CSS . Что - то типа -

.post ul li} list-style-position: inside;display:block;background:rgba(232, 232, 232, 0.48);color:#666;text-decoration:none;transition:all .3s ease-out;}

Смотрится список похожих статей достаточно компактно и просто.

Спасибо всем за внимание и до встречи.

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

Введите Ваш email