Доброго времени суток, друзья. Маркированный список похожих сообщений под каждым постом блога. Такой вариант послужит прекрасной альтернативой вывода статей по теме или похожих статей, как обычно, их называют.
Последнее время гаджеты похожих статей с миниатюрами от различных сервисов работают, как говорится,"по паровозным гудкам'. Некоторые вообще приказали долго жить.
У меня на блогах похожие сообщения отображены в виде списка. Пока работают без перебоев. Делюсь с вами, как такое реализовать. Ко мне уже не раз обращались читатели с этим вопросом. Принимайте.
Скопируйте приведённый ниже код.
Сейчас нужно зайти во вкладку тема (сделайте на всякий случай резервное копирование) и найти строку -
Сразу под ней вставляйте скопированный код.
Чтобы было понятнее где эти строчки находятся, посмотрите скриншот. Откройте коды, нажав на чёрную стрелку слева, где находятся все секции b:includable.
Сохраните шаблон. Если список похожих статей не отобразился, ищем такие строки. Шаблоны у всех разные.
или
И уже над одной из них ставим код. В моём случае это был второй вариант. Замените цифру 5 на желаемое количество отображаемых постов. И пояснительный текст с заголовком по необходимости.
По умолчанию в Блогере маркер отображается в виде сплошного кружочка.
Его вид можно изменить если задать определённые стили. Для этого во вкладке тема перед строкой ]]></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;}
Смотрится список похожих статей достаточно компактно и просто.
Спасибо всем за внимание и до встречи.

У меня на блогах похожие сообщения отображены в виде списка. Пока работают без перебоев. Делюсь с вами, как такое реализовать. Ко мне уже не раз обращались читатели с этим вопросом. Принимайте.
Скопируйте приведённый ниже код.
<b:if cond='data:blog.pageType == "item"'>
<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 != "название_ярлыка_который_не_нужно_учитывать"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=30"'/>
</b:if>
</b:loop>
<div class="pohozhie-stayi">Ещё статьи по теме:
<script>
removeRelatedDuplicates();
mixRelatedLabels();
printRelatedLabels();
</script>
</div>
</b:if>
<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 != "название_ярлыка_который_не_нужно_учитывать"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=30"'/>
</b:if>
</b:loop>
<div class="pohozhie-stayi">Ещё статьи по теме:
<script>
removeRelatedDuplicates();
mixRelatedLabels();
printRelatedLabels();
</script>
</div>
</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
.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;}
Спасибо всем за внимание и до встречи.
Здесь вы можете оформить подписку на новые шпаргалки
В моем блоге давно перестали работать такие штуки. Может,твой код попробую поставить. Спасибо, Вика!
ОтветитьУдалитьНаталья, такая беда у всех. У одной моей коллеги из массы перепробованных тоже только этот работает на всех блогах.
УдалитьДа, гаджеты похожих статей от сторонних сервисов, действительно, очень часто работают через одно место. Либо авторы перестают их поддерживать (сервис висит в интернете, прекрасно виден в поисковой выдаче, но не работает), либо сам гаджет выглядит убого и не желает настраиваться, либо это вовсе не "похожие статьи", а "случайные статьи".
ОтветитьУдалитьЯ для себя нашёл хороший код на одном из сайтов о платформе Blogger. Но там нужно скрипт загрузить на свой хостинг. Мне помог брат, куда-то там себе загрузил, а мне только ссылку выдал. А я уже настройками внешнего вида занимался. Гаджет получился хороший, с миниатюрами, их количество и размер настраиваются. Похожие статьи подбираются благодаря присвоенным ярлыкам.
Кстати, в шаблоне блога, скорее всего, будет не одна строчка с "post-footer-line-1 (2, 3)", а две. При этом один набор строчек отвечает за десктопную версию блога, а второй набор - за мобильную версию. И если ошибиться и запилить гаджет в мобильную версию, то можно потом оказаться в недоумении, открыв блог на компьютере и не увидев желаемого. Зато это даёт возможность использовать разные гаджеты в мобильной и в десктопной версиях блога, например, с разным размером миниатюр.
Привет, Андрей. Спасибо за столь развёрнутый комментарий. По всем пунктам с тобой солидарна. С строчками post-footer-line-1 и т. д. Это да что нужно пробовать варианты установки. А вообще когда мониторишь переходы по этим ссылкам похожих сообщений их мало. Так что то ли по привычке ставищь, то ли авось кто и кликнет. если хорошая перелинковка , думаю они и не нужны.
Удалитьдай ссылочку на блог где твои установлены. Мне вроде как где тоже попадался такой вариант. Если это то о чём я думаю.
Стоят на моём основном блоге: http://www.encyclopedia-stranstviy.com
УдалитьТри крупные картинки после каждой статьи. Мне нравятся крупные. Но можно, при желании, сделать четыре картинки размером поменьше.
Виктория, спасибо! Пригодится!
ОтветитьУдалитьвозможно, пригодится
ОтветитьУдалитьПожалуйста, Семён.
УдалитьАндрей, посмотрела, да красиво. Подглядела код. У меня тоже все коды были на dropbox но с некоторых пор перестали работать. А этот вот у тебя нормально. Интересно, попробую твой на тестовом.
ОтветитьУдалитьПо-моему, вот здесь описан установленный у меня виджет:
Удалитьhttps://wordpressmania.ru/pohozhie-stati-s-miniatyurami-vidzhet-blogger/
Андрей, спасибо за ссылку. Но я вчера ковырялась во всех кодах виджетов похожих статей и в результате получила то что сейчас пока установила у себя. Посмотри. Тут не надо скачивать всё в самом коде. завтра напишу сообщение. Он у меня и родных шаблонах устанвился и на сторонних. Сейчас вот башку ломаю что оставить.
ОтветитьУдалитьДа, вижу. Правда, вроде не везде картинки отображаются. Виджет инфу берёт из фида. И если в фиде нет картинки (к примеру, картинка находится под катом, а фид настроен показывать только то, что не под катом), то виджет картинку не покажет.
УдалитьКстати, вот ещё один мой сайт (развлекательный, недавно сделал, планирую через соцсети раскручивать), где не три большие миниатюры, как на "Энциклопедии странствий", а четыре маленьких:
http://infotacks.blogspot.com
На компьютере они располагаются в один ряд, а на смартфоне сворачиваются в два по два. И смотрятся очень неплохо.
Кстати, можешь в статьях где-то упомянуть про мобильную версию? А то про это почти не пишут. Пишут наподобие:
"Найдите в шаблоне такую-то строчку и вставьте код после неё. Их может быть две, пробуйте вставлять после каждой".
И мне пришлось поломать голову, пока я не понял, что одна строчка кодирует десктопную версию, а другая - мобильную. И это даёт простор для творчества: то ли для мобильной версии запилить то же, что и для десктопной, то ли что-то другое, то ли вообще забить на мобильную версию и не добавлять к ней виджет.
Ну так для мобильной наверное нужно добавлять скорее в участок mobile-post.
ОтветитьУдалитьЯ с этим не заморачиваюсь пока. Этот шаблон и ещё один заточены под мобильную версию. Но гаджет да не отображается. Посмотрела блог. пистолеты такие крутые. Слушай, мой виджет с картинками похож на твой. Написала пост сегодня опубликую. Но установка немного другая. Так же можно регулировать размеры и кол -во.
Я не помню всех нюансов кода для мобильной версии, но там идут один за другим два похожих фрагмента кода (включая строки post-footer-line-1/2/3), и один кодирует мобильную версию, а второй - десктопную. И если виджет нужен и там, и там, то код виджета нужно прописать в двух местах.
УдалитьПравда, в настройках Блоггера в качестве темы мобильной версии я поставил не "По умолчанию" или "Простая", а "Дополнительно". И вполне допускаю, что на других темах виджет может не отображаться.
За пистолеты спасибо. Три пистолета я сам описал, ещё два пришлось нагуглить.
Но жителям Киева больше понравился пост, который был перед пистолетами )))
Андрей,я обязательно потом поброжу по твоему блогу. Вот и про то же, что в 2х местах прописывать нужно будет. Ой не хочу голову ломать пока.
ОтветитьУдалитьСделала себе код, но у меня это выглядит как-то невыразительно. Вообще, давно я не имела дела с кодами, стремно было подступаться )
ОтветитьУдалитьНаташа, начать заново никогда не поздно. А я сбегала на твои блоги, не увидела. Убрала уже?
УдалитьНет, не убирала. Вижу список в конце поста, только вместо точек каждая строка с названием поста разделена пунктирной линией.
УдалитьУвидела сейчас. Это где - то в шаблоне у тебя. У меня на одном блоге маркер ввиде кружочка, на другом - квадрат. Просто интересно, попробуй в черновике создать любой маркерованный список, как выглядеть будет.А в общем вполне нормально .
ОтветитьУдалитьСпс. Следующий шаг для Похожих сообщений. Думал не буду использовать, а тут случай как раз под список, без картинок. Что приятно ненавязчиво и аккуратно. Сделал Здесь https://miriskazok.blogspot.com/2017/09/jingl-bells.html
ОтветитьУдалитьДмитрий, у меня в своё время тоже стоял вывод похожих постов в виде списка. На одном из блогов, где много картинок отображается я его всё же оставила. Да, смотрится достаточно аккуратно.
УдалитьВообще с картинками - он лучше. Но тут сказки, одни тексты и такой удачный скрипт. тот же плюс очень минимально загружает блог))))
ОтветитьУдалитьНу да, и ещё при узком основном поле просто ссылки симпатичнее смотрятся. Тоже плюс.
ОтветитьУдалить