воскресенье, 18 января 2009 г.

Облако тегов для Blogger

tag cloudОдна из недоработок виджетов Blogger -- отсутствие виджета для Облака Тегов (Tag Cloud). В отличие от прочих решений для Облака Тегов, данное решение работает.

1. Сделайте резервную копию шаблона Blogger.

2. У вас уже должно быть несколько сообщений с тегами (ярлыками). Добавьте элемент Ярлыки на странице Макет - Элементы страницы.

3. Добавьте стили CSS для отображения тегов. На странице Макет - Изменить HTML сразу перед закрывающим тегом ]]></b:skin>.
/* Label Cloud Styles */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}


4. Вставьте следующий код сразу после ]]></b:skin>, но перед тегом </head>.
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [122,109,85];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>


5. Сохраните шаблон.

6. Включите опцию расширить шаблоны виджета и найдите примерно такую строчку: <b:widget id='Label1' locked='false' title='Labels' type='Label'/>

7. Удалите все строки между <b:widget id='Label1' locked='false' title='Labels' type='Label'/> и следующим тегом </b:widget>

8. Вставьте следующий код вместо удаленного.
<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'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a &gt; b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>


6. Сохраните шаблон

Если все сделали правильно, то ваш виджет «Ярлыки» будет заменен «Облаком тегов».

Настройки виджета:
var cloudMin = 1; // количество отображаемых тегов. Если 1, то все.
var maxFontSize = 20; // максимальный размер шрифта
var maxColor = [122,109,85]; // максимальный цвет
var minFontSize = 10; // минимальный размер шрифта
var minColor = [0,0,0]; // минимальный цвет
var lcShowCount = false; // показывать/не показывать количество записей с тегом. false - не показывать.



Обновлено: Решение для ошибки с сохранением XML нашел блоггер 256, за что ему и спасибо.

Проблема заключалась в знаках «больше», «меньше». Коды в этой статье уже исправлены.


Облако тегов от Blogger


14 Комментариев :

ktyz комментирует...

И русский без проблем?

Croaker комментирует...

Русский переваривает без проблем. Во всяком случае -- не более тех, что и в стандартном виджете Blogger.

256 комментирует...

Какой раз уже пробую, всё время выскакивает такая ошибка:

Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
Сообщение об ошибке в XML: The content of elements must consist of well-formed character data or markup.

Делаю всё по

Croaker комментирует...

Обычно при такого рода ошибках Блоггер вежливо подсвечивает «проблемный» код. Вот этот самый код нелишне было бы узнать.

Кстати, это хорошо известный баг движка Блоггер. Дело в том, что хотя Blogger и заточен под использование стандарта XHTML, его порой совершенно необъяснимым образом сташнивает на закрытых тегах вида <tag-blah-blah-blah />. Никак, какая-то космическая аномалия :).

В данном случае помогает /клизма/ закрытие тега в стиле HTML:
<tag-blah-blah-blah></tag-blah-blah-blah>

256 комментирует...

Перерыл всю выдачу гугла по этой теме, у кого как написано, то первый код вставлять до ]]>б:скин , у других между ]]> и б:скин, у третьих после ]]>б:скин, но ни в одном случае у меня не работает. Теги закрыты все, пробовал заменить как вы посоветовали, но результат тот же, если не сложно, посмотрите код моего шаблона http://blogger.kto-ya.by.ru/index.txt

Croaker комментирует...

Пардон, в текст закралась опечатка (уже исправил):
Стили CSS добавляются перед закрывающим тегом ]]></b:skin>.
Довольно просто запомнить: стили ПЕРЕД ]]></b:skin>, а javascript – сразу ПОСЛЕ него.

256 комментирует...

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

Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
Сообщение об ошибке в XML: The content of elements must consist of well-formed character data or markup.

И к сожалению проблемный код он не подсвечивает.

256 комментирует...

Нашёл разгадку на одном из блогов, нужно было заменить некоторые символы: > на > и " на " и < на < и всё сохранилось и заработало.

Croaker комментирует...

Спасибо за подсказку. Исправил исходное сообщение.

Ckazochnik комментирует...

Теперь в моем блоге красивое облако. *_*

Anton Vurdaft комментирует...

ребят, не подскажете как сделать чтобы показывались рандомные теги, а не все? всех уж больно много...

Anton Vurdaft комментирует...

p.s. настройка var cloudMin = к примеру 20 не помогает, всё равно выводит не 20, а все теги...

Ly4ik комментирует...

С ума схожу уже!Хоть башкой бейся об стол!
А нельзя ли уточнить, где это нужно конкретно и что изменить для новичка????
"Нашёл разгадку на одном из блогов, нужно было заменить некоторые символы: > на > и " на " и < на < и всё сохранилось и заработало."
А то у меня тоже последняя часть не сохраняется и выдает ошибку!

Croaker комментирует...

Ly4ik, уже можно не мучиться — в Blogger добавлен «родной» гаджет Облако тегов. Нет смысла использовать сторонние «костыли».

Отправить комментарий

Жги!