BloggaRolla
Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  вторник, августа 30, 2011  

Виджет вывода похожих по тематике сообщений
Предлагаю вашему вниманию еще один виджет схожих по тематике постов в блог на платформе Blogger. Это весьма старенький, но по-прежнему актуальный и достаточно стабильный гаджет отображения похожих статей, который мы с удовольствием рассмотрим далее. Оригинальное материалы находятся по этому адресу.

Его установка не потребует каких-либо героических свершений и подозрительных знаний. Наиболее достойно блок похожих статей будет смотреться под публикуемым сообщением, о чем и пойдет речь ниже по тексту.

Особенности и, как следствие, преимущества виджета:
  • виджет стабильно отображает похожие посты к сообщению, в теле которого находится;
  • присутствует возможность задать вывод нескольких ярлыков со списками постов;
  • настройка сопроводительной подписи к блоку сообщений;
  • изменение количества отображаемых сообщений.
Пример виджета изображением:

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

Установка виджета схожих по тематике постов.

Чтобы разместить новостной гаджет статей, потребуется небольшая правка шаблона. Для этого проследуйте Дизайн > Изменить HTML и отметьте галочкой "Расширить шаблоны виджета". Если процесс надругательства над шаблоном для вас весьма волнителен и необычен, следует сделать резервную копию вашего блога.
Далее находим в шаблоне отрезок <data:post.body/> и после него вставляем скрипт рассматриваемого виджета:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->

<!--
Modified by JackBook.Com to make it easier to use. 
1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it's no more.
-->

<div class='widget-content'>
<h3>Еще статьи по теме:</h3>
<div id='data2007'/><br/><br/>
<div id='hoctro'>
Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u> | <u><a href='http://www.jackbook.com/' title='Related Posts on Blogger Modified by JackBook.Com. Read More?'>Jack Book</a></u>
</div>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? 
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t); 
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li); 
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = decodeURI(raw.substr(homeUrl3.length+13));
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
// h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) { 
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? 
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>
Сохраните шаблон и проверьте отображение виджета связанных по тематике сообщений.

Данный скрипт содержит ссылки на автора, однако при желании вы легко можете избавиться от них путем удаления соответствующих строк из кода. Также вы можете изменить подпись к списку похожих сообщений "Еще статьи по теме:" на свою.

Некоторые дополнительные и изменяемые определения скрипта:
  • var maxNumberOfPostsPerLabel = 4 - количество отображаемых сообщений для ярлыка;
  • var maxNumberOfLabels = 10 - количество выводимых ярлыков.



Понравилась статья? Поделись ею с друзьями!

Не забудь подписаться на обновления блога:


Вы можете оставить свой отзыв через блок комментариев Вконтакте. При отсутствии профиля в этой социальной сети, воспользуйтесь удобной формой Disqus ниже.