Облако тегов: определение, назначение, создание

источник: http://tods-blog.com.ua/blogging/tag-cloud-blogger/  Для начала заходим в блог раздел «Шаблон», выбираем меню «Элементы страницы». Создаем новый элемент типа «Ярлыки». Далее заходим пункт меню «Изменить HTML». 1. Первую часть кода необходимо добавить в секцию стилей, которая отмечена тегами .  Находим место в шаблоне ]]> и размещаем код до него: /* 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} 2. Следующая часть кода — есть настройка некоторых параметров облака, она также идет в блоке шаблона, но уже вне секции стилей, то есть снова находим в шаблоне ]]>, но вставляем код ПОСЛЕ этого тега, но ПЕРЕД закрывающим тегом . <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> Все строки могут быть изменены, но объясним их значение позже.  Пока для нас важно чтобы заработали эти настройки по умолчанию. 3. Теперь займемся модификаций виджета «Ярлыки».  Находим в шаблоне место (или подобное ему — ищите по значениям id, type) <b:widget id='Label1' locked='false' title='Labels' 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&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 = &quot;<data:label.name/>&quot;; 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> Кстати, автор называет возможные ошибки при создании облака. Во-первых, убедитесь, что хотя бы один из тегов имеет повторение, то есть использован более одного раза. Кроме того, нельзя использовать в тегах символ двойных кавычек «. При этом разрешатся писать одинарную кавычку ‘ или апостроф. Вполне вероятно, что вид облака тегов по умолчанию будет не таким, как вы точно хотели. Но не расстраивайтесь! Все размеры и цвета могут быть настроены путем изменения нужных переменных. Рассмотрим значение переменных, которые мы добавили в шаблон на втором этапе настройки. var cloudMin= 1; Позволяет ограничить число тегов в облаке – параметр указывает количество повторений, требуемых для включения тега в облако. То есть, если вы установите, например, 3 – то в облаке тегов будут отображены только ярлыки с тремя и более повторений. Настройка, приведенная выше, позволяет отобразить все теги. Переменные maxFontSize, maxColor соответственно задают размер шрифта и цвет для тега, который встречается в облаке наиболее часто. По аналогичному принципу работают переменные minFontSize, minColor, только для тегов с наименьшим повторением. Параметры всех ярлыков, расположенных между максимальным и минимальным значениями, рассчитываются исходя из общего количества тегов и частоты их употребления. Чтобы получить нужный вам вариант оформления облака тегов нужно немного поэкспериментировать с цветом и размерами. Кроме того, для облака необходимо достаточно количество ярлыков, 3-4 будет маловато. Внимание, когда вы изменяете настройку цвета, придерживайтесь нужного формата, приведенного в примере – использование закрывающих кавычек [] и разделения значений запятыми. Если вы не в курсе RGB кодов для цветов, можете воспользоваться следующей таблицей (нужные значения в первой колонке). Последняя переменная lcShowCount может принимать значения «истинно» (true) и «ложно» (false). Отвечает за отображение количества повторений того или иного тега в блоге. По умолчанию эта настройка выключена. Что касается секции стилей (CSS), то там также есть несколько мест, которые можно изменить под себя. #labelCloud {text-align:center;font-family:arial,sans-serif;} Здесь вы можете изменить шрифт, используемый в облаке, или же выравнивание: 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;. И на последок строка: #labelCloud .label-count Она задает стиль для метки количества вхождений. Конечно, если данная особенность облака активирована. Если и этого вам мало, можно сделать для блога еще одну фишку. Вы, наверное, заметили, что Blogger использует вместо понятия тегов «ярлыки». Соответственно под каждым сообщением идет перечень установленных вами тегов, перед которыми используется слово «Ярлыки». Можно это изменить! Заходим в раздел «Шаблон», меню «Изменить HTML», далее активируем галочку в верхнем правом углу «расширить шаблоны виджета». После этого находим в коде блок: <p class='post-footer-line post-footer-line-2'> <span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> В нем вместо строки пишем любой другой нужный вам текст, например – «теги». Решение подсмотрел здесь (http://feeds.feedburner.com/TodsBlog).