Облако тегов: определение, назначение, создание (часть2)
Sunday, 07 Oct 07 в 16:37
Во второй части темы недели об облаке тегов рассмотрим установку данного элемента в вашем блоге. Точнее приведение элемента к классическом виду облака тегов вместо обычного списка, как это делает Blogger по умолчанию.
Внимание! Перед внесением любых изменений настоятельно рекомендуется сделать копию вашего шаблона блога и сохранить в файле на локальном компьютере.
После этого можно со спокойной совестью приступить к модифицированию базового кода. Для начала заходим в блог раздел «Шаблон», выбираем меню «Элементы страницы». И создаем новый элемент типа «Ярлыки». Хотя, в принципе, это можно сделать и после модификации облака тегов.
Далее заходим пункт меню «Изменить HTML». Метку в верхнем правом углу «расширить шаблоны виджета» отставляем неизменной – это несколько упростит работу:) Итак, теперь приступим непосредственно к правке кода, которая состоит из трех частей.
1. Первую часть кода необходимо добавить в секцию стилей, которая отмечена тегами <b:skin>. Чтобы особо не вникать в структуру шаблона, другими словами – находим место в шаблоне ]]></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}
2. Следующая часть кода - есть настройка некоторых параметров облака, она также идет в блоке <head> шаблона, но уже вне секции стилей, то есть снова находим в шаблоне ]]></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>
Все строки могут быть изменены, но объясним их значение позже. Пока для нас важно чтобы заработали эти настройки по умолчанию.
3. Теперь займемся модификаций виджета «Ярлыки». Находим в шаблоне место
<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>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=03 > ii++) {
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>
В нем вместо строки <data:postLabelsLabel/> пишем любой другой нужный вам текст, например – «теги». Решение подсмотрел здесь.
Читать также:
Облако тегов: определение, назначение, создание (часть1)
Добаление счетчика и контактов в блог от Blogger
Создание блога на Blogger.com (постскриптум)
Подписаться на RSS блога можно здесь.
Судя по комментариям некоторых 
Это ваш сайт в схематическом виде. Сначала идет верхняя панель от Blogger`а, потом заголовок блога, слева блок сообщений, также видим перечень элементов правой колонки и нижний блок. Что хотелось бы здесь отметить.
После этого заходим в меню «Элементы страницы», добавляем новый элемент для которого выбираем тип «
Loading ...