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

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

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

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

<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


19 комментариев:

  1. В моем блоге давно перестали работать такие штуки. Может,твой код попробую поставить. Спасибо, Вика!

    ОтветитьУдалить
    Ответы
    1. Наталья, такая беда у всех. У одной моей коллеги из массы перепробованных тоже только этот работает на всех блогах.

      Удалить
  2. Да, гаджеты похожих статей от сторонних сервисов, действительно, очень часто работают через одно место. Либо авторы перестают их поддерживать (сервис висит в интернете, прекрасно виден в поисковой выдаче, но не работает), либо сам гаджет выглядит убого и не желает настраиваться, либо это вовсе не "похожие статьи", а "случайные статьи".

    Я для себя нашёл хороший код на одном из сайтов о платформе Blogger. Но там нужно скрипт загрузить на свой хостинг. Мне помог брат, куда-то там себе загрузил, а мне только ссылку выдал. А я уже настройками внешнего вида занимался. Гаджет получился хороший, с миниатюрами, их количество и размер настраиваются. Похожие статьи подбираются благодаря присвоенным ярлыкам.

    Кстати, в шаблоне блога, скорее всего, будет не одна строчка с "post-footer-line-1 (2, 3)", а две. При этом один набор строчек отвечает за десктопную версию блога, а второй набор - за мобильную версию. И если ошибиться и запилить гаджет в мобильную версию, то можно потом оказаться в недоумении, открыв блог на компьютере и не увидев желаемого. Зато это даёт возможность использовать разные гаджеты в мобильной и в десктопной версиях блога, например, с разным размером миниатюр.

    ОтветитьУдалить
    Ответы
    1. Привет, Андрей. Спасибо за столь развёрнутый комментарий. По всем пунктам с тобой солидарна. С строчками post-footer-line-1 и т. д. Это да что нужно пробовать варианты установки. А вообще когда мониторишь переходы по этим ссылкам похожих сообщений их мало. Так что то ли по привычке ставищь, то ли авось кто и кликнет. если хорошая перелинковка , думаю они и не нужны.
      дай ссылочку на блог где твои установлены. Мне вроде как где тоже попадался такой вариант. Если это то о чём я думаю.

      Удалить
    2. Стоят на моём основном блоге: http://www.encyclopedia-stranstviy.com
      Три крупные картинки после каждой статьи. Мне нравятся крупные. Но можно, при желании, сделать четыре картинки размером поменьше.

      Удалить
  3. Виктория, спасибо! Пригодится!

    ОтветитьУдалить
  4. возможно, пригодится

    ОтветитьУдалить
  5. Андрей, посмотрела, да красиво. Подглядела код. У меня тоже все коды были на dropbox но с некоторых пор перестали работать. А этот вот у тебя нормально. Интересно, попробую твой на тестовом.

    ОтветитьУдалить
    Ответы
    1. По-моему, вот здесь описан установленный у меня виджет:
      https://wordpressmania.ru/pohozhie-stati-s-miniatyurami-vidzhet-blogger/

      Удалить
  6. Андрей, спасибо за ссылку. Но я вчера ковырялась во всех кодах виджетов похожих статей и в результате получила то что сейчас пока установила у себя. Посмотри. Тут не надо скачивать всё в самом коде. завтра напишу сообщение. Он у меня и родных шаблонах устанвился и на сторонних. Сейчас вот башку ломаю что оставить.

    ОтветитьУдалить
    Ответы
    1. Да, вижу. Правда, вроде не везде картинки отображаются. Виджет инфу берёт из фида. И если в фиде нет картинки (к примеру, картинка находится под катом, а фид настроен показывать только то, что не под катом), то виджет картинку не покажет.

      Кстати, вот ещё один мой сайт (развлекательный, недавно сделал, планирую через соцсети раскручивать), где не три большие миниатюры, как на "Энциклопедии странствий", а четыре маленьких:
      http://infotacks.blogspot.com
      На компьютере они располагаются в один ряд, а на смартфоне сворачиваются в два по два. И смотрятся очень неплохо.

      Кстати, можешь в статьях где-то упомянуть про мобильную версию? А то про это почти не пишут. Пишут наподобие:
      "Найдите в шаблоне такую-то строчку и вставьте код после неё. Их может быть две, пробуйте вставлять после каждой".
      И мне пришлось поломать голову, пока я не понял, что одна строчка кодирует десктопную версию, а другая - мобильную. И это даёт простор для творчества: то ли для мобильной версии запилить то же, что и для десктопной, то ли что-то другое, то ли вообще забить на мобильную версию и не добавлять к ней виджет.

      Удалить
  7. Ну так для мобильной наверное нужно добавлять скорее в участок mobile-post.
    Я с этим не заморачиваюсь пока. Этот шаблон и ещё один заточены под мобильную версию. Но гаджет да не отображается. Посмотрела блог. пистолеты такие крутые. Слушай, мой виджет с картинками похож на твой. Написала пост сегодня опубликую. Но установка немного другая. Так же можно регулировать размеры и кол -во.

    ОтветитьУдалить
    Ответы
    1. Я не помню всех нюансов кода для мобильной версии, но там идут один за другим два похожих фрагмента кода (включая строки post-footer-line-1/2/3), и один кодирует мобильную версию, а второй - десктопную. И если виджет нужен и там, и там, то код виджета нужно прописать в двух местах.
      Правда, в настройках Блоггера в качестве темы мобильной версии я поставил не "По умолчанию" или "Простая", а "Дополнительно". И вполне допускаю, что на других темах виджет может не отображаться.

      За пистолеты спасибо. Три пистолета я сам описал, ещё два пришлось нагуглить.
      Но жителям Киева больше понравился пост, который был перед пистолетами )))

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

    ОтветитьУдалить
  9. Сделала себе код, но у меня это выглядит как-то невыразительно. Вообще, давно я не имела дела с кодами, стремно было подступаться )

    ОтветитьУдалить
    Ответы
    1. Наташа, начать заново никогда не поздно. А я сбегала на твои блоги, не увидела. Убрала уже?

      Удалить
    2. Нет, не убирала. Вижу список в конце поста, только вместо точек каждая строка с названием поста разделена пунктирной линией.

      Удалить
  10. Увидела сейчас. Это где - то в шаблоне у тебя. У меня на одном блоге маркер ввиде кружочка, на другом - квадрат. Просто интересно, попробуй в черновике создать любой маркерованный список, как выглядеть будет.А в общем вполне нормально .

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

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