OnLine статистика в реальном времени

Счётчики крупных сервисов, такие как Google Analitics, LiveInternet и т.д., используют многие блоггеры, можно даже сказать все, а вот статистику в реальном времени почему-то немногие ... А тем не менее такая статистика позволяет увидеть реальную картину происходящего на блоге. Вот два, как мне кажется, наиболее интересных виджета.

FEEDJIT

Виджет от FEEDJIT "Live traffic feed" позволяет отслеживать траффик (последние 10 посетителей) в любой момент непосредственно на блоге или перейдя на сайт сервиса по ссылке виджета "Watch in Real-Time" (в предпоследней строке). Информация выдаётся в текстовом виде (кроме флагов принадлежности), что весьма благотворно сказывается на скорости загрузки виджета. Регистрация на сайте сервиса не требуется - просто установите виджет в своём блоге и информация о посещениях сразу же начнёт отображаться в теле виджета. Установка производится стандартно - через гаджет Blogger'а HTML/javascript или автоустановкой, что, в общем-то, одно и то-же. Если Вы не хотите, чтобы информация о Ваших посещениях выводилась в виджет, кликните Options и выберите  Ignore my browser (необходимо включать для каждого броузера отдельно).Для просмотра карты стран посетителей - там же выберите Life Traffic Map. Для просмотра самых посещаемых страниц за текущий день выберите Options-Popular Pages Today.

Кроме виджета "Live traffic feed", на сайте сервиса можно найти ещё три неплохих статистических виджета:

• Live Traffic Map (карта траффика) - выводит карту мира и обозначает страны из которых пришли посетители.
  
• Recommended Readings (рекомендуемые статьи) - По специальной технологии (посещение + время на странице) определяет самые читаемые статьи. !!! Работает при траффике не менее 20-ти уникальных страниц в день !!!
  
• Page Popularity (популярность статей) - популярность страниц по посещениям.
  

Рекомендую! Сам пользуюсь ...

NeoWORX

Нереально красивый flash-виджет NeoCounter от NeoWORX. Настолько красивый, что я установил его на свой блог, несмотря на то, что у меня уже стоит виджет от FEEDJIT. Этот виджет, так-же как и предыдущий, показывает посещаемость сайта в реальном времени. Имеется множество настроек, как по выводу информации (по городам, по странам и т.п.), так и по внешнему виду (без скина, с анимированным flash-скином (большой выбор), размер и т.п.). Можно даже настраивать флаги и выводимый текст, но, к сожалению, на сегодняшний день русский язык не поддерживается. Для установки виджета требуется регистрация, однако процесс этот не сложный - от Вас потребуется e-mail и пароль. Сразу после установки виджета, Ваш блог появится в боковой колонке "My newest friends" сайта ресурса (ко мне даже кто-то зашёл), но не надолго - пока новые пользователи не вытеснят ваш блог из стека. Информация начинает выводится немедленно после регистрации.

Информация выводится в виде текста и флагов стран посетителей. При наведении курсора мыши на флаг выводится карта страны посетителя. Более полная статистика отслеживается на сайте ресурса в Вашем аккаунте

или в специальном тулбаре Вашего броузера, который Вы можете загрузить (по желанию) на сайте. На сегодняшний день доступны тулбары для FireFox и Internet Explorer.

Для "фанатов этого дела" существует мобильная (mobile) версия тулбара, позволяющая отслеживать траффик своего блога в любое время дня и ночи, в любой точке земного шара.

В member area Вы увидете, что виджет находится в trial состоянии на ближайшие двадцать дней. Не пугайтесь - после истечения триального периода Вам будет предложено несколько вариантов использования в том числе и бесплатный (25 000 посещений вашего блога в месяц).

Кроме виджета NeoCounter NeoWORX предлагает ещё шесть статистических виджетов, очень интересных и изумительно красивых:

Короче! Лучше увидеть своими глазами! Не поленитесь - зайдите, не пожалеете.

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

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

Новый FeedBurner

Появился новый FeedBurner. Зайдя в Google AdSense обнаружил новое предложение - создать канал для фида. После этого появилось предложение перевести фид-канал из FeedBurner в Google FeedBurner. Что я и сделал.

Суть та же, что и в старом FeedBurner, за исключением того, что в фид теперь добавляется реклама от AdSense. Тем кто планирует регистрацию на FeedBurner, рекомендую сразу регистрироваться на новом FeedBurner.
P.S. Вроде решилась проблема с русскоязычным названием фида. Поживём - увидим.

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

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

Виджет Active Commentators (Активные комментаторы) для Blogger

В одной из ранее опубликованных статей, я представлял виджет Top Commentators, написанный на YAHOO Pipes автором блога Assess My Blog. Однако, являясь сторонником Открытых кодов (Open Source) и, справедливо полагая, что виджет, являющийся частью блога, работает быстрее (не обращается к "третьему" сервису), я написал свой виджет "Активные комментаторы" ("Active Commentators"), который и представляю в этой статье.

Виджет выводит список самых активных комментаторов Вашего блога, исключая анонимных комментаторов. Возможна фильтрация списка на предмет исключения из него автора или авторов блога. Количество позиций в списке так-же настраивается.

Установка

Устанавливается, как содержимое стандартного гаджета Blogger HTML/JavaScript.

Код виджета:
<!-- minimusX Active Commentators Widget. START --> <div id="mx-ac"></div> <script type="text/javascript"> var maxList = 5; // Количество позиций в списке активных комментаторов var sFilter = ""; // Фильтр комментаторов. Разделять запятыми БЕЗ ПРОБЕЛОВ! var baseUrl = "http://minimusx.blogspot.com/"; // URL блога. var commentsUrl = "feeds/comments/default?alt=json-in-script&callback=listComments"; var aFilter = sFilter.split(","); function oCommentator (name, url, num) { this.name = name; this.url = url; this.num = num; } function doGetComments () { var container = document.getElementById("mx-ac"); var srcComm = document.createElement("script"); srcComm.type = "text/javascript"; srcComm.src = baseUrl + commentsUrl; container.appendChild(srcComm); } function isInFilter(str){ for (var i = 0; i < aFilter.length; i++) { if (str == aFilter[i]) return(true); } return(false); } var aCommentators = new Array(); function listComments (root) { var feed = root.feed; var entries = feed.entry || []; var maxNum = 0; for (var i = 0; i < entries.length; ++i) { var entry = entries[i]; var isInList = new Boolean(); var numInList = 0; if ((entry.author[0].name.$t != "Anonymous") & (!isInFilter(entry.author[0].name.$t))) { var name = entry.author[0].name.$t; var url = entry.author[0].uri.$t; if (aCommentators.length == 0) { aCommentators.push(new oCommentator(name, url, 1)); maxNum = 1; } else { for (var j = 0; j < aCommentators.length; j++) { isInList = false; if ((aCommentators[j].name == name) & (aCommentators[j].url == url)) { isInList = true; numInList = j; break; } } if (isInList) { aCommentators[numInList].num++; if (maxNum < aCommentators[numInList].num) maxNum = aCommentators[numInList].num; } else aCommentators.push(new oCommentator(name, url, 1)); } } } var container = document.getElementById("mx-ac"); 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("Widget by ")); divFooter.appendChild(aFooter); var numList = 0; for (var i = maxNum; i > 0; i--) { for (var j = 0; j < aCommentators.length; j++) { if ((aCommentators[j].num == i)) { var br = document.createElement("br"); var a = document.createElement("a"); a.appendChild(document.createTextNode(aCommentators[j].name + " (" + aCommentators[j].num + ")")); a.href = aCommentators[j].url; container.appendChild(a); container.appendChild(br); numList++; } if (numList >= maxList) break; } if (numList >= maxList) break; } container.appendChild(divFooter); } doGetComments(); </script> <!-- minimusX Active Commentators Widget. END -->

Настройка

var maxList = 5; - настройка позиций в списке комментаторов

var sFilter = ""; - фильтр. Если Вы не хотите фильтровать список оставьте как есть. Для фильтрации введите свой псевдоним, или псевдонимы всего коллектива авторов.
Например: var sFilter = "minimus"; или var sFilter = "minimus,Вася Пупкин,alconavt"; Псевдонимы разделяйте запятыми БЕЗ ПРОБЕЛОВ!

var baseUrl = "http://minimusx.blogspot.com/"; - URL Вашего блога. Обратный слэш в конце - ОБЯЗАТЕЛЕН!

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

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

Графика для блога. Blogger Icons Set Pack

Вот нарисовал пару иконок для Blogger ...

 

Blogger Icons Set v1.0 Pack  10 изображений в формате PNG (256x256, прозрачный фон). 391 KB

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

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

Blogumus – анимированный виджет Облако тегов для Blogger

Blogumus – анимированный (.swf) Blogger-виджет, “родной брат” очень популярного WordPress-виджета Cumulus, написанного Роем Танком (Roy Tanck). Виджет выводит облако тегов в виде сферы, вращающейся при наведении на неё курсора мыши. Версия виджета 1.14 от 17.09.2008

Установка

1. Скачать со страницы блога "Блоговод" и распаковать файл архива локализованной версии Blogumus. Полученные файлы закачать на какой-нибудь хост (например Google Pages).
2. Установить код виджета в тему (только XML-тема!). Для этого зайти в Панель управления, Макет-Изменить HTML (не устанавливая флажок “Расширить шаблоны виджета”) и найти код начала секции навигационной панели: <b:section class='sidebar' id='sidebar' preferred='yes'>. Вставить код виджета либо сразу после этой строки, либо, если Вы не хотите, чтобы этот виджет был первым, после какого-либо другого виджета в секции навигации.
3. Настроить код виджета для использования в своём блоге.

Код виджета:
<b:widget id='Label99' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <script src='http://rublezoid.googlepages.com/swfobject.js' type='text/javascript'/> <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div> <script type='text/javascript'> var so = new SWFObject("http://rublezoid.googlepages.com//tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff"); // uncomment next line to enable transparency //so.addParam("wmode", "transparent"); so.addVariable("tcolor", "0x333333"); so.addVariable("mode", "tags"); so.addVariable("distr", "true"); so.addVariable("tspeed", "100"); so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>"); so.addParam("allowScriptAccess", "always"); so.write("flashcontent"); </script> <b:include name='quickedit'/> </div> </b:includable> </b:widget>
Если виджет не работает (это может произойти в том случае, если Вы используете другие Flash-виджеты, или у Вас слишком длинные теги), попробуйте альтернативный код виджета:
<b:widget id='Label99' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <img src="http://www.blogger.com/img/object_element.gif" style="height: 200px; width: 250px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_0" /> </div> <b:include name='quickedit'/> </b:includable> </b:widget>

Настройка

По умолчанию Blogumus настроен следующим образом:

• ширина: 240px
• высота: 300px;
• цвет фона: белый
• цвет текста: серый
• размер шрифта: "12"

Для изменения ширины и высоты найдите следующую строку кода и внесите необходимые изменения:

var so = new SWFObject("http://rublezoid.googlepages.com/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

для альтернативного варианта:

<object type="application/x-shockwave-flash" data="http://rublezoid.googlepages.com/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >

Для изменения цвета фона, найдите и измените следующий код:

var so = new SWFObject("http://rublezoid.googlepages.com/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

для альтернативного варианта:

<param name="bgcolor" value="#ffffff" />

Для изменения цвета текста, найдите и измените следующий код:

so.addVariable("tcolor", "0x333333");

для альтернативного варианта:

<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>

Для изменения размера шрифта, найдите и измените следующий код:

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

для альтернативного варианта:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'>

Update 17.01.2009: Исправлена ошибка перехода по русскоязычным линкам.

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

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

Виджет Most Commented Posts (Популярные статьи) для Blogger

Вообще-то название “Most Commented Posts” лучше переводить, как “Наиболее комментируемые статьи”, но в ру-нете почему-то принято называть “Популярные статьи”, хотя популярность и комментируемость не всегда идут “рука об руку”. Этот виджет широко используют блоггеры, ведущие свои блоги на платформе WordPress, а вот на платформе Blogger мне этот виджет не попадался, за исключением виджета использующего YAHOO Pipes от BloggerBuster, но он, к сожалению, выводит в список URL, а не названия статей, что, как мне кажется, не вполне профессионально. Я попытался исправить этот дисбаланс.

Описание:

Виджет выводит список наиболее комментируемых статей в порядке убывания числа комментариев. Устанавливается одним “копи-пастом” (copy-paste). Минимальное количество настроек позволяет использовать виджет даже неискушенным в кодировании блоггерам ;-)

Установка:

Установка производится в три шага:

1. Зайдите в “Панель управления” вашего блога. Перейдите на закладку Макет-Элементы страницы.
2. Добавьте на панели гаджетов новый гаджет HTML/JavaScript. Дайте ему название (например: “Популярные статьи”). Вставьте код виджета.
3. Проведите настройку виджета. Сохраните виджет, а затем и сам макет.

Код виджета:
<!-- Most Commented Posts START --> <div id="mx-mcp"></div> <script> var maxList = 5; // Количество выводимых постов var commStr = "Комментариев"; // Комментариев, Comments - на выбор ;-) var baseUrl = "http://YOUR_BLOG_NAME_HERE.blogspot.com/"; //URL Вашего блога. Не забудьте об обратном слэше в конце var maxResults = 100; // Глубина сканирования var postsUrl = "feeds/posts/default?alt=json-in-script&callback=listPosts&max-results=" + maxResults; var commentsUrl = "feeds/comments/default?alt=json-in-script&callback=listCommentss&max-results=" + maxResults; function oPost(title, url, num) { this.title = title; this.url = url; this.num = num; } function doSrcMcp() { var container = document.getElementById("mx-mcp"); var srcP = document.createElement("script"); var srcC = document.createElement("script"); srcP.type = "text/javascript"; srcC.type = "text/javascript"; srcP.src = baseUrl + postsUrl; srcC.src = baseUrl + commentsUrl; container.appendChild(srcP); container.appendChild(srcC); } var aPosts = new Array(); var aComments = new Array(); function listPosts(root) { var feed = root.feed; var entries = feed.entry || []; for (var i = 0; i < entries.length; ++i) { var entry = entries[i]; var title = entry.title.$t; var url = ""; for (var j = 0; j < entry.link.length; j++) { if (entry.link[j].rel == 'alternate') url = entry.link[j].href; } aPosts.push(new oPost(title, url, 0)); } } function listComments(root) { var feed = root.feed; var entries = feed.entry || []; var maxNum = 0; for (var i = 0; i < entries.length; ++i) { var entry = entries[i]; var url = ""; for (var j = 0; j < entry.link.length; j++) { if (entry.link[j].rel == 'alternate') url = entry.link[j].href; } aComments.push(url); } for (var i = 0; i < aPosts.length; i++) { for (var j = 0; j < aComments.length; j++) { if (aComments[j].indexOf(aPosts[i].url) == 0) aPosts[i].num++; if (aPosts[i].num > maxNum) maxNum = aPosts[i].num; } } var container = document.getElementById("mx-mcp"); 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("Widget by ")); divFooter.appendChild(aFooter); var numList = 0; for (var i = maxNum; i > 0; i--){ for (var j = 0; j < aPosts.length; j++){ if (aPosts[j].num == i){ var br = document.createElement("br"); var a = document.createElement("a"); var div = document.createElement("div"); a.appendChild(document.createTextNode(aPosts[j].title)); a.href = aPosts[j].url; div.appendChild(document.createTextNode(" (" + commStr + ": " + aPosts[j].num + ")")); container.appendChild(a); container.appendChild(br); container.appendChild(div); numList++; } if (numList >= maxList) break; } if (numList >= maxList) break; } container.appendChild(divFooter); } doSrcMcp(); </script> <!-- Most Commented Posts END -->

Настройка:

1. 
   
   URL Вашего блога: var baseUrl = "http://YOUR_BLOG_NAME_HERE.blogspot.com/"; Вставьте URL ВАШЕГО блога. И не забывайте поставить обратный слэш в конце URL!
2. 
   
   По умолчание виджет выводит список из пяти позиций: var maxList = 5; измените это значение, если хотите выводить больше или меньше позиций.
3. 
   
   Количество комментариев к каждой позиции (статье) выводится строкой (Комментариев: Х): var commStr = "Комментариев";. Для локализации виджета измените этот параметр (например на значение Comments).

Update 08.01.2009: Добавлен параметер для настройки глубины сканирования - maxResults.

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

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

Виджет Most Related Posts (Очень похожие статьи) для Blogger

Некоторое время назад я опубликовал обзор виджета “Related Posts”. Виджет неплохой, но, как водится, не всё в нём меня устраивало. А именно:

• установка виджета требует серьёзных манипуляций с шаблоном темы и состоит из значительного числа шагов установки
• виджет выдает ссылки на статьи в список случайным образом, что, может быть, хорошо для блога типа “отовсюду обо всём”, но никак для тематического блога.
• некоторые недоработки в самом виджете

В общем, как говорится, “если хочешь, что бы всё было “как надо” – сделай сам”. Я решил последовать этому совету и, вот, что у меня получилось:

• виджет Most Related Posts базируется на библиотеке JSON от Google и, следовательно, расположен на одном из самых быстрых серверов в мире
• выдача ссылок в список осуществляется по индексу соответствия на базе меток (тегов, labels): чем больше совпадающих меток, тем выше индекс соответствия, тем выше ссылка в списке
• ссылка на текущую статью не выводится (не пользуйтесь кавычками в названиях постов – этот глюк RSS может привести к выдаче ссылки на текущую статью в список)
• виджет устанавливается “одним кликом” (copy-paste)

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

Скопируйте приведённый ниже код и вставьте его в шаблон темы непосредственно после кода <data:post.body/>. Если же Вы пользуетесь Fullpost, то после кода <data:post.body /> <b:if cond="data:blog.pageType != "item""> <a expr:href="data:post.url">Read more!</a> </b:if>

Код виджета:

<!-- Most Related Posts by minimusX START --> <div><b:if cond='data:blog.pageType == "item"'> <div class='widget-content'> <br/><br/><h3>Most Related Posts</h3> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type='text/javascript'> google.load("feeds", "1"); function initialize() { var aLabels = new Array(); var sLabel = ""; var postTitle = ""; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> sLabel = "<data:label.name/>"; aLabels.push(sLabel); </b:loop> postTitle = "<data:post.title/>" </b:loop> var num = 100; // глубина сканирования var maxList = 5; //максимальное количество постов в списке var feed = new google.feeds.Feed("YOUR_FEED_URL"); var maxRelIndex = 0; feed.setNumEntries(num); feed.load(function(result) { if (!result.error) { var aTitles = new Array(); var aHRefs = new Array(); var aRelIndex = new Array(); var relIndex = 0; var container = document.getElementById("mx-mrp"); var divFooter = document.createElement("div"); var aFooter = document.createElement("a"); var ul = document.createElement("ul"); divFooter.style.fontSize = "x-small"; aFooter.appendChild(document.createTextNode("minimusX")); aFooter.href = "http://minimusx.blogspot.com"; divFooter.appendChild(document.createTextNode("Most Related Posts Widget by ")); divFooter.appendChild(aFooter); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; relIndex = 0; if (entry.title != postTitle){ for (var j = 0; j < entry.categories.length; j++){ for (var k = 0; k < aLabels.length; k++){ if (entry.categories[j] == aLabels[k]){ relIndex++; } } } if (relIndex != 0){ aTitles.push(entry.title); aHRefs.push(entry.link); aRelIndex.push(relIndex); if (maxRelIndex < relIndex){ maxRelIndex = relIndex; } } } } var numList = 0; for (var i = maxRelIndex; i > 0; i--){ for (var j = 0; j < aRelIndex.length; j++){ if (aRelIndex[j] == i){ var br = document.createElement("br"); var a = document.createElement("a"); var il = document.createElement("il"); a.appendChild(document.createTextNode(aTitles[j])); a.href = aHRefs[j]; il.appendChild(a); ul.appendChild(il); ul.appendChild(br); numList++; } if (numList >= maxList){ break; } } if (numList >= maxList){ break; } } container.appendChild(ul); container.appendChild(divFooter); } }); } google.setOnLoadCallback(initialize); </script> <div id='mx-mrp'></div> </div> </b:if></div> <!-- Most Related Posts by minimusX END -->

Виджет настроен на сканирование последних 100 статей (var num = 100;) и вывода в список 5-ти ссылок (var maxList = 5;) на похожие статьи. Не забудьте изменить строку YOUR_FEED_URL на url feed’а Вашего блога.

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

Я играю в Blogowar.ru, чего и вам советую.

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

Подсветка кодов в блоге. Часть вторая.

Вернёмся к нашим баранам. Продолжим обзор инструментов для подсветки синтаксиса исходных кодов начатый в предыдущей статье.

Google Code Prettifier

Google Code Prettifier – простой и лёгкий инструмент. Поддерживает C (C, C++, C#), Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, и Make-файлы.

• Не тормозит загрузку страницы.
• Работает на любых платформах.
• Возможно использование встроенных ссылок (в строках комментариев)
• Возможна нумерация строк
• Возможно изменение цветовой схемы (изменить CSS-файл)

Скриншот:

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

Вставьте показанный ниже код в секцию head (например перед закрывающим тегом).

<link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script>

Измените открывающий тег body следующим образом:

<body onload="prettyPrint()>

Для подсветки кода используйте теги <pre class="prettyprint">...</pre> или <code class="prettyprint">...</code>.

Для конкретизации языка подсвечиваемого кода измените значение параметра class с “prettyprint” на “prettyprint lang-спецификатор” (например “prettyprint lang-html”).

Вот перечень доступных спецификаторов: "c", "cc", "cpp", "cs", "cyc", "java", "bsh", "csh", "sh", "cv", "py", "perl", "pl", "pm", "rb", "js", "html", "xhtml", "xml", "xsl".

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

<pre class=prettyprint> <span class="nocode">1:</span> /* This is line 1 of my code <span class="nocode">2:</span> * and here's line 2 */ <span class="nocode">3:</span> print("I'm line number 3"); </pre>

Syntaxhighlighter

Syntaxhighlighter – мой любимый инструмент, именно им я и пользуюсь. Кроме отличной подсветки и встроенной нумерации этот инструмент так же имеет меню, позволяющее вывести код в отдельном окне в виде простого текста или скопировать его в буфер обмена, что очень удобно для посетителей блога. Инструмент мультиплатформенный – может работать в любых блогах, поддерживающих JavaScript и не только в блогах. Кроме того, имеется дополнение SyntaxHighlighter для Windows Live Writer, позволяющее строить конструкции для Syntaxhighlighter не имеея соответствующих навыков.

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

Вставьте приведённый ниже код в конец секции body (перед закрывающим тегом):

<link href='SyntaxHighlighter.css' rel='stylesheet' type='text/css'/> <script src='shCore.js' type='text/javascript'/> <script src='shBrushCss.js' type='text/javascript'/> <script src='shBrushJava.js' type='text/javascript'/> <script src='shBrushJScript.js' type='text/javascript'/> <script src='shBrushXml.js' type='text/javascript'/> <script class='javascript'> //<![CDATA[ function FindTagsByName(container, name, Tag) { var elements = document.getElementsByTagName(Tag); for (var i = 0; i < elements.length; i++) { if (elements[i].getAttribute("name") == name) { container.push(elements[i]); } } } var elements = []; FindTagsByName(elements, "code", "pre"); FindTagsByName(elements, "code", "textarea"); for(var i=0; i < elements.length; i++) { if(elements[i].nodeName.toUpperCase() == "TEXTAREA") { var childNode = elements[i].childNodes[0]; var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'')); elements[i].replaceChild(newNode, childNode); } else if(elements[i].nodeName.toUpperCase() == "PRE") { brs = elements[i].getElementsByTagName("br"); for(var j = 0, brLength = brs.length; j < brLength; j++) { var newNode = document.createTextNode(""); elements[i].replaceChild(newNode, brs[0]); } } } //clipboard does not work well with <pre> tags, no line breaks dp.SyntaxHighlighter.ClipboardSwf = "http://rublezoid.googlepages.com/clipboard.swf"; dp.SyntaxHighlighter.HighlightAll("code"); //]]> </script>

Для подсветки кода используйте конструкцию
<pre name="code" class="c-sharp">...</pre> или
<textarea name="code" class="c#" cols="60" rows="10">...</textarea>

Параметер name должен обязательно иметь значение “code”, а параметер class должен иметь значение из таблицы “поддерживаемых языков”.

Поддерживаемые языки:

Язык	Псевдонимы (значение параметра class)
C++	cpp, c, c++
C#	c#, c-sharp, csharp
CSS	css
Delphi	delphi, pascal
Java	java
Java Script	js, jscript, javascript
PHP	php
Python	py, python
Ruby	rb, ruby, rails, ror
Sql	sql
VB	vb, vb.net
XML/HTML	xml, html, xhtml, xslt

Я пользуюсь конструкцией (тегами) textarea, т.к. небольшой глюк библиотеки не позволяет использовать меню “копирования в буфер обмена” с тегами pre (пропадают переносы строки).

Внимание! Во всех приведённых примерах объявления внешних файлов приведены без учёта реального расположения оных в сети! Это значит, что в реальных условиях необходимо указывать реальное размещение внешних файлов. Например для файлов prettify, в привязке к моему блогу, необходимо произвести следующие изменения:

<link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script> //заменить на <link href="http://rublezoid.googlepages.com/prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="http://rublezoid.googlepages.com/prettify.js"></script>

Послесловие

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

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

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

Подсветка кодов в блоге. Часть первая.

Подсветка синтаксиса исходного кода в блоге на сегодняшний день уже не роскошь, а признак хорошего тона. Действительно, подсвеченный синтаксис не только смотрится респектабельней по сравнению с неподсвеченным, но и существенно лучше читается и поддается анализу. Разумеется “спрос рождает предложение”. Инструментов в этой области уже придумано немало и именно об этих инструментах моя очередная статья.

Инструментарий используемый для подсветки синтаксиса исходных кодов можно разделить на две категории (по способу обработки) – на статические и динамические.

• Статические – обработка (подсветка) синтаксиса кода происходит на этапе написания статьи и не требует каких-либо специальных обработчиков. В качестве плюсов этой группы инструментов хотелось бы отметить быструю загрузку статьи посетителем и стабильность отображения. К минусам – невозможность правки подсветки всех опубликованных кодов исправлением в одном месте (в обработчике), существенное увеличение объёма исходного кода статьи и неудобство правки самого публикуемого кода.
• Динамические – обработка (подсветка) синтаксиса кода производится обработчиком при загрузке страницы статьи пользователем (посетителем). Плюсы: возможность поменять правила подсветки кода с помощью небольших изменений как в коде обработчика, так и в коде статьи, более лёгкая правка самого публикуемого кода и достаточно компактный код статьи, а так же возможность добавления дополнительных сервисов для посетителей. Минусы: большее время загрузки страницы статьи за счет загрузки софта обработчика.

Перейдём к конкретным инструментам.

Статические

Среди статических инструментов чаще всего встречаются add-on’s и plug-in’s для блог-клиентов, как встроенные, так и подгружаемые. Поскольку я, в некотором роде, являюсь поклонником Windows Live Writer, то, в качестве примера, приведу несколько дополнений для WLW. 

Code Snippet plugin for Windows Live Writer – вставка и подсветка синтаксиса исходного кода.

Insert Source Code Snippet – вставка и подсветка кода из буфера обмена, скопированного из Visual Studio или какого либо другого инструмента разработчика.

Кроме дополнений к блог-клиентам существуют сетевые сервисы, которые позволяют сделать то-же самое не устанавливая дополнения. Это удобно для тех, кто не пользуется блог-клиентами для написания статей. Вот типичный пример:

Source Code Highlighter – выдаёт подсвеченный код в HTML-коде.

Динамические

highlight.js - подсветка синтаксиса в примерах кода в блогах, форумах и вообще на любых веб-страницах. Пользоваться им очень просто, потому что работает он автоматически: сам находит блоки кода, сам определяет язык, сам подсвечивает.

Скриншот:

Поддерживается подсветка следующих языков:

• Python
• Ruby
• Perl
• PHP
• XML
• HTML
• CSS
• Django
• Javascript
• VBScript
• Delphi
• Java
• C++
• Lisp
• RenderMan (RSL и RIB)
• Maya Embedded Language
• SQL
• SmallTalk
• Axapta
• 1С
• Ini
• Diff
• DOS .bat
• Bash

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

WordPress – для установки highlight.js в WordPress в комплекте поставки есть соответствующий плагин.

Для установки плагина надо скопировать всю директорию с файлами highlight.js в директорию плагинов WordPress. После этого в панели плагинов его можно будет включать и отключать. В меню Options также добавляется страничка highlight.js, где можно настраивать список языков и CSS-стили.

Blogger – для установки highlight.js в Blogger (XML тема) необходимо вставить следующий код, где-нибудь в районе закрывающего тега body (перед тегом).

<script type="text/javascript" src="highlight.js"></script> <script type="text/javascript"> hljs.initHighlightingOnLoad(); </script>

Для уменьшения времени загрузки можно ограничить автоопределение языков списком используемых языков:

<script type="text/javascript" src="highlight.js"></script> <script type="text/javascript"> hljs.initHighlightingOnLoad('html', 'css'); </script>

Полный список классов для разных языков приведен в readme.rus.txt.

Для определения цветов подсветки используйте следующий код:

<style> .comment { color: gray; } .keyword { font-weight: bold; } .python .string { color: blue; } .html .atribute .value { color: green; } </style>

разместите его перед закрывающим тегом head.

Использование

В тексте статьи для подсветки синтаксиса исходного кода используйте следующую конструкцию:

<pre><code>...</code></pre>

для принудительного использования подсветки конкретного языка или для отказа от подсветки используйте параметр class тега code:

<pre><code class="html">...</code></pre>

<pre><code class="no-highlight">...</code></pre>

P.S. Продолжение следует. У меня есть в запасе ещё пара неплохих прибомбасов на эту тему.

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

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

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

Виджет “Динамическая страница содержания” (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. При копировании и републикации статьи ссылка на первоисточник обязательна.

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

Форма отправки комментариев на странице поста в Blogger

В настоящее время Blogger разрабатывает форму отправки комментариев, которую можно будет размещать на странице поста. Многие блоггеры очень ждут когда настанет этот момент. Однако уже сейчас существует возможность установить такую форму в свой блог, используя Blogger in Draft.

Для того чтобы установить встроенную форму отправки комментариев, Вы должны зайти в панель управления Вашим блогом через Черновик Blogger.

На странице Настройки > Комментарии установите “Размещение формы для ввода комментариев” как показано ниже:

Сохраните настройки.

Вариант 1:

Перейдите на страницу Макет > Изменить HTML. Установите флажок “Расширить шаблоны виджета” и найдите в тексте HTML следующий код:

<p class='comment-footer'><br /> <b:if cond='data:post.allowComments'><br /> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a><br /> </b:if><br /> </p>

Замените его следующим кодом:

<p class='comment-footer'> <br /> <b:if cond='data:post.embedCommentForm'> <br /> <b:include data='post' name='comment-form'/> <br /> <b:else/> <br /> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> <br /> </b:if> <br /> </b:if> <br /> </p>

К сожалению не все шаблоны поддерживают этот вариант размещения формы отправки комментариев.

Вариант 2:

Всё тоже самое. Перейдите на страницу Макет > Изменить HTML. Установите флажок “Расширить шаблоны виджета” и найдите в тексте HTML следующий код:

<b:include data='post' name='comments' />

Сразу же после этой строки кода вставьте следующую строку:

<b:include data='post' name='comment-form'/>

Этот вариант должен работать со всеми шаблонами.

В результате манипуляций по варианту 1 или варианту 2 на страницах постов должна появиться следующая форма:

Если что-то “не сложилось”, убедитесь, что в настройках действительно стоит  “Размещение формы для ввода комментариев” – “Вложенное ниже сообщение”. Если совсем ничего не получается, пишите – разберёмся.

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

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

iTheme-Techno. Серия XML тем для Blogger

Шаблон темы iTheme Techno для Blogger выполнен в стиле интерфейса Mac OS, с перемещаемыми панелями виджетов (именно в этой теме впервые была применена технология плавающих панелей для Blogger) и мини иконками. Оригинальная тема разработана Nick La.

Скачивая и используя этот шаблон темы, Вы соглашаетесь со следующими условиями использования:

• Вы НЕ МОЖЕТЕ продавать или перепродавать этот шаблон
• Линки на N.Design Studio , Magznetwork и minimusX расположенные внизу шаблона ДОЛЖНЫ оставаться на месте (модифицированные или немодифицированные)
• Вы МОЖЕТЕ использовать этот шаблон как в личных, так и в коммерческих проектах
• Вы МОЖЕТЕ изменять, переводить и распространять этот шаблон темы

Для того чтобы при установке темы не возникло каких-либо проблем, внимательно ознакомьтесь с инструкцией по установке.

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

1. Скачайте и распакуйте zip файл.
2. Закачайте все изображения на ваш аккаунт GooglePages или на какой-либо фото-хостинг.
3. Если закачали на GooglePages замените все встречающиеся в коде XML url http://YOURGOOGLEPAGES.googlepages.com на имя Вашего аккаунта. В противном случае - на фактические url изображений.
4. Зайдите в Панель управления Blogger.
5. Перейдите в Макет > Изменить HTML.
6. Загрузите XML-файл шаблона (ни в коем случае не используйте Copy-Paste)
7. Сохраните но НЕ ПРОСМАТРИВАЙТЕ, перейдите в Макет > Элементы страницы.
8. Измените элемент (виджет) Top Menu. Добавьте хотя бы один элемент, например линк на главную страницу Вашего блога.
9. Измените элемент (виджет) Свежие Статьи – измените RSS канал на канал Вашего блога.
10. Измените элемент (виджет) Свежие Комментарии – измените RSS канал комментариев на канал комментариев Вашего блога.
11. Сохраните изменения и перейдите в Настройки > Форматирование. Выберите Формат отметки времени вида День недели-Месяц-Число-Год. Это необходимо для правильного отображения даты в иконке даты статьи.
12. Сохраните изменения. Можно смотреть полученный результат.

ЧАВО

Почему в иконке даты пишется Undefined?
Смотрите пункт 11 инструкции по установке. Перейдите в Настройки > Форматирование. Выберите Формат отметки времени вида День недели-Месяц-Число-Год.

У меня нет времени на поиск хостинга для картинок. Чем Вы можете мне помочь?
Замените все встречающиеся в коде XML url http://YOURGOOGLEPAGES.googlepages.com на http://rublezoid.googlepages.com Там есть все необходимые изображения, но в этом случае Вы будете зависеть от моего желания поддерживать хранение этих изображений на сервере.

Скачать

iTheme-Techno 2 колонки (01)

Скачать iTheme-Techno (01)

1. Русифицированная, 2 колонки, колонка виджетов справа
2. Расширенная (FullPost), русифицированная, 2 колонки, колонка виджетов справа

iTheme-Techno 2 колонки (10)

Скачать iTheme-Techno (10)

1. Русифицированная, 2 колонки, колонка виджетов слева
2. Расширенная (FullPost), русифицированная, 2 колонки, колонка виджетов слева

iTheme-Techno 3 колонки (011)

Скачать iTheme-Techno (011)

1. Русифицированная, 3 колонки, обе колонки виджетов справа
2. Расширенная (FullPost), русифицированная, 3 колонки, обе колонки виджетов справа

iTheme-Techno 3 колонки (101)

Скачать iTheme-Techno (101)

1. Русифицированная, 3 колонки, одна колонка виджетов слева, другая - справа
2. Расширенная (FullPost), русифицированная, 3 колонки, одна колонка виджетов слева, другая - справа

iTheme-Techno 3 колонки (110)

Скачать iTheme-Techno 3 колонки (110)

1. Русифицированная, 3 колонки, обе колонки виджетов слева
2. Расширенная (FullPost), русифицированная, 3 колонки, обе колонки виджетов слева

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

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

Виджет “Облако тегов” для Blogger’а

Практически все блоггеры, использующие платформу WordPress, включают виджет “Облако тегов” в оформление своих блогов. В Blogger’е такого виджета нет. Несправедливо? Несправедливо. Попробуем устранить эту несправедливость …

Этот виджет можно использовать только в “новом стиле” Blogger (XML), в “старом стиле” Blogger виджет работать не будет. Кроме того, виджет имеет один, как мне кажется, некритичный баг, а именно, для корректной работы виджета требуется наличие хотя бы двух статей в блоге имеющих один тег.

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

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

Код виджета состоит из трёх частей. Предстоит внести изменения в секции определения стилей и конфигурации, а также заменить код уже существующего виджета “Labels”. Если виджет “Labels” не стоит в макете Вашего блога, его необходимо добавить до начала внесения изменений.

Для внесения первой части кода в шаблон темы, в секцию определения стилей, необходимо найти в тексте шаблона следующий код:

]]></b:skin>

и вставить нижеследующий код выше найденного кода.

/* Label Cloud Styles <br /> ----------------------------------------------- */ <br /> #labelCloud {text-align:center;font-family:arial,sans-serif;} <br /> #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;} <br /> #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;} <br /> #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0} <br /> #labelCloud a{text-decoration:none} <br /> #labelCloud a:hover{text-decoration:underline} <br /> #labelCloud li a{} <br /> #labelCloud .label-cloud {} <br /> #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000} <br /> #labelCloud .label-cloud li:before{content:"" !important}

Следующая часть кода виджета должна располагаться в секции конфигурации. Проще всего разместить его там – это вставить нижеследующую часть кода после строки ]]></b:skin>, но до тага </head>

<script type='text/javascript'> <br /> // Label Cloud User Variables <br /> var cloudMin = 1; <br /> var maxFontSize = 20; <br /> var maxColor = [0,0,255]; <br /> var minFontSize = 10; <br /> var minColor = [0,0,0]; <br /> var lcShowCount = false; <br /> </script>

Третья часть работы состоит в замене самого виджета “Label”. Спуститись вниз по тексту шаблона темы и найдите код, который должен выглядеть приблизительно так:

<b:widget id='Label1' locked='false' title='Метки' type='Label'> <b:includable id='main'>   <b:if cond='data:title'>     <h2><data:title/></h2>   </b:if>   <div class='widget-content'>     <ul>     <b:loop values='data:labels' var='label'>       <li>         <b:if cond='data:blog.url == data:label.url'>           <span expr:dir='data:blog.languageDirection'>             <data:label.name/>           </span>         <b:else/>           <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>             <data:label.name/>           </a>         </b:if>         <span dir='ltr'>(<data:label.count/>)</span>       </li>     </b:loop>     </ul>     <b:include name='quickedit'/>   </div> </b:includable> </b:widget>

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

<b:widget id='Label1' locked='false' title='Облако тегов' type='Label'><br /> <b:includable id='main'><br /> <b:if cond='data:title'><br /> <h2><br /> <data:title></data></h2><br /> </b:if><br /> <div class='widget-content'><br /> <div id='labelCloud'></div><br /> <script type='text/javascript'><br /> // Don't change anything past this point -----------------<br /> // Cloud function s() ripped from del.icio.us<br /> function s(a,b,i,x){<br /> if(a>b){<br /> var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)<br /> }<br /> else{<br /> var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)<br /> }<br /> return v<br /> }<br /> var c=[];<br /> var labelCount = new Array(); <br /> var ts = new Object;<br /> <b:loop values='data:labels' var='label'><br /> var theName = "<data:label.name></data>";<br /> ts[theName] = <data:label.count></data>;<br /> </b:loop><br /> for (t in ts){<br /> if (!labelCount[ts[t]]){<br /> labelCount[ts[t]] = new Array(ts[t])<br /> }<br /> }<br /> var ta=cloudMin-1;<br /> tz = labelCount.length - cloudMin;<br /> lc2 = document.getElementById('labelCloud');<br /> ul = document.createElement('ul');<br /> ul.className = 'label-cloud';<br /> for(var t in ts){<br /> if(ts[t] < cloudMin){<br /> continue;<br /> }<br /> for (var i=0;3 > i;i++) {<br /> c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)<br /> } <br /> var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);<br /> li = document.createElement('li');<br /> li.style.fontSize = fs+'px';<br /> li.style.lineHeight = '1';<br /> a = document.createElement('a');<br /> a.title = ts[t]+' Posts in '+t;<br /> a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';<br /> a.href = '/search/label/'+encodeURIComponent(t);<br /> if (lcShowCount){<br /> span = document.createElement('span');<br /> span.innerHTML = '('+ts[t]+') ';<br /> span.className = 'label-count';<br /> a.appendChild(document.createTextNode(t));<br /> li.appendChild(a);<br /> li.appendChild(span);<br /> }<br /> else {<br /> a.appendChild(document.createTextNode(t));<br /> li.appendChild(a);<br /> }<br /> ul.appendChild(li);<br /> abnk = document.createTextNode(' ');<br /> ul.appendChild(abnk);<br /> }<br /> lc2.appendChild(ul); <br /> </script><br /> <noscript><br /> <ul><b:loop values='data:labels' var='label'><br /> <li><br /> <b:if cond='data:blog.url == data:label.url'><br /> <data:label.name></data><br /> <b:else></b><br /> <a expr:href='data:label.url'><data:label.name></data></a><br /> </b:if><br /> (<data:label.count></data>)<br /> </li><br /> </b:loop> </ul><br /> </noscript><br /> <b:include name='quickedit'></b><br /> </div><br /> </b:includable><br /> </b:widget> <br /> </b:widget>

Теперь сохраняем шаблон темы и наблюдаем результат. Если Blogger выдает сообщение об ошибке, значит что-то сделано не так. В этом случае необходимо отменить изменения и все шаги повторить заново и более аккуратно. Если просто ничего не показывает, убедитесь, что хотя бы один тег есть у нескольких статей (минимум у двух). Кроме того, убедитесь, что теги не содержат двойных кавычек – это может нарушить работу виджета. Апострофы и одиночные кавычки можно использовать без ограничений.

Ручная настройка внешнего вида виджета

Изменяя значения переменных в секции настройки, можно изменить внешний вид виджета.

var cloudMin= 1;

Количество статей для отображаемого тега. Изменяя эту переменную можно уменьшить количество тегов выводимых в облаке. Например установка значения 3 приведёт к тому, что в облако будут выводиться только те теги, для которых есть три статьи и более.

<br /> var maxFontSize = 20; <br /> var maxColor = [0,0,255]; <br /> var minFontSize = 10; <br /> var minColor = [0,0,0];

Этот блок определяет максимальное и минимальное значение для размера шрифта в облаке и крайние значения градации цвета для него в формате RGB.

var lcShowCount = false;

Значение False (по умолчанию) – теги выводятся без количества статей. True – возле каждого тега будет выведено количество статей на которые он ссылается.

При желании освежить облако тегов можно поэкспериментировать со значением text-align в секции определения стилей. Text-align может принимать следующие значения:

text-align:justify;
text-align:right;
text-align:left;

В строке определения стилей

#labelCloud  .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}

можно изменить display:inline; на display:block; что бы отображать каждый тег на отдельной строке.

И последнее. Если вы установили значение переменной lcShowCount в значение true, вы можете изменить параметры вывода счётчиков изменив стиль #labelCloud .label-count.

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

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