Ознакомиться с предложением по сертификации и аттестации на сайте http//jurists.moscow - дистанционное обучение.

Недавно на основании всех этих полезностей я сменил дизайн. Сделал это потому что этот блог был первый и пробный - я вообще про всякие CSS HTML JavaScript ничего не знал, но мне очень хотелость чего-нибудь эдакого. Приглашаю посетить мой новый блог там будет много о чём поговорить. Ну а в этом будут советы, советы, советы в помощь блоггеру как и задумывалось!

четверг, 14 июня 2007 г.

Создаём облако тегов ( teg clouds)

В этом посте я бы хотел затронуть такие вещи как установка и настройка кода такого известного понятия как облако тегов.

Для начала скажу чтобы корректно код заработал необходимо:
1. Залить себе на комп ваш код шаблона во избежании тяжких последствий и на всякий случай, а то мало ли, потом мне голову оторвёте :)
2. У вас уже должны быть парочка постов с тегами или ярлыками, мне удобнее называть тегами. Как минимум одним тегом, но в двух разных постах.

Поехали.
Установка кода займёт три шага.
Во первых вам нужно добавить элемент ЯРЛЫКИ и поместите его туда куда вы хотите установить облако тегов.

Первым шагом будет добавление кода в CSS сразу перед ]]></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}


Следующий код нужно поместить после ]]></b:skin> но перед тегом </head>:


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


Время пришло поморочиться с самим виджетом тегов. Пролистайте ваш код и найдите приблизительно такую строчку:

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

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

<b:widget id='Label1' locked='false' title='Label Cloud' 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>


Теперь сохраняемся. Можете любоваться облаком.
Если что-то пошло не так, значит вы что-то не так сделали.

О настройках

var cloudMin= 1; регулирует количество показываемых тегов, если 1 значит все.

var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
регулируем цвета и размеры шрифта.

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

Анонимный комментирует...

Ай спасибо !
Классный пост!

T@nia комментирует...

я могу найти только строчку <b:widget id=\'Label1\' locked=\'false\' title=\'Темы\' type=\'Label\'>

в итоге когда далее пытаюсь поменять строчку за строчкой кода, он выдаёт ошибку и никакого облака тегов не получается ((
что не так ?

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

T@nia, скажи - до вставки последнего кода при сохранении всё было нормально?
Не ругалось?

Строка которую нашла - правильная, то что в title другое - не страшно это название оно ни на что не влияет.

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

Вот мне кстати непонятно откуда у тебя обратные слеши "\" взялись в коде - это огрехи онлайн-переводчика?

T@nia комментирует...

да, все было нормуль, до этого пункта правки,
да это онлайн переводчик

T@nia комментирует...

до каких слов примерно должна правка доходить ?

у меня получается что происходит какой-то разрыв между тегами...

T@nia комментирует...

</b:if>
</li>
</ul>

вот примерно между ними

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

Стоп, стоп, стоп !
Вот ту строчку, кторую для сравнения ты прислала заменяешь текстом кода.
То есть грубо говоря - строчку на этот весь код.

О каком разрыве между тегами речь?

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

icq - 367579205

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

Konkoff, а где что писать в коде, что бы цвет тегов в облаке был такой же, как и у всех ссылок в меню? А то у меня они синие какие-то :-(

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

Санёк,
в самом конце поста есть так называемое определение цветов
maxColor = [0,0,255];
var minColor = [0,0,0];
максимальный и минимальный цвета в формате RGB, сделай minColor тоже синим то есть minColor[0,0,255].

Y. Mushtandoid комментирует...

Не работает, делаю все правильно.

Пишет:XML error message: The content of elements must consist of well-formed character data or markup.

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

Только что сам попробовал - действительно глючит!
Вот ссылка на другой блог в котором описан этот способ - оттуда получается, наверно что-то с форматированием, так как код переводил онлайном.

Проблема выяснилась в третьем коде, поэтому первые два пропустите, а третий смело копируйте и вставляйте в шаблон. Удачи!

Олеся комментирует...

ничего не глючит. все ок. респект.

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

Вставил, всё ОК!

Одна маленькое неудобство.

Тегов оказалось столько, что заняло два полных экрана!

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

Заранее благодарен.

Груздев Михаил.

Анонимный комментирует...

Только что сам попробовал - действительно глючит!
Вот ссылка на другой блог в котором описан этот способ - оттуда получается



у меня заработало только когда вставил код из

автору блога спасибо, много взял отсюда

Анонимный комментирует...

автору блога спасибо, много взял отсюда


Только что сам попробовал - действительно глючит!
Вот ссылка на другой блог в котором описан этот способ - оттуда получается



у меня заработало только когда вставил код из

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

Ой, харошая штука!! У меня самого такое облако стоит! Советую всем!!