Похожие статьи Blogger

Похожие статьи на Blogger реализуются благодаря feed-каналу ярлыков. То есть каждому сообщению нужно предварительно присвоить ярлык. Нижепредставленный скрипт помимо названия статьи будет выводить ещё и изображения к ним. Он хорош тем, что не содержит внешние файлы, а значит загрузка страницы будет осуществляться быстрее.

Шаг 1. Добавляем скрипт.

В "Дизайн"-"Изменить HTML"-. Перед </head> пишем:
<script type='text/javascript'>
//<![CDATA[
var reltitulos = new Array();
var relurls = new Array();
var relimagen = new Array();
var reltituloscantidad = 0;

var relmaxamostrar = 4; // число записей, которые будут показаны
var relmaxlen = 100; // число символов первых предложений сообщений
var relimagenpodefecto = "адрес_изображения_по_умолчанию"; 
function leerpostetiquetas(json) {
  var entry, postimg, postcontent, cat;
  for (var i = 0; i < json.feed.entry.length; i++) {
    entry = json.feed.entry[i];
    if (i==json.feed.entry.length) { break; }
    reltitulos[reltituloscantidad] = entry.title.$t;
    postcontent = "";
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    }
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = relimagenpodefecto;
    }
    relimagen[reltituloscantidad] = postimg;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        relurls[reltituloscantidad] = entry.link[k].href;
        break;
      }
    }
    reltituloscantidad++;
  }
}
function mostrarrelacionados() {
  var tmp = new Array(0);
  var tmp2 = new Array(0);
  var tmp3 = new Array(0);
  var tmp4 = new Array(0);
  for(var i = 0; i < relurls.length; i++) {
    if(!contains(tmp, relurls[i])) {
      tmp.length += 1; tmp[tmp.length - 1] = relurls[i];
      tmp2.length += 1; tmp2[tmp2.length - 1] = reltitulos[i];
      tmp4.length += 1; tmp4[tmp4.length - 1] = relimagen[i];
    }
  }
  reltitulos = tmp2; relurls = tmp; relimagen = tmp4;
  for(var i = 0; i < reltitulos.length; i++){
    var indice = Math.floor((reltitulos.length - 1) * Math.random());
    var tempTitle = reltitulos[i]; var tempUrls = relurls[i];
    var tempImagen = relimagen[i];
    reltitulos[i] = reltitulos[indice]; relurls[i] = relurls[indice];
    relimagen[i] = relimagen[indice];
    reltitulos[indice] = tempTitle; relurls[indice] = tempUrls;
    relimagen[indice] = tempImagen;
  }
  var cuantosPosts = 0;
  var r = Math.floor((reltitulos.length - 1) * Math.random()); 
  var rini = r; 
  var salida;
  var dirURL = document.URL;
  while (cuantosPosts < relmaxamostrar) {
    if (relurls[r] != dirURL) {
      salida = "<div class='relsposts'>";
      salida += "<a href='" + relurls[r] + "' title='" + reltitulos[r] + "'><img src='" + relimagen[r] + "' /><div>" + reltitulos[r] + "</div></a>"; // удалив " + reltitulos[r] + " не будет показан текст под изо
      salida += "</div>";
      document.write(salida);
      cuantosPosts++;
      if (cuantosPosts == relmaxamostrar) { break; }
    }
    if (r < reltitulos.length - 1) {
      r++;
    } else {
      r = 0;
    }
    if(r==rini) { break; }
  }
}
function eliminattags(cual,longitud){
  var resumen = cual.split("<");
  for(var i=0;i<resumen.length;i++){
    if(resumen[i].indexOf(">")!=-1){
      resumen[i] = resumen[i].substring(resumen[i].indexOf(">")+1,resumen[i].length);
    }
  }
  resumen = resumen.join("");
  resumen = resumen.substring(0,longitud-1);
  return resumen;
} 
function contains(a, e) {
  for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
  return false;
}
//]]>
</script>

Дополнения

Обратим внимание на фрагмент:
if ("media$thumbnail" in entry) {
  postimg = entry.media$thumbnail.url;
} else {
  postimg = relimagenpodefecto;
}
В зависимости от целей заменяем его.

Вариант 1. Для того, чтобы для каждого ярлыка задать индивидуальную картинку по умолчанию вышеописанный код изменим на:
if ("media$thumbnail" in entry) {
  postimg = entry.media$thumbnail.url;
} else {
  var cat = entry.category[0].term;
  postimg = getimagen(cat);
}
и перед //]]></script> добавляем:
function getimagen(cat) {
  var laimg = "URL-адрес_общих_изо_когда_нет_указанного_ниже_ярлыка";
  if(cat=="ярлык_1"){laimg = "URL_изо_1"}
  if(cat=="ярлык_2"){laimg = "URL_изо_2"}
  // ....... 
  return laimg;
}

Вариант 2. Для того, чтобы увеличить размер изображения вышепоказанный код сменим на:
if ("media$thumbnail" in entry) {
  postimg = entry.media$thumbnail.url;
  postimg = postimg.replace('s72-c','s110-c');
} else {
  postimg = relimagenpodefecto;
}
Где вместо 's110-c' укажите свой размер (подробнее).

Шаг 2. Создаём ещё одну линию после постов.

Код
<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> <div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div> </div>
заменяем на
<div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
              <b:if cond='data:blog.pageType == &quot;item&quot;'>
                <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=leerpostetiquetas&amp;max-results=50&quot;' type='text/javascript'/>
              </b:if>
          </b:loop>
        </b:if>
      </span> <div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='postsrelacionados'>
      <script type='text/javascript'>mostrarrelacionados();</script>
        <div style='clear:both;'/>
   </div>
</b:if>
</div>
, где max-results=50 - количество последних постов, из которых будут выбраны записи для отображения в "похожих статьях". Чем выше значение, тем загрузка станицы будет более медленная.

Шаг 3. Определить стиль гаджета.

До ]]></b:skin> вносим
.relsposts {
  float: left;
  overflow: hidden;
  padding: 5px;
  text-align: center;
  width: 20%;
  height: 125px;
}
.relsposts img:hover { 
  background-image: -moz-linear-gradient(#fff, #ddcca3);
  background-image: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ddcca3));
  filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#fff,endColorStr=#ddcca3); 
  background-image:-o-linear-gradient(top,#fff,#ddcca3);
}
.relsposts a {
  display: inline;
  text-decoration: none;
}
.relsposts img {
  padding: 5px;
  background: #fff;
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .5); 
}
Образец
Rookee — инструменты для привлечения клиентов на сайт
в f t
наверх ↑

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

Иван
Отлично, я правда ещё не успел попробовать))), но похоже это лучший вариант для блоггер из того что есть... Наталья скажите а нельзя сделать не по ярлыкам а по названиям?
NMitra
Боюсь, что программу сложно научить "читать" названия. Можно не отображать ссылки на ярлыки.
Elchin
Указанный URL уже проиндексирован!

http://blog-elchin-vahid.blogspot.com/p/useful-links-for-new-bloggers.html

shpargalkablog.ru - xороший конспект для начинающего блоггера.
Дмитрий - Автор блога
Здравствуйте Наталья! Меня интересует такой вопрос (извините если не здесь спрашиваю): Можно ли переместить пост из одного ярлыка в другой...? Если да, то как это можно сделать?
NMitra
Здравствуйте, Дмитрий! Посмотрите первый скриншот http://shpargalkablog.ru/2011/03/yarlyki-blogger.html

1)выделите галочкой нужное сообщение,
2)меню "Действие с ярлыком",
3)"Удалить ярлык",
4)присваиваем верный ярлык.
Якушевская Юлия Сергеевна
Мне немного не понятно
var relimagenpodefecto = "адрес_изображения_по_умолчанию"; так и оставлять? или сюда нужно что-то вводить?
У меня в коде нет некоторых элементов вашего кода. Я бы хотела попробовать.
Якушевская Юлия Сергеевна
http://yakushevskaya.blogspot.com/
NMitra
Вместо адрес_изображения_по_умолчанию нужна http://2.bp.blogspot.com/-NlV_tgV1nbI/TbWLdbHhIbI/AAAAAAAABk8/b1MPrsO4bo8/s72-c/%25D0%25BD%25D0%25B5%25D0%25B4%25D0%25B5%25D0%25BB%25D1%258F+%25D0%2598%25D0%259D%25D0%25A4%25D0%259E_23+%25D0%25B0%25D0%25BF%25D1%2580%25D0%25B5%25D0%25BB%25D1%258F.bmp или любая другая картинка
Якушевская Юлия Сергеевна
Ничего не получается, нет кода -
Шаг 2. Создаём ещё одну линию после постов.

Поэтому его не могу заменить. Что делать?
С уважением, Юлия
NMitra
Поищите <span class='post-labels'>
В целом код может несколько отличаться, так как уже внесены изменения с "хлебными крошками", да и социальных кнопок нет. Точный код здесь не подскажу, нужно смотреть шаблон, но идей такая:

<b:if cond='data:post.labels'>....здесь код</b:loop></b:if>здесь код
españolka
У меня такая же проблема, как её уже описали выше, в комменте №9. Код никак не найду для шага №2, вернее он отсутствует.
И этого кода (ну или хотя бы примерного) у меня нету:
....здесь кодздесь код
Подскажите пожалуйста!
NMitra
Нужно смотреть шаблон. Но если у вас включены ярлыки, то данный участок будет обязательно в коде. Можете загрузить этот шаблон на тестовый блог, чтобы понять что-куда в более реальных условиях:

https://sites.google.com/site/spargalka1/rating/template-4278504150036459330.xml?attredirects=0&d=1
Евгения
А есть ли более простой способ - без картинок, списком?
NMitra
Да, конечно. Попозже опишу.
NMitra
Евгения, наконец-то довела до ума, чтобы и просто и быстро - http://shpargalkablog.ru/2011/10/pohozhie-soobshcheniya-blogger.html.
pettrov
Наташа, здравствуйте. я нашел в интернете скрипт "Похожие статьи" и установил к себе(он мне подходит по дизайну). Вот только он отображает ссылку и на ту страницу, на которой находишься. Не подскажите, как можно исправить?
Для примера - http://www.a-s-petrov.ru/2011/11/blog-post_19.html
NMitra
Здравствуйте, я уж как-то говорила, что обладаю очень поверхностными знаниями скриптов. Посмотрите здесь - http://shpargalkablog.ru/2011/10/pohozhie-soobshcheniya-blogger.html , попробуйте найти закономерности. Или спросить разработчика, они, как правило, стремятся улучшить свой продукт.
Космо Мизраил Горыныч
!!!

Цитирую:
"Ничего не получается, нет кода -
"Шаг 2. Создаём ещё одну линию после постов.

У мя было то же самое. Заменил и так. Оказались две панели "поделиться" :)

У всех шаблоны разные просто :)

Сейчас буду вырезать лишнюю...
NMitra
Для стандартных шаблонов как-то стараюсь подгадывать, в остальном, согласна, нужна индивидуальная подборка. Здесь http://shpargalkablog.ru/2011/03/yarlyki-blogger.html описаны ситуации с <b:loop values='data:post.labels' var='label'/>
Anatoliy
Поставил шаблон из 15 сообщения. Ни чего не отображается, до тех пор, пока не уберу условие:


в двух последних вставках.
Как узнать, почему не работает?
Спасибо.
Anatoliy
Вот это условие:
b:if cond='data:blog.pageType == "item"'>
/b:if>
Anatoliy
Я так понимаю должен разрешить данный тег. Как это делалось на старом интерфейсе описан в справке к blogger:
How do I enable Post Pages?
http://support.google.com/blogger/bin/answer.py?hl=en&answer=42049&ctx=cb&src=cb&cbid=11vkrywlmjxv0&cbrank=2

но сейчас нет таких пунктов. Как быть?
Спасибо!
NMitra
Если вы этот пункт не дезактивировали в старом интерфейсе, то вам нечего беспокоиться. Он включен в новом и его нельзя отключить. Нужен он для создания гаджета архива блога и не имеет отношения к указанному условию.

Условие показывает, что вывод постов требуется только в теле постов, а не на Главной.

Хотя уберите. К решению можно прийти несколькими способами. Один человек сказал, что если код работает, то вы выбрали правильное решение.
Anatoliy
Спасибо!
Только что увидел, что и в приведенном Вами примере на Главной странице нет ссылок на похожие статьи. А я бился увидеть их именно на главной, по незнанию.
Ведь ярлыки на главной отображаются.
Оксана Задорожная
Я прошу прощения, но когда-то видела статью, как сделать так, чтобы после публикации сообщения оно попадало на соответсвующую страницу блога. По-моему там тоже ярлыки использовались. Уже два раза весть блог облазила и не нашла. Наташа, подскажите пожалуйста, где эта статья?
NMitra
Оглавление? http://shpargalkablog.ru/2011/04/krasivoe-oglavlenie-blogger.html
Оксана Задорожная
Как здесь, чтобы получалось на странице: http://shpargalkablog.ru/2010/07/razrabotka-bloga-v-blogger.html
NMitra
Это я вручную делала, чтобы страница индексировалась. Напишу статью и добавлю ссылку на страницу.
NMitra
http://shpargalkablog.ru/2012/02/css-kolonki.html - с помощью columns делю на колонки.
Roman Besttips
Наташ, а подскажите как реализовать такое: чтобы картинками были не заданные для каждого ярлыка, а те которые присутствуют в посте?
Roman Besttips
Да еще ничего не получается, картинки не отображаются и надпись :undefined
Roman Besttips
с undefined я разобрался, а вот первый вопрос в силе...
NMitra
Изображения должны быть добавлены через Blogger из Пикасы.
Serge Kaplun
NMitra, скажите пожалуйста, можно ли "добиться" ссылки на скачку больших изображений (оригиналов) скажем 1920x1080 а не кропнутого изображения с пикассы. Я просто заметил у вас ссылку на скачку картинки в "Образце" в которой вы добавили ( /d/ ) и изображение качается. Спасибо!
NMitra
Не очень поняла ваш вопрос. Посмотрите эти ссылки:

http://shpargalkablog.ru/2011/03/pochemu-uhudshaetsya-foto-pri.html
http://shpargalkablog.ru/2011/05/kak-sdelat-galereyu-izobrazhenii.html
http://shpargalkablog.ru/2011/09/modalnoe-okno-blogger.html
Serge Kaplun
NMitra, ладно, спасибо.
Анонимный
А знаете такой виджет похожих постов от Linkwithin? Я что-то про него не могу у вас найти, хотя вроде раньше было. Так вот я хотел спросить может Вы знаете, почему новые статьи он не показывает очень долгое время. Думаю либо убрать его вообще, надоел этот тормозной скрипт. Так он в принципе красивый очень и миниатюры показывает, но новые статьи он почему-то отказывается видеть.
NMitra
Знаю, про сервес не писала. Почему грузиться долго не выясняла.
Анонимный
Отличная вещь! А не подскажите как сделать, чтобы этот скрипт появлялся и на главной странице?
Анонимный
Кстати при изменении значения var relmaxlen ничего не меняется.
Alexa
После изменения редактора шаблонов в нем ничего невозможно найти. Даже закрывающий тег head в нем не находится. Шаблон стандартный Simple.
NMitra
Анонимный, попробуйте обратиться к автору скрипта, ссылка на него есть в тексте статьи. Продублирую http://vagabundia.blogspot.com/2010/12/posts-relacionados-con-miniaturas.html

Alexa, http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html
Алексей Ковалёв
Наташа, здравствуйте, простите если вопрос не по теме.
После изменения всех ссылок сообщений на ПОЛЬЗОВАТЕЛЬСКАЯ ПОСТОЯННАЯ ССЫЛКА у меня гаджет LinkWithin перестал видеть ссылки на все мои посты. Что делать, чтобы показывались похожие статьи?
NMitra
Здравствуйте, с LinkWithin совсем не знакома. Можете обнулить все свои изменения, проделанные в шаблоне http://shpargalkablog.ru/2012/03/shablon-blogger-polomalsya.html