http://way-blogger.blogspot.com/2008/05/tag-cloud-blogger.html
В Blogger теги называются «Ярлыками», которые можно установить для всех ваших сообщений. Чтобы добавить ярлыки на сайт, требуется добавить новый элемент страницы в шаблон. Тип элемента выбрать «Ярлыки». К сожалению, по умолчанию перечень тегов сложно назвать полноценным облаком, это больше смахивает на обычный список ярлыков, которые можно отсортировать по алфавиту или частоте использования. Для достижения классического вида облака требуется произвести некоторые модификации в шаблоне.
Внимание! Перед внесением любых изменений настоятельно рекомендуется сделать копию вашего шаблона блога и сохранить в файле на локальном компьютере. Для этого зайдите на страницу
Настройки->Макет->Изменить HTML
и кликните по ссылке "Загрузить весь шаблон".
Замечание: для того, чтобы в ваш блог можно было добавить облако тегов, необходимо, чтобы в блоге присутствовал блок «Ярлыки» и притом только один.
Алгоритм:
1. Зайдите в Настройки->Макет->Изменить HTML
2. Найдите место в шаблоне
]]></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}
3. Снова найдите в шаблоне
]]></b:skin>
ниже этого тега, но перед закрывающим тегом
</head>
вставьте код:
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 21;
var maxColor = [79,148,205];
var minFontSize = 11;
var minColor = [180,205,205];
var lcShowCount = false;
</script>
Все строки могут быть изменены, но объясним их значение позже. Пока для нас важно, чтобы заработали эти настройки по умолчанию.
4. Найдите в шаблоне место
<b:widget id='Label1' locked='false' title='Labels' type='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'>
<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>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] < cloudMin){
continue;
}
for (var i=0;3 > 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>
5. Сохраните изменения в шаблоне и проверьте результат.
Если что-то не работает, то значит где-то допущена ошибка. Поэтому нужно проделать всю процедуру заново очень внимательно.
Похоже опять без напильника не обойтись... Блог ругается: The content of elements must consist of well-formed character data or markup.
ОтветитьУдалитьЧто может быть не так???
Ирис, если ругается, надо вернуть все как было и попробовать еще раз.
ОтветитьУдалитьЗадача: вставить в блог три текстовых блока (см. выше)
В итоге должна получится вот такая конструкция:
[блок 1]
]]></b:skin>
[блок 2]
</head>
И еще одна конструкция - где вместо строки
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
- мы вставляем [блок 3]
Я проделала процедуру трижды. Так что ошибки с моей стороны быть не должно.
ОтветитьУдалитьПравда в последней строке у меня вместо title='Labels' стоит title='Ярлык'
но это, по идее не должно оказывать влияния?
Ирис, попробуй производить действия не все сразу, а по частям. И сохранять шаблон после каждого сделанного шага. Так мы по крайней мере узнаем, на каком шаге происходит ошибка.
ОтветитьУдалитьРугается только на скрипт!
ОтветитьУдалитьХмм. Ты точно вставляешь скрипт на следующей строке после
ОтветитьУдалить</b:skin>
?
После этого блока идет строка
</head>
?
Я еще раз скопировал скрипт прямо из своего блога. Попробуй еще раз вставить скрипт.
И еще, нет ли пустых строк между /bskin - блоком - /head?
ОтветитьУдалитьБлог ругается только на кусочек, заключенный между тэгами script\script.
ОтветитьУдалитьСо всеми остальными блоками конфликтов нет.
Ирис, блог тоже не всегда прав (улыбка). Движок блога очень тяжелый и часто глючит буквально на пустом месте. У меня нет доверия к тем ошибкам, которые он выдает.
ОтветитьУдалитьНа самом деле ошибка может быть где угодно. Например, из-за одного лишнего абзаца. У меня в моем блоге такое уже было. Поэтому в обязательном порядке проверь все, что я указал выше.