среда, 7 января 2009 г.

Технический вопрос - создание облака тегов («ярлыков ») в Blogger

Текст для этой статьи взят отсюда:
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. Сохраните изменения в шаблоне и проверьте результат.

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

9 комментариев:

  1. Похоже опять без напильника не обойтись... Блог ругается: The content of elements must consist of well-formed character data or markup.

    Что может быть не так???

    ОтветитьУдалить
  2. Ирис, если ругается, надо вернуть все как было и попробовать еще раз.

    Задача: вставить в блог три текстовых блока (см. выше)

    В итоге должна получится вот такая конструкция:
    [блок 1]
    ]]></b:skin>
    [блок 2]
    </head>

    И еще одна конструкция - где вместо строки
    <b:widget id='Label1' locked='false' title='Labels' type='Label'/>
    - мы вставляем [блок 3]

    ОтветитьУдалить
  3. Я проделала процедуру трижды. Так что ошибки с моей стороны быть не должно.

    Правда в последней строке у меня вместо title='Labels' стоит title='Ярлык'

    но это, по идее не должно оказывать влияния?

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

    ОтветитьУдалить
  5. Ругается только на скрипт!

    ОтветитьУдалить
  6. Хмм. Ты точно вставляешь скрипт на следующей строке после
    </b:skin>
    ?

    После этого блока идет строка
    </head>
    ?

    Я еще раз скопировал скрипт прямо из своего блога. Попробуй еще раз вставить скрипт.

    ОтветитьУдалить
  7. И еще, нет ли пустых строк между /bskin - блоком - /head?

    ОтветитьУдалить
  8. Блог ругается только на кусочек, заключенный между тэгами script\script.

    Со всеми остальными блоками конфликтов нет.

    ОтветитьУдалить
  9. Ирис, блог тоже не всегда прав (улыбка). Движок блога очень тяжелый и часто глючит буквально на пустом месте. У меня нет доверия к тем ошибкам, которые он выдает.

    На самом деле ошибка может быть где угодно. Например, из-за одного лишнего абзаца. У меня в моем блоге такое уже было. Поэтому в обязательном порядке проверь все, что я указал выше.

    ОтветитьУдалить