Список похожих сообщений под статьёй или в боковой колонке Blogger

В статье "Похожие статьи Blogger" прозвучал вопрос:

А есть ли более простой способ - без картинок, списком?

Скрипт я позаимствовала у JMiur, знаниям которого может любой позавидовать. Каждый раз, когда вы попадаете на страницу, будут показаны разные случайные результаты, а не последние статьи, которые написаны под данным ярлыком. Для демонстрации заглянем ещё раз в Приложение1.

На вкладке "Шаблон" после
    <b:if cond='data:blog.metaDescription == &quot;&quot;'>
      <!-- Then use the post body as the schema.org description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    <b:else/>
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    </b:if>
добавить
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.labels'>
<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 == 3) {
         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="pohozhie-stayi"&gt;Похожие материалы:
  <script>
    removeRelatedDuplicates();
    mixRelatedLabels();
    printRelatedLabels();
  </script>
&lt;/div&gt;
</b:if>
</b:if>

max-results=30 - это максимальное количество статей фида ярлыка, из которых будут выбираться заголовки для показа. Чем выше значение, чем более разнообразнее будут результаты, но скорость загрузки страниц будет медленнее.

cuantosPosts == 3 - это количество ссылок в блоке с "Похожими материалами".

Условие, выделенное цветом при отсутствии востребованности удаляется.

Список можно расположить и в боковой панели, если фрагмент

&lt;div class="pohozhie-stayi"&gt;Похожие материалы:
  <script>
    removeRelatedDuplicates();
    mixRelatedLabels();
    printRelatedLabels();
  </script>
&lt;/div&gt;
поместить в гаджет HTML/JavaScript.

Перед ]]></b:skin> при желании можно добавить стили, например,

.pohozhie-stayi {
      margin-top: 1em; /* отступ между статьёй и блоком с ссылками на похожие записи */ 
}
.pohozhie-stayi li a {
      padding-left: 20px;
}
в f t
наверх ↑

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

Евгения
Спасибо, всё получилось.

два вопроса:
- У меня между вариантами появилась горизонтальная пунктирная линия. Где её убрать?
- Как сделать отступ между Ярлыками и Похожими материалами? Не могу найти в коде, куда br вставить...
NMitra
Убрать полосу

.widget .pohozhie-stayi li {
border-top: none;
}

Отступ

<b:if cond='data:blog.pageType == &quot;item&quot;'>&lt;/br&gt;&lt;/br&gt;
Похожие материалы:
Евгения
Спасибо! Вы лучшая))
aldous
Я таких виджетов встречал штук 5, и ничего не понравилось: чрезвычайно замусоревают шаблон, который по идее, надо максимально разгрузить на хостинг.
Есть хороший способ выводить через json и гугловский api, там всё кратко, но руки не доходят довести до ума(.
NMitra
В данном варианте всё просто. А вот с гугловский api будет влиять на скорость. Ведь браузеру нужно сначала обратить к внешнему файлу.
Светлана Ковалева
Спасибо, прикольно!
Анонимный
Спасибо за статью! Скажите, а как сделать меньше отступ между результатами и как добавить какие-то знаки перед ними?
NMitra
Уменьшить отступ

.widget .pohozhie-stayi li {
line-height: 5%;}

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

.widget .pohozhie-stayi li {
list-style: square outside;}
Se Nat
Ничего не получилось. Код добавил, а сообщения не выводятся.Что может быть?
NMitra
Смотрю fotootcheti.blogspot.com , но скрипта там не вижу.
Se Nat
Я его после неудачной попытки снова удалил. (Чайник)
Marusya
Добрый день подскажите могу ли я добавить на боковую панель рекламный Баннер (шаблон Динамический просмотр) !!!
NMitra
Там только CSS поддаётся редактированию.
Marina Varzhainova
Я что-то напутала видимо :( Не могли б вы посмотреть, я хочу чтоб Похожие статьи были под моими кнопками социальных сетей, не на этом сером фоне. Куда мне код надо тогда вставлять?
NMitra
Исправила статью. Код поместила в другое место.
Se Nat
добавил скрипт снова, специално что бы вы посмотрели. fotootcheti.blogspot.com
Что то или я не так сделал или я не так сделал.
К стати. у меня два
Ставил и после одного и после другого - результат - нулевой.
Заранее спасибо за помощь.
А может вы как спец глянете на поля к колонках как можно сократить пустое пространство?
NMitra
Каким образом вы присваиваете ярлыки? Одной статье один ярлык? Ярлык - это группа статей, объединённых одной темой. Например,

1)Фото отчет зелёный лук на гидропонике за 15 дней
2)Выращивание рассады. Лук порей на гидропонике

Объединяем в "лук".

Если читатель захочет узнать ещё что-нибудь про лук, то он обратиться к этой странице. Это часть навигации.

Вам нужно пересмотреть все ярлыки. Одной статье - один/два ярлыка. Всего у блога должно быть не более 15 ярлыков, чтобы человек не запутался. У меня их шесть.

Что делает скрипт: выбирает несколько (количество вами указанное) сообщений из страниц, которым присвоен один ярлык.
NMitra
По второму вопросу: добавьте в CSS стиль (http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html)

.main-inner {
padding-right: 0;
padding-left: 0;
}
Marina Varzhainova
Спасибоооо!!!! Вы лучшая!
Se Nat
Спасибо!!! Действительно нужны были ярлыки. Все получилось даже у чайника благодаря Вам! И теперь наконец-то получилась карта блога хорошая, удобная с рубрикатором.
Все работает. Надо срочно сделать экспорт, что бы потом можно было восстановить... Есть у Вас странички на сайте, где описано как делать экспорт блога? Я знаю только как сохранить код.
Еще раз спасибо.
Se Nat
Второй вопрос, у меня код такой. Если ставлю :0, то полуается абра-катабра....

.main-inner .columns {
padding-left: $(main.column.left.width);
padding-right: $(main.column.right.width);
}
NMitra
Ещё со старым редактором http://shpargalkablog.ru/2011/01/bezopastnost-blogger.html

Не меняйте код, добавьте ниже нужный фрагмент.
Se Nat
Спасибо, блог экспортировал.
Евгений Хиль
добрый день. не получается запустить скрипт
внес изменения в шаблон, но скрипт не отображает виджет
http://dumudumal.blogspot.com/

подскажите, что не так сделал.
спасибо
NMitra
Скрипта в настоящий момент не вижу.
Евгений Хиль
вот и я не понимаю почему не вижу. когда открываю шаблон для редактирования - он там есть... а в исходном коде страницы - нет
NMitra
Проверьте наличие условных тегов - http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html

Может быть несколько вхождений кода, например, для мобильной версии.
Zmej Ruslanych
иэх...ничего не выходит что-то... Говорите, что ссылки на статьи берутся из выборки rss канала. сам rss настроил сегодня согласно Вашим статьям, проверял по ссылке, заголовки выводятся как и положено..ярлыки на месте. шаблон? но вроде один из стандартных. правда, заголовки статей оформлял /как здесь ВВВ.avitra.ru/2012/08/kak-dobavit-teni-k-tekstu.html/, заключая в теги теней /Заголовок статьи/, может, мешают они?? Кстати, не знаю, является ли это традиционным использованием возможности теней, но попробовав опубликовать пост прямо с сайта в этих тегах, увидел, что они срабатывают на выдачу, как и надеялся)) Не подскажите идею, что у меня не так??
Zmej Ruslanych
а кроме того, виджет, реализованный у меня на странице поста, начинал сбоить /дублировать ссылки на схожие статьи/ после внесения правки в шаблон. Виджет, реализованный на данной Вашей странице, выводит список статей, но не рамдомно, а внутри того же тега, в котором и находится текущая страница.
NMitra
Сначала вопрос: рандом вам нужен для чего? Реализовать можно, только поисковый робот этих ссылок видеть не будет, не будет их индексировать. Их можно применить только для посетителей. Такая была идея?
Mishechka
Наталья, здравствуйте!
У меня в шаблоне почему-то три фрагмента кода data:post.body/.
Какой выбрать?
NMitra
И после первого и после второго

    <b:if cond='data:blog.metaDescription == &quot;&quot;'>
      <!-- Then use the post body as the schema.org description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    <b:else/>
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    </b:if>

третий проигнорируйте, он для мобильной версии.
Mishechka
Спасибо, Наталья!
Mishechka
Наталья, всё-таки смущает то, что нужно один и тот же код вставлять два раза...
NMitra
Это условные теги. Они говорят: если в статье заполнено поле Description, то микроформат itemprop будет содержать description articleBody, если не заполнено, то - articleBody. Поэтому нужно два раза прописать в коде. Про условия можете прочитать тут http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html
Евгений Хромов
Здравствуйте!
Я не могу понять, в чем дело. Я перепробовал этих скриптов за сегодня тридцать пять миллионов - ни один не работает. Ваш аналогично. Что может быть?
Спасибо.
NMitra
Здравствуйте, не может быть :) Каков у вас URL блога? Внедрите написанное в код и отпишитесь, я проверю результат.
Д-бомж
Не работает....
NMitra
Работоспособность не раз проверена
NMitra
В коде несколько data:post.body
NMitra
Несколько статей должно быть помечено одним ярлыком
Нина Зоркина
Здравствуйте, Наташа! У меня работат ваш код, но в последних сообщениях нет. Два последних под одной рубрикой, но не показывает. И более для меня важный вопрос решила задать в одном месте. В новых сообщениях не показывается форма комментариев. В старом редакторе была настройка,чтобы в новых сообщениях не показывать, а в новом такой настройки нет, почему же не показыватся? Где смотреть? Заранее благодарю
NMitra
Здравствуйте, Нина. Предполагаю, что эти два вопроса взаимосвязаны. Потому что в последний сообщениях нет скрипта даже в исходном коде. Задайте второй вопрос на форуме https://productforums.google.com/forum/#!categories/blogger-ru/%D1%81%D0%BE%D0%BE%D0%B1%D1%89%D0%B8%D1%82%D1%8C-%D0%BE-%D0%BF%D1%80%D0%BE%D0%B1%D0%BB%D0%B5%D0%BC%D0%B5
Нина Зоркина
Наташа! Комментарии я нашла как показать. Стыдно признаться, но надо. Настройка эта теперь находится в редакторе сообщений, в настройках перед публикацией, там шестеренка "Параметры", Комментарии читателей, Разрешить. Может еще такой чайник.как я споткнется.
NMitra
Бывает ))) Увы, я знаю, но не помню всех возможностей админки Blogger. Спасибо, что сказали!
Brain Onil
Спасибо за Вашу статью. Вы супер!
NMitra
Благодарю за отзыв!
Эдуард Сингилеев
Здравсвуйте, а можно исключать несколько ярлыков? Пробовал через запятую - не работает, учитывается только первый ярлык.
Эдуард Сингилеев
Впринципе, все получилось, спасибо! И кстати, это способ не так уж и сильно нагружает страницу, по сравнению с другими, которые я пытался ставить. Я бы хотел с стилях еще название "похожие сообщения" выделить жирным и увеличить шрифт, только запутался с CCS
Эдуард Сингилеев
Насчет ярлыков разобрался, просто создаю новый цикл и вписываю новый тег
NMitra
Здравствуйте, да, так проще. Можно попробовать через http://buzz.blogger.com/2015/05/adding-new-expressions-to-blogger.html , но в результате получиться тот же результат

Строку

&lt;div class="pohozhie-stayi"&gt;Похожие материалы:

замените на

&lt;div class="pohozhie-stayi"&gt; &lt;strong&gt;Похожие материалы:&lt;/strong&gt;

В CSS

.pohozhie-stayi strong {
font-size: 150%;
}
EL Posts
Спасибо, работает.
Вопрос - в список включается текущая статья, как её убрать?
NMitra
Код не мой, я его просто скопировала, толком не разбираясь. Предполагаю, что нужно location сравнивать с URL из RSS