b-cumulus - наш ответ Чемберлену

Разбираясь с tagcloud Роя Танка, я заметил, что несколько весьма интересных возможностей этого flash-приложения, в виджете Blogumus не используются. Я задался целью исправить это недоразумение и осуществил задуманное. Результат - мой новый виджет b-cumulus.
О возможностях нового виджета можно прочитать в моём новом блоге, там же можно скачать всё необходимое для его работы. Блог ещё в работе - идет перенос статей с этого блога, да и просто обустройство. Однако, мне хотелось-бы, чтобы базовым блогом для нового виджета был именно мой новый блог.
Пользуясь случаем, хочу ответить на заданный мне вопрос по поводу того, что именно я изменил в tagcloud.swf. По большому счёту ничего особенного. Как все англо-саксы Рой Танк забыл сделать encode исходящей ссылки, хотя декодирование на входе он делает. Меня это не очень удивило. Удивило меня то, что он заявляет, будто-бы виджет выдаёт encoded links. В общем, глюк исправлен, тестирование шло вяло, но всё же шло и результат можно считать положительным. Скачать исправленную версию можно здесь.

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

Blogumus: Тестирование локализованной версии

К сожалению, локализованная версия Blogumus , собранная "с миру по нитке", работала не должным образом. Поступало много нареканий по поводу работы виджета в семействе ОС Microsoft Windows. Пришлось браться за дело своими руками. Вроде всё срослось!

Огромная просьба ко всем читателям блога!!!

Проверьте работоспособность виджета Blogumus (Flash облако тегов) из своих броузеров, особенно пользователи UNIX-подобных ОС !!!

Пожалуйста оформите результаты тестирования в виде комментария к этому посту!!!

На сегодняшний день виджет протестирован в следующих броузерах:
Microsoft Windows Vista

• Microsoft Intenet Explorer v.7 - Ok
• Mozilla FireFox v. 3.0.5 - Ok
• Opera 10 alpha - Ok
• Google Chrome - Ok

Способ тестирования:
Кликните по русским тегам в виджете и убедитесь в положительном результате. Желательно выбрать один однословный тег и один многословный.

Заранее благодарен всем, кто примет участие в тестировании.

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

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. При копировании и републикации статьи ссылка на первоисточник обязательна.

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

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

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