Похожие статьи 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); 
}

Образец