Облако тегов: определение, назначение, создание (часть2)
Sunday, 07 Oct 07 в 16:37
Во второй части темы недели об облаке тегов рассмотрим установку данного элемента в вашем блоге. Точнее приведение элемента к классическом виду облака тегов вместо обычного списка, как это делает 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>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;
Позволяет ограничить число тегов в облаке – параметр указывает количество повторений, требуемых для включения тега в облако. То есть, если вы установите, например, 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>
В нем вместо строки
Читать также:
Облако тегов: определение, назначение, создание (часть1)
Добаление счетчика и контактов в блог от Blogger
Создание блога на Blogger.com (постскриптум)
Подписаться на RSS блога можно здесь.
Loading ...
Пиши еще! ;)
Договорились:)
Как же тяжело бедным Blogger’ам живется :))) То ли дело WordPress 2.3
maydanikas, это точно!
Приходится крутиться и находить некоторые лазейки в системе:)
ВП, конечно, в данном случае вне конкуренции.
для чего же так себя мучить? :)
Ну не все так сложно, как это может показаться со стороны.
Для начала я просто хотел создать блог и Блоггер мне в этом помог:) прям стихи пошли.
Вот когда соберусь с мыслями для переезда на свой хостинг и домен, тогда, думаю, мучениям придет конец.
“Вот когда соберусь с мыслями для переезда на свой хостинг и домен, тогда, думаю, мучениям придет конец.”
Я прошу прощения за банальный вопрос, а что сейчас мешает перейти на это самое? Может действительно перейти на ВП. это вообще сложно или нет?
Нужно время.
Переезд для себя я практически решил, пока не определился с датой.
Кроме того, настройка ВП, темы, переноса инфы займет время, которого пока не так много:)
Ты знаком с technorati.com/
Что это и с чем его едят и как его настроить,если знаешь?
Ну это какой-то сервис для блогов. Я подробно не разбирался, только блог туда добавил.
Может в дальнейшем опишу подробнее что это и с чем едят.
зы. лучше так сильно не отклоняться от темы поста, можешь в аське спросить запросто:)
Технорати – это социальный поисковик по блогам. Кроме того, он отслеживает глобальную статистику блогосферы, т.е. является еще и рейтингом. Системы меток (тегов) технорати используются западными блоггерами для раскрутки своих сайтов.
Зарегившись в системе блог начинает накапливать репутацию, попадает в индекс, собирает почитателей, ведет учет внешних ссылок и т.п. Короче штука во всех отношениях небесполезная.
Есть возможность пинговать по требованию.
Короче, рекомендую
Спасибо за подробное объяснение!
Я, в принципе, о чем-то подобном подозревал, не хватало только четкой формулировки:)
спасибо за статью, помогла
Не за что:)
Что-то у меня никак не выходит! Все время выкидывает ошибку:
“Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
Сообщение об ошибке в XML: Open quote is expected for attribute “{1}” associated with an element type “type”. “
Скорее всего была допущена ошибка с вашей стороны. Попробуйте внимательно повторно повторить все шаги или свяжитесь со мной в аське – помогу.
И у меня никак не выходит! С разными шаблонами пробовала, внимательно!!!
А дальше как и у Alexa: Сообщение об ошибке в XML: Open quote is expected for attribute “{1}” associated with an element type “type”.
Lesja, сложно сориентироваться когда не видно шаблона. Напишите мне в аську и попробуем разобраться в чем там дело.
Выдает ту же ошибку: Open quote is expected for attribute “{1}” associated with an element type “type”.
Вы уже выяснили в чем дело?
Нет, никто из комментаторов не вышел на связь:( Возможно они уже решили свои проблемы.
Давай хоть с вами по аське спишемся:) Я помогу с установкой.
<b> – нет этой строки кода ни в классическом шаблоне, ни в макете – что делать?
Блин, как добавить тег в комментарий? Или никак? У меня нет строки, которая указана в 3 пункте этой статьи.
Алексей, я ответил вам на почту.
Пишет: 15.06.08 at 9:30 pm
[...] умные и неленивые люди, а именно – Вячеслав
В пункте 2 ошибка в ковычках, поэтому и выдает у вас сообщение:
“Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
Сообщение об ошибке в XML: Open quote is expected for attribute “{1}” associated with an element type “type”. “
попробуйте этот код:
// 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;
Та там практически в каждой строке проблема с кавычками – Wordpress их автоматически преобразовывает в неправильные. Поэтому нужно коды проверять вручную. Собираюсь на днях плагин поставить для нормальной поддержки кодов.
))… ммм… не выводится
кароче, замените type=’text/javascript’ на type=’text/javascript’
уже, наверно, пятый раз пробую, ничего не получаеться…
Надо еще попробывать почистить код от лишних кавычек может выйдет…
В данной статье, в третьем блоке кода знаки логики прописаны явным способом:
if(a>b), а в оригинале – в символах html if(а> ;b)
В первом случае у меня не заработало, во втором – все прокатило. берите код по ссылке «автор».
Cпасибо за информацию, исправил.
Отличный пост, после изменения кода все заработало как и хотелось. Большое спасибо!
Если не возражаете поставил ссылку на Ваш блог в разделе “Полезные блоги”.
А мне было отвечено (шаблон стандартный – “Harbor”):
“Оболочка не может содержать элемент script. Допускаются только текст и разделы CDATA.”
Это что значит? И что делать? :)
На другом шаблоне (я использовала коды с этой страницы: http://phy3blog.googlepages.com/Beta-Blogger-Label-Cloud.html ) другое сообщение: “Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
Сообщение об ошибке в XML: The element type “b:section” must be terminated by the matching end-tag ”
А с этим что делать?
Allpa, поставили галочку напротив “расширить шаблоны виджета”? Во втором случае похоже вставляете код не в то место.
Да, галочку поставила.
Вставляю в нужные места: первый код ДО ]]>, второй – ПОСЛЕ, но ДО , третий – ВМЕСТО
Ужасно странно… :((
Да, сообщение об ошибке звучит так, точнее: The element type “b:section” must be terminated by the matching end-tag “”
Обратите внимание на две кавычки в конце – я пробовала их менять на одиночные(-ую), один хрен. :(
Тогда алгоритм действий такой. Выполнять все пункты поочередно, после каждого проверять работоспособность шаблона (сохранив его) и наличие ошибок. Тогда можно установить на каком шаге закралась ошибка. После этого воспользуйтесь информацией (кодами) со страницы-оригинала описания данного метода.
Если ничего не получилось – можно стукнуть мне в аську, помогу.
Ой… куда пропал строчка с кодом в моём ответе выше?.. Забыла, как отменять коды. :)
Вместо, значит, этой:
Ок, щас попробую пошагово…
Так, дело в третьем коде, который вставляется ВМЕСТО строчки “Ярлыки” и т.д.
Причём, у меня она выглядит так: b:widget id=’Label1′ locked=’false’ title=’Ярлыки’ type=’Label’ – вместо Labels “Ярлыки”, и нет палочки в конце, как у автора: ‘Label’/
Если я, не подставляя ещё код, просто поставлю эту чёрточку (как она называется, я забываю всё время, извините) в свою строчку и попробую сохранить шаблон, выскакивает всё та же ошибка.
Ну, и после того, как заменю эту строчку на нужный код – тоже ошибка.
Два первых изменения – проходят на ура. :)
Все коды брала со страницы оригинала.
Allpa, напиши в аську завтра, разберемся что к чему. Сейчас уже поздно.
У меня теги в облаке выстраиваются по порядку, начиная с самых жирных. Как сделать чтобы они в разнобой были?
Заранее благодарен!
Alchemist, выбираешь в админке редактирование элемента с ярлыками и там есть поле “Сортировка”. Нужно поставить по алфавиту, а не частоте.
Спасибо! =)
Проблема с ошибкой:
“Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
Сообщение об ошибке в XML: Open quote is expected for attribute “{1}” associated with an element type “type”
решилась заменой “"” на апостроф в третьем блоке.
Остальное работает, только вот выражение
“…то есть снова находим в шаблоне ]]>, но вставляем код ПОСЛЕ этого тега, но ПЕРЕД закрывающим тегом .” сбило с толку по началу (ставил код перед /b:skin, и думаю не я один) – код нужно вставлять после /b:skin, но перед head, иначе будет выше упоминавшиеся ошибка – “Оболочка не может содержать элемент script. Допускаются только текст и разделы CDATA.”
Влад, спасибо, сейчас исправлю. Тут с автоматическим преобразованием символов постоянные проблемы.
А у меня следующая проблема:
“Заходим в раздел «Шаблон», меню «Изменить HTML», далее активируем галочку в верхнем правом углу «расширить шаблоны виджета». После этого находим в коде блок: …. В нем вместо строки пишем любой другой нужный вам текст, например – «теги»”
Не понимаю вместо какой строки? Вместо всего блока?
Asonov, исправил. Часть кода преобразовалась – нужно заменить тег <data:postLabelsLabel/>
К сажалению ничего не получается, заходил и на страницу автора, думал там яснее будет (http://shablondlyabloggera.blogspot.com/), но все равно не помогло ((
Asonov, маякни мне в аську после 21.00, разберемся. Номер справа-сверху в блоге.
Наконец появился виджет, реализующий концепцию облака тегов, не надо заморачиваться с кодом, хотя и не так красиво получается http://devsac.blogspot.com/2009/02/dynamic-label-cloud-gadget.html
Тод, извини, что не в тему, но раз уж разговор о Технорати зашёл здесь, то здесь и спрошу, мона?
Было бы здорово, если б ты так внятно, как это умеешь только ты, рассказал, что за что – этот Технорати, и как с ним работать русскоязычному юзеру. :)
Думаю, многие тебе б в ножки за это поклонились. :))
Allpa, Технорати – некий сервис для блогов, где есть рейтинг, поиск и куча других возможностей. В рунете видел парочку статей про него, там, в принципе, можно почитать. Сервис англоязычный и в первую очередь ориентирован на данную аудиторию, хотя точно также работает и с русскими блогами. Полгода назад я использовал его чтобы смотреть обратные ссылки на себя – кто обо мне пишет, по идее, таким же функционалом обладает Яднекс, к тому же ориентирован на русскоязычных пользователей.
Tod, все спс разобрался =)) Теперь пойду облагораживать свой блог – виджеты устанавливать =))
Здравствуйте. У меня получилось добавить облако тегов, но почему то все теги идут просто в столбик, по одному в строке. Как сделать чтоб в строке было несколько тегов?
Dimyan, действительно странно. Попробуй еще разок все сделать по инструкции, если не получится – пиши в аську, я сам код посмотрю.
Ох и заморочек у этого blogger’a. Хочу на Drupal перелазить.
Кстати интересный у вас блог, подписался :)
Добрый день,
Установила Облако, всё получилось прекрасно. Но несколько дней спустя оно вдруг слетело, остался только заголовок. Несколько раз делала, но результат – нулевой. На третьем шаге заменяю
Спасибо.
Vera, должно все работать, можешь еще глянуть у автора скрипта в оригинальной статье – phy3blog.googlepages.com/Beta-Blogger-Label-Cloud.html, возможно, где-то в коде ошибка. При нестандартном шаблоне нужно удалить не только строчку, а и некоторый другой код для блока с тегами. Не забывай ставить галочку “расширить шаблоны виджета”.
СПАСИБО Вам огромное! С первого раза все получилось! :) Сегодня мой блог обогатился новым виджетом :)
Переделывала несколько раз, пока не обратила внимания на то, что у меня один тег (поросёнок!) стоял в двойных кавычках. Ё-моё!!!
Спасибо за поддержку.
Если Блоггер не допускает наличие javascript в коде что делать в этом случае?
Robbie_Raul, для javascript в Блоггере есть отдельный элемент. В самом тексте поста, конечно, добавить не получится, зато в сайдбаре и где-то еще можно.
А на чем это всё делать то? В какой пронрамме(где найти эти блок “Шаблон”, элементы страницы…)?
А все, смотрится отлично ^^ спасибо огромное за статью
to влад
“…то есть снова находим в шаблоне ]]>, но вставляем код ПОСЛЕ этого тега, но ПЕРЕД закрывающим тегом .” сбило с толку по началу (ставил код перед /b:skin, и думаю не я один) – код нужно вставлять после /b:skin, но перед head, иначе будет выше упоминавшиеся ошибка – “Оболочка не может содержать элемент script. Допускаются только текст и разделы CDATA.”
—————–
Спс. помогло.
PS: Можно ли прикрутить облоко тэгов не вместо Ярлыков? Я лично откатил, мне ярлыки больше по душе:-) Но как дополнительный виджет я бы оставил.
u menya nikak ne poluchaetsya, chto sdelat?
у меня все вроде бы получилось. я имею ввиду сделал изменения в коде. сохранилось удачно. но….
когда зашел на свой блог cdt-brulik.blogspot.com/ все осталось как и прежде. хотя в схеме сайта появилось окно
я конечно впервые с этим работаю. как слова-тэги добавлять?
При создании поста внизу есть поле для тегов или меток, туда добавлять. Потом лишь создается облако тегов, без введенных меток оно и работать не будет.