Виджет “Динамическая страница содержания” для блога

Виджет “Динамическая страница содержания” (Dynamic Contents Page) позволяет динамически обновлять страницу содержания блога, созданную для облегчения навигации по какой-либо теме постов. Как это работает можно посмотреть выбрав в меню моего блога пункт “Виджеты”

На странице “Виджеты” отображаются ссылки на все мои статьи связанные с виджетами.

При добавлении новых статей с меткой (label) “виджет” (для моей страницы), ссылки на них будут добавлены в содержание автоматически. Другими словами, виджет работает по принципу “установил и забыл”.

Виджет является платформонезависимым и может использоваться на любой платформе позволяющей использование JavaScript.

Инструкция по установке

Код:

<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> <!-- Dinamic Contents Page Widget by minimusX --> <!-- http://minimusx.blogspot.com --> google.load("feeds", "1"); function initialize() { var num = 100; // глубина сканирования var feed = new google.feeds.Feed("YOUR_FEED_URL"); var IsTarget = 0; feed.setNumEntries(num); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); var searchString = container.className; var divFooter = document.createElement("div"); var aFooter = document.createElement("a"); divFooter.style.fontSize = "x-small"; aFooter.appendChild(document.createTextNode("minimusX")); aFooter.href = "http://minimusx.blogspot.com"; divFooter.appendChild(document.createTextNode("Dynamic Contents Page Widget by ")); divFooter.appendChild(aFooter); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; IsTarget = 0; for (var k = 0; k < entry.categories.length; k++) { if (entry.categories[k] == searchString) { IsTarget = 1; break; } } if (IsTarget == 1) { var attributes = ["publishedDate", "contentSnippet"]; var br = document.createElement("br"); var a = document.createElement("a"); a.appendChild(document.createTextNode(entry["title"])); a.href = entry["link"]; container.appendChild(a); for (var j = 0; j < attributes.length; j++) { var div = document.createElement("div"); div.appendChild(document.createTextNode(entry[attributes[j]])); container.appendChild(div); } container.appendChild(br); } } container.appendChild(divFooter); } }); } google.setOnLoadCallback(initialize); </script>

Вариант 1:

Код, показанный выше, вставьте в заголовок шаблона (в любом месте между тегами head). Это вариант хорош в плане использования, так как не требует использования кода на каждой странице содержания (у меня их три), но, в некоторой степени, увеличивает время загрузки каждой страницы, как любой другой дополнительный код, загружаемый с любой страницой блога. Поэтому я использую вариант 2.

Вариант 2:

Показанный выше код вставьте непосредственно в текст поста используемого в качестве страницы содержания. Для этого необходимо выбрать режим редактирования HTML.

Код для страницы:

Для обоих вариантов установки необходимо разместить следующий код на странице поста статьи-содержания:

<p>Здесь можно вставить текст предваряющий содержание. Если текст не нужен, удалите этот текст.</p> <div id="feed" class="виджет"></div> <p>Здесь можно вставить текст завершающий содержание. Если текст не нужен, удалите этот текст.</p>

В варианте 2 этот код необходимо вставить ниже кода скрипта.

Настройки

Найдите в тексте кода скрипта текст YOUR_FEED_URL и замените его на URL фида вашего блога (для блогов Blogger этот URL выглядит приблизительно так: http://minimusx.blogspot.com/feeds/posts/default).

class="виджет" –  в “коде для страницы” измените значение параметра class на значение метки (label) по которой вы определяете вхождение поста в данный список постов.

var num = 100; – глубина сканирования. Если в Вашем блоге всего 100 статей, нет смысла устанавливать глубину сканирования 10 000!

Удачи!

© minimusX, 2008. При копировании и републикации статьи ссылка на первоисточник обязательна.

adadae0f-a0f4-4072-981f-2bede04fd9b3

»»  читать далее

Виджет Top Commentators (Лучшие Комментаторы) для Blogger

Этот виджет выводит топ самых активных комментаторов блога, анализируя последние 500 комментариев. В отличии от других виджетов этого типа, этот виджет имеет возможность фильтрации комментаторов (например можно отсеять собственные комментарии). Виджет базируется на YAHOO Pipes. Устанавливается очень просто: как содержимое стандартного виджета Blogger HTML/JavaScript.

Исправьте нижеследующий код. Вместо YOUR_BLOG_URL вставьте URL вашего блога, а вместо NICK_NAME_FILTER ваш ник или несколько ников через запятую.

<script type="text/javascript"><br /> function pipeCallback(obj) {<br /> document.write('<ol>');<br /> var i;<br /> for (i = 0; i < obj.count ; i++)<br /> {<br /> var href = "'" + obj.value.items[i].link + "'";<br /> if(obj.value.items[i].link == "")<br /> var item ="<li>" + obj.value.items[i].title + "</li>";<br /> else<br /> var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";<br /> document.write(item);<br /> }<br /> document.write('</ol>');<br /> }<br /> </script><br /> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=2351a7b3195ee95ef3643998bc8def5e&url=http%3A%2F%2FYOUR_BLOG_URL&num=10&filter=NICK_NAME_FILTER" type="text/javascript"></script><br /> <span style="font-size: 80%">Widget by <a href="http://www.bloggerplugins.org">Blogger Widgets </a></span>

© minimusX, 2008. При копировании и републикации статьи ссылка на первоисточник обязательна.

»»  читать далее

Виджет Related Posts by Categories (Похожие статьи по категориям) для Blogger'а

Ещё один виджет из серии “Related Posts”. Этот виджет мне нравится даже больше чем тот, что я описывал в предыдущей статье. Виджет разработан Hoctro, слегка переработан для удобства Джеком и доработан мной для устранения бага, связанного с использованием виджета в Unicode блогах (non-English).

Инструкция по установке

Зайдите в Панель инструментов > Макет > Изменить HTML, установите флажок “Расширить шаблоны виджета”, найдите код <p><data:post.body /></p> и вставьте код, представленный ниже, сразу после найденного кода.

<b:if cond='data:blog.pageType == "item"'><br /> <div class='similiar'><br /> <!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** --><br /> <!-- *****************Related Articles by Labels - Take Two****************** --><br /> <br /> <!--<br /> Modified by JackBook.Com to make it easier to use. <br /> 1. Now, users don't need to change anything to use this widget. just copy and paste, and done!<br /> 2. The current article will also be listed, now it's no more.<br /> --><br /> <br /> <!-- Modified by minimusX to fixing problems using in Unicode blogs --><br /> <br /> <div class='widget-content'><br /> <h3>Related Posts by Categories</h3><br /> <div id='data2007'/><br/><br/><br /> <div id='hoctro'><br /> 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> | <u><a href='http://minimusx.blogspot.com/' title='Related Posts on Blogger Modified by minimusX Read More?'>minimusX</a></u><br /> </div><br /> <script type='text/javascript'><br /> <br /> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;<br /> var maxNumberOfPostsPerLabel = 4;<br /> var maxNumberOfLabels = 10;<br /> <br /> <b:if cond='data:blog.pageType == "item"'><br /> maxNumberOfPostsPerLabel = 100;<br /> maxNumberOfLabels = 3;<br /> </b:if><br /> <br /> <br /> <br /> function listEntries10(json) {<br /> var ul = document.createElement(&#39;ul&#39;);<br /> var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? <br /> json.feed.entry.length : maxNumberOfPostsPerLabel;<br /> for (var i = 0; i &lt; maxPosts; i++) {<br /> var entry = json.feed.entry[i];<br /> var alturl;<br /> <br /> for (var k = 0; k &lt; entry.link.length; k++) {<br /> if (entry.link[k].rel == &#39;alternate&#39;) {<br /> alturl = entry.link[k].href;<br /> break;<br /> }<br /> }<br /> var li = document.createElement(&#39;li&#39;);<br /> var a = document.createElement(&#39;a&#39;);<br /> a.href = alturl;<br /> <br /> if(a.href!=location.href) {<br /> var txt = document.createTextNode(entry.title.$t); <br /> a.appendChild(txt);<br /> li.appendChild(a);<br /> ul.appendChild(li); <br /> }<br /> }<br /> for (var l = 0; l &lt; json.feed.link.length; l++) {<br /> if (json.feed.link[l].rel == &#39;alternate&#39;) {<br /> var raw = json.feed.link[l].href;<br /> var label = decodeURI(raw.substr(homeUrl3.length+13));<br /> var k;<br /> for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);<br /> var txt = document.createTextNode(label);<br /> var h = document.createElement(&#39;b&#39;);<br /> h.appendChild(txt);<br /> var div1 = document.createElement(&#39;div&#39;);<br /> div1.appendChild(h);<br /> div1.appendChild(ul);<br /> document.getElementById(&#39;data2007&#39;).appendChild(div1);<br /> }<br /> }<br /> }<br /> function search10(query, label) {<br /> <br /> var script = document.createElement(&#39;script&#39;);<br /> script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;<br /> + label +<br /> &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);<br /> script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);<br /> document.documentElement.firstChild.appendChild(script);<br /> }<br /> <br /> var labelArray = new Array();<br /> var numLabel = 0;<br /> <br /> <b:loop values='data:posts' var='post'><br /> <b:loop values='data:post.labels' var='label'><br /> textLabel = &quot;<data:label.name/>&quot;;<br /> <br /> var test = 0;<br /> for (var i = 0; i &lt; labelArray.length; i++)<br /> if (labelArray[i] == textLabel) test = 1;<br /> if (test == 0) { <br /> labelArray.push(textLabel);<br /> var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? <br /> labelArray.length : maxNumberOfLabels;<br /> if (numLabel &lt; maxLabels) {<br /> search10(homeUrl3, textLabel);<br /> numLabel++;<br /> }<br /> }<br /> </b:loop><br /> </b:loop><br /> </script><br /> </div><br /> <br /> </div><br /> </b:if><br />

Сохраните шаблон и посмотрите на результат.

Настройки виджета

Две переменные, показанные ниже, позволяют управлять внешним видом и временем загрузки виджета

var maxNumberOfPostsPerLabel = 4; <br /> var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel – количество статей выводимых по каждой категории.

maxNumberOfLabels – глубина сканирования статей на предмет соответствия теме. Чем глубже копаешь, тем больше найдёшь. С другой стороны – чем глубже копаешь, тем дольше получаешь результат. Здесь главное найти “золотую середину”.

P.S. Пока готовил статью к публикации, Hoctro внёс изменения в свой виджет. Изменения фактически идентичны моим, разница лишь в названии функции – результат тот-же.

© minimusX, 2008. При копировании и републикации статьи ссылка на первоисточник обязательна.

»»  читать далее

Графика для блога

Несколько наборов иконок RSS от FastIcons. Весь баласт убран – только изображения в формате PNG (256х256, прозрачный фон). Как изменить размер изображения, надеюсь все знают.

Нестандартные логотипы RSS

Нестандартные логотипы RSS 8 изображений в формате PNG (256x256, прозрачный фон). 335 KB

Разноцветные круглые логотипы RSS

Разноцветные круглые логотипы RSS 4 цвета. 4 изображения в формате PNG (512x512, прозрачный фон). 224 KB

3D логотип RSS

3D логотип RSS 1 изображение в формате PNG (128x128, прозрачный фон). 12,5 KB

Логотипы социальных сетей

Логотипы социальных сетей 23 изображения в формате PNG (256x256, прозрачный фон) . 550 KB

© minimusX, 2008. При копировании и републикации статьи ссылка на первоисточник обязательна.

»»  читать далее

Виджет Related Posts (“Другие статьи по теме”) для Blogger

Наличие в блоге виджета “другие статьи по теме” (Related Posts) очень сильно влияет на привлечение качественного траффика. Весьма часто читатель, придя на блог и убедившись в полезности прочитанной статьи, ищет дополнительную информацию по интересющей его теме и, не сумев найти, даже если эта информация в блоге имеется, уходит туда, где, как ему кажется, она есть. Поэтому виджет Related Posts весьма востребован в среде блоггеров. Увы, в Blogger’е такой “стандартный” виджет отсутствует, но всё, что нужно для его создания, есть. Приступим …

Виджет, который мы сейчас создадим, использует технологию JSON (подробнее о JSON можно прочитать здесь) и информацию “стандартного” виджета Labels (не того, что показывает все метки (категории) блога, а того, который показывает метки статьи). Для того что бы перейти непосредственно к установке виджета, не обходимо убедиться, что шаблон темы готов к нашим манипуляциям. Зайдите в Панель инструментов > Макет > Элементы страницы и убедитесь, что секция статей блога выглядит так:

В этом случае можно переходить к инструкции по установке. Если же секция статей блога выглядит так:

необходимо внести в шаблон темы некоторые небольшие изменения. Зайдите в Панель инструментов > Макет > Изменить HTML и найдите в коде шаблона следующие строки

<b:section class='main' id='main' showaddelement='no'> <br /> <b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>

и замените значение параметра showaddelement с no на yes. Теперь эти строки должны выглядеть так:

<b:section class='main' id='main' showaddelement='yes'> <br /> <b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>

Зайдите на страницу “Добавить элементы страницы” и убедитесь, что секция статей блога выглядит так же, как на первом изображении. Если это так, Вы готовы к установке виджета.

Инструкция по установке

Зайдите в Панель инструментов > Макет > Изменить HTML и вставьте код, представленный ниже, в секцию head шаблона (где-нибудь перед закрывающим тегом /head)

<script type="text/javascript"><br /> //<![CDATA[<br /> var relatedTitles = new Array();<br /> var relatedTitlesNum = 0;<br /> var relatedUrls = new Array();<br /> function related_results_labels(json) {<br /> for (var i = 0; i < json.feed.entry.length; i++) {<br /> var entry = json.feed.entry[i];<br /> relatedTitles[relatedTitlesNum] = entry.title.$t;<br /> for (var k = 0; k < entry.link.length; k++) {<br /> if (entry.link[k].rel == 'alternate') {<br /> relatedUrls[relatedTitlesNum] = entry.link[k].href;<br /> relatedTitlesNum++;<br /> break;<br /> }<br /> }<br /> }<br /> }<br /> function removeRelatedDuplicates() {<br /> var tmp = new Array(0);<br /> var tmp2 = new Array(0);<br /> for(var i = 0; i < relatedUrls.length; i++) {<br /> if(!contains(tmp, relatedUrls[i])) {<br /> tmp.length += 1;<br /> tmp[tmp.length - 1] = relatedUrls[i];<br /> tmp2.length += 1;<br /> tmp2[tmp2.length - 1] = relatedTitles[i];<br /> }<br /> }<br /> relatedTitles = tmp2;<br /> relatedUrls = tmp;<br /> }<br /> function contains(a, e) {<br /> for(var j = 0; j < a.length; j++) if (a[j]==e) return true;<br /> return false;<br /> }<br /> function printRelatedLabels() {<br /> var r = Math.floor((relatedTitles.length - 1) * Math.random());<br /> var i = 0;<br /> document.write('<ul>');<br /> while (i < relatedTitles.length && i < 20) {<br /> document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');<br /> if (r < relatedTitles.length - 1) {<br /> r++;<br /> } else {<br /> r = 0;<br /> }<br /> i++;<br /> }<br /> document.write('</ul>');<br /> }<br /> //]]><br /> </script>

Сохраните шаблон. Установите флажок “Расширить шаблоны виджета” и найдите следующий код:

<b:if cond='data:post.labels'><br /> <data:postLabelsLabel/><br /> <b:loop values='data:post.labels' var='label'><br /> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if><br /> </b:loop><br /> </b:if>

и замените его на следующий:

<b:if cond='data:post.labels'><br /> <data:postLabelsLabel/><br /> <b:loop values='data:post.labels' var='label'><br /> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if><br /> <b:if cond='data:blog.pageType == "item"'><br /> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/><br /> </b:if><br /> </b:loop><br /> </b:if>

Ещё раз сохраните шаблон и перейдите на страницу “Добавить элементы страницы”. В секции “Сообщения блога” добавьте новый HTML/Javascript виджет. В поле “Заголовок” введите что-то вроде “Другие статьи по этой теме:”, а в поле “Содержание” следующий код:

<br /> <script type="text/javascript"><br /> removeRelatedDuplicates();<br /> printRelatedLabels(); <br /> </script>

Сохраните шаблон и вернитесь на страницу “Изменить HTML”. Установите флажок “Расширить шаблоны виджета” и найдите код только что установленного виджета (виджет не обязательно будет называться HTML13, как в примере). Внесите изменения (две строки) как показано ниже:

<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'><br /> <b:includable id='main'><br /> <b:if cond='data:blog.pageType == "item"'> <!-- Добавьте эту строку --><br /> <!-- only display title if it's non-empty --><br /> <b:if cond='data:title != ""'><br /> <h2 class='title'><data:title/></h2><br /> </b:if><br /> <div class='widget-content'><br /> <data:content/><br /> </div><br /> <b:include name='quickedit'/><br /> </b:if> <!-- И эту --><br /> </b:includable><br /> </b:widget>

это изменение позволит показывать виджет только при просмотре самой статьи. Сохраните шаблон. Наблюдайте результат.

Если что-то не сложилось, значит Вы что-то пропустили или упустили. У меня всё работает.

© minimusX, 2008. При копировании и републикации статьи ссылка на первоисточник обязательна.

»»  читать далее