Онлайн заработок, создание и монетизация сайтов, веб-разработка, SEO и SMO продвижение, фриланс, партнерки, полезные сервисы вебмастерам, блоггинг.

Wordpress шаблоны
Главная » Web разработка » Blogger.com (Blogspot) » Как создать облако тегов для Blogger.com

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

Облако тегов: определение, назначение, созданиеВо второй части темы недели об облаке тегов рассмотрим установку данного элемента в вашем блоге. Точнее приведение элемента к классическом виду облака тегов вместо обычного списка, как это делает 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>

В нем вместо строки пишем любой другой нужный вам текст, например – «теги». Решение подсмотрел здесь.

Читать также:
Облако тегов: определение, назначение, создание (часть1)
Добаление счетчика и контактов в блог от Blogger
Создание блога на Blogger.com (постскриптум)
Подписаться на RSS блога можно здесь.

07.10.07

Категории: Blogger.com (Blogspot), Блоггинг, Заработок в интернете.

Теги: , , , , , ,

83 Comments
  1. Kopernik

    Пиши еще! ;)

  2. Tod

    Договорились:)

  3. maydanikas

    Как же тяжело бедным Blogger’ам живется :))) То ли дело WordPress 2.3

  4. Tod

    maydanikas, это точно!
    Приходится крутиться и находить некоторые лазейки в системе:)
    ВП, конечно, в данном случае вне конкуренции.

  5. maydanikas

    для чего же так себя мучить? :)

  6. Tod

    Ну не все так сложно, как это может показаться со стороны.
    Для начала я просто хотел создать блог и Блоггер мне в этом помог:) прям стихи пошли.
    Вот когда соберусь с мыслями для переезда на свой хостинг и домен, тогда, думаю, мучениям придет конец.

  7. 19sky22

    «Вот когда соберусь с мыслями для переезда на свой хостинг и домен, тогда, думаю, мучениям придет конец.»

    Я прошу прощения за банальный вопрос, а что сейчас мешает перейти на это самое? Может действительно перейти на ВП. это вообще сложно или нет?

  8. Tod

    Нужно время.
    Переезд для себя я практически решил, пока не определился с датой.
    Кроме того, настройка ВП, темы, переноса инфы займет время, которого пока не так много:)

  9. 19sky22

    Ты знаком с technorati.com/
    Что это и с чем его едят и как его настроить,если знаешь?

  10. Tod

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

    зы. лучше так сильно не отклоняться от темы поста, можешь в аське спросить запросто:)

  11. maydanikas

    Технорати — это социальный поисковик по блогам. Кроме того, он отслеживает глобальную статистику блогосферы, т.е. является еще и рейтингом. Системы меток (тегов) технорати используются западными блоггерами для раскрутки своих сайтов.
    Зарегившись в системе блог начинает накапливать репутацию, попадает в индекс, собирает почитателей, ведет учет внешних ссылок и т.п. Короче штука во всех отношениях небесполезная.
    Есть возможность пинговать по требованию.
    Короче, рекомендую

  12. Tod

    Спасибо за подробное объяснение!
    Я, в принципе, о чем-то подобном подозревал, не хватало только четкой формулировки:)

  13. Hitry

    спасибо за статью, помогла

  14. Tod

    Не за что:)

  15. Alex

    Что-то у меня никак не выходит! Все время выкидывает ошибку:

    «Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
    Сообщение об ошибке в XML: Open quote is expected for attribute «{1}» associated with an element type «type». «

  16. Tod

    Скорее всего была допущена ошибка с вашей стороны. Попробуйте внимательно повторно повторить все шаги или свяжитесь со мной в аське — помогу.

  17. Lesja

    И у меня никак не выходит! С разными шаблонами пробовала, внимательно!!!
    А дальше как и у Alexa: Сообщение об ошибке в XML: Open quote is expected for attribute «{1}» associated with an element type «type».

  18. Tod

    Lesja, сложно сориентироваться когда не видно шаблона. Напишите мне в аську и попробуем разобраться в чем там дело.

  19. Peter

    Выдает ту же ошибку: Open quote is expected for attribute “{1}” associated with an element type “type”.
    Вы уже выяснили в чем дело?

  20. Tod

    Нет, никто из комментаторов не вышел на связь:( Возможно они уже решили свои проблемы.
    Давай хоть с вами по аське спишемся:) Я помогу с установкой.

  21. Alexey

    <b> — нет этой строки кода ни в классическом шаблоне, ни в макете — что делать?

  22. Alexey

    Блин, как добавить тег в комментарий? Или никак? У меня нет строки, которая указана в 3 пункте этой статьи.

  23. Tod

    Алексей, я ответил вам на почту.

  24. Javer

    В пункте 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;

  25. Tod

    Та там практически в каждой строке проблема с кавычками — WordPress их автоматически преобразовывает в неправильные. Поэтому нужно коды проверять вручную. Собираюсь на днях плагин поставить для нормальной поддержки кодов.

  26. Javer

    ))… ммм… не выводится
    кароче, замените type=’text/javascript’ на type=’text/javascript’

  27. Denis

    уже, наверно, пятый раз пробую, ничего не получаеться…
    Надо еще попробывать почистить код от лишних кавычек может выйдет…

  28. mx78.blogspot.com

    В данной статье, в третьем блоке кода знаки логики прописаны явным способом:
    if(a>b), а в оригинале — в символах html if(а&gt ;b)
    В первом случае у меня не заработало, во втором — все прокатило. берите код по ссылке «автор».

  29. Tod

    Cпасибо за информацию, исправил.

  30. ssoross

    Отличный пост, после изменения кода все заработало как и хотелось. Большое спасибо!
    Если не возражаете поставил ссылку на Ваш блог в разделе «Полезные блоги».

  31. Allpa

    А мне было отвечено (шаблон стандартный — «Harbor»):
    «Оболочка не может содержать элемент script. Допускаются только текст и разделы CDATA.»
    Это что значит? И что делать? :)

  32. Allpa

    На другом шаблоне (я использовала коды с этой страницы: http://phy3blog.googlepages.com/Beta-Blogger-Label-Cloud.html ) другое сообщение: «Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
    Сообщение об ошибке в XML: The element type «b:section» must be terminated by the matching end-tag »
    А с этим что делать?

  33. Tod

    Allpa, поставили галочку напротив «расширить шаблоны виджета»? Во втором случае похоже вставляете код не в то место.

  34. Allpa

    Да, галочку поставила.
    Вставляю в нужные места: первый код ДО ]]>, второй — ПОСЛЕ, но ДО , третий — ВМЕСТО

    Ужасно странно… :((

  35. Allpa

    Да, сообщение об ошибке звучит так, точнее: The element type «b:section» must be terminated by the matching end-tag «»
    Обратите внимание на две кавычки в конце — я пробовала их менять на одиночные(-ую), один хрен. :(

  36. Tod

    Тогда алгоритм действий такой. Выполнять все пункты поочередно, после каждого проверять работоспособность шаблона (сохранив его) и наличие ошибок. Тогда можно установить на каком шаге закралась ошибка. После этого воспользуйтесь информацией (кодами) со страницы-оригинала описания данного метода.
    Если ничего не получилось — можно стукнуть мне в аську, помогу.

  37. Allpa

    Ой… куда пропал строчка с кодом в моём ответе выше?.. Забыла, как отменять коды. :)
    Вместо, значит, этой:

  38. Allpa

    Ок, щас попробую пошагово…

  39. Allpa

    Так, дело в третьем коде, который вставляется ВМЕСТО строчки «Ярлыки» и т.д.
    Причём, у меня она выглядит так: b:widget id=’Label1′ locked=’false’ title=’Ярлыки’ type=’Label’ — вместо Labels «Ярлыки», и нет палочки в конце, как у автора: ‘Label’/
    Если я, не подставляя ещё код, просто поставлю эту чёрточку (как она называется, я забываю всё время, извините) в свою строчку и попробую сохранить шаблон, выскакивает всё та же ошибка.
    Ну, и после того, как заменю эту строчку на нужный код — тоже ошибка.
    Два первых изменения — проходят на ура. :)

  40. Allpa

    Все коды брала со страницы оригинала.

  41. Tod

    Allpa, напиши в аську завтра, разберемся что к чему. Сейчас уже поздно.

  42. Alchemist

    У меня теги в облаке выстраиваются по порядку, начиная с самых жирных. Как сделать чтобы они в разнобой были?
    Заранее благодарен!

  43. Tod

    Alchemist, выбираешь в админке редактирование элемента с ярлыками и там есть поле «Сортировка». Нужно поставить по алфавиту, а не частоте.

  44. Alchemist

    Спасибо! =)

  45. влад

    Проблема с ошибкой:
    «Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
    Сообщение об ошибке в XML: Open quote is expected for attribute “{1}” associated with an element type “type»
    решилась заменой «"» на апостроф в третьем блоке.
    Остальное работает, только вот выражение
    «…то есть снова находим в шаблоне ]]>, но вставляем код ПОСЛЕ этого тега, но ПЕРЕД закрывающим тегом .» сбило с толку по началу (ставил код перед /b:skin, и думаю не я один) — код нужно вставлять после /b:skin, но перед head, иначе будет выше упоминавшиеся ошибка — “Оболочка не может содержать элемент script. Допускаются только текст и разделы CDATA.”

  46. Tod

    Влад, спасибо, сейчас исправлю. Тут с автоматическим преобразованием символов постоянные проблемы.

  47. Asonov

    А у меня следующая проблема:
    «Заходим в раздел «Шаблон», меню «Изменить HTML», далее активируем галочку в верхнем правом углу «расширить шаблоны виджета». После этого находим в коде блок: …. В нем вместо строки пишем любой другой нужный вам текст, например – «теги»»

    Не понимаю вместо какой строки? Вместо всего блока?

  48. Tod

    Asonov, исправил. Часть кода преобразовалась — нужно заменить тег <data:postLabelsLabel/>

  49. Asonov

    К сажалению ничего не получается, заходил и на страницу автора, думал там яснее будет (http://shablondlyabloggera.blogspot.com/), но все равно не помогло ((

  50. Tod

    Asonov, маякни мне в аську после 21.00, разберемся. Номер справа-сверху в блоге.

Добавить комментарий

Ваш e-mail не публикуется. Обязательные поля помечены *
Если вы комментируете впервые, то текст будет отправлен на модерацию.