27 сент. 2007 г.

Облако тегов на Blogger (blogspot.com)

Внимание! Есть важное дополнение к этому посту: «Blogger: ограниченное облако тегов».

Зацените, какое миленькое облако тэгов теперь есть на моем блоге:-)

Наконец-то нашел нормальное описание. Я тут поразвлекался, сделал краткий перевод ключевых моментов. Специально постарался изложить все максимально кратко, а не выполнять дословный перевод.

  1. Должен использоваться новый шаблон Blogger — layout (не классический).
  2. Блог должен содержать хотя бы один тег, к которому относится более одного поста. Ни один тег не должен содержать двойных кавычек. Апострофы и одинарные кавычки допускаются.
  3. Логинимся на blogger, заходим на вкладку «Шаблон» -> «Элементы страницы».
  4. Жмем «Добавить элемент страницы», добавляем виджет «Ярлыки». Название роли не играет, местоположение можно изменить потом.
  5. Переходим на вкладку «Изменить HTML», делаем резервную копию шаблона (ссылка в русском варианте почему-то называется «Загрузить шаблон»… наверное, чтобы было понятней).
  6. НЕ ставим галочку «Расширить шаблоны виджета», ищем строку 
    ]]></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}
  7. Сразу после строчки ]]></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>
  8. В коде HTML ищем строчку самого виджета «Ярлыки». Это будет строчка вроде такой:
    <b:widget
    id='Label1' locked='false' title='Ярлыки' type='Label'/>
    Указанную строку заменяем на новый код виджета:
    <b:widget id='Label1' locked='false' title='Облако тегов' 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>
  9. Жмем «Сохранить шаблон» и смотрим результат в блоге. Облако должно появиться. Если это не так — рекомендую убедиться, что выполнены условия первых двух пунктов. Если не поможет, придется перечитать оригинал. Возможно, переводчик пропустил что-то важное:-)

При желании можно выполнить настройку скрипта (мне понравился вариант по-умолчанию). Для настройки используются переменные скрипта:

  1. cloudMin — переменная, ограничивающая количество тегов. Значение 1 соответствует отображению всех имеющихся тегов без ограничений. По моему опыту, эта переменная не работает — сносит крышу скрипту, после чего облако вообще не отображается. Возможно, я что-то не так делал… UPDATE! Это неверно! Всё работает. Подробнее читайте мой пост «Blogger: ограниченное облако тегов».
  2. Назначение параметров maxFontSize, maxColor, minFontSize, minColor понятно из их названий.
  3. lcShowCount включает отображение количества тем, соответствующих каждому тегу. Выглядит это так: «отдых (6)».
Также можно выполнять изменение выравнивания тегов в облаке (#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;}), а также менять отображение с «облачного» на «плоское» (display:inline; — display:block). Есть возможность отображения общего количества тегов в облаке (#labelCloud.label-count). Подробнее см. первоисточник.

Внимание! После внесенных изменений нельзя нажимать на ссылку «Изменить» для данного виджета на странице «Элементы страницы». Если так сделать — движок blogger заменит измененный код виджета стандартным вариантом.

P.S. Чуть позже нашел ещё один перевод этого же самого источника на Tod’s Blog в посте от 6-го октября. Желающие могут свериться с этой инструкцией.

Update: Ещё неплохой вариант предложил один читатель. Он предлагает использовать Ajax облако тегов. Действительно, симпатично выглядит: Blogger Ajax Label Cloud. Но мне у себя переделывать лениво. Возможно, вам пригодится.

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

  1. Класс, сейчас попробую)

    ОтветитьУдалить
  2. Здорово!
    А я даже огорчился, увидев, что стандартными методами этого не добиться... оказалось, выход есть)

    ОтветитьУдалить
  3. Анонимный14.05.2008, 01:52

    Спасибо ОГРОМНОЕ. Раньше пробовал сделать - почему-то не получалось. На этот раз ЗАРАБОТАЛО облачко!!!

    ОтветитьУдалить
  4. Спасибо за статью. Будет чем заняться сегодня вечером за чашкой чая.

    Хотя имхо разработчики Google, должны были бы включить такое облачко в стандартный функционал.

    Зато радует, что оставили свободу для "творчества".

    ОтветитьУдалить
  5. Завсегда пожалуйста :-)
    Рад, что пригодилась статья.

    ОтветитьУдалить
  6. Анонимный14.08.2008, 07:55

    Спасибо за эту статью. Применил в своем блоге

    ОтветитьУдалить
  7. Спасибо за статью! Очень полезная информация

    ОтветитьУдалить
  8. Анонимный28.08.2008, 21:33

    Огромное спасибо! Искал способ создания такого облака для своего блога и вот благодаря вам нашёл :)

    ОтветитьУдалить
  9. Анонимный03.09.2008, 20:21

    Большое спасибо! Теперь привёл свои теги в более интересный вид, да и места меньше занимают )

    ОтветитьУдалить
  10. Этот комментарий был удален автором.

    ОтветитьУдалить
  11. Полностью согласен с lozoffoy. Почему этих фич нет в стандартном функционале - не понятно!

    ОтветитьУдалить
  12. Анонимный11.10.2008, 17:33

    Спасибо. Всё получилось. Дополнительно были подобраны более гармоничные цвета для Minimal Dark Template.

    ОтветитьУдалить
  13. Огромное человеческое спасибо, давно хотел.

    ОтветитьУдалить
  14. спасибо! все очень доступно написано)

    ОтветитьУдалить
  15. Анонимный20.11.2008, 18:04

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

    ОтветитьУдалить
  16. Нет, к сожалению, не задавался этим вопросом...

    ОтветитьУдалить
  17. Спасибо - пригодилось.

    ОтветитьУдалить
  18. огромное спасибо
    разберусь с блогом, непременно сделаю по инструкции

    ОтветитьУдалить
  19. Спасибо за инструкцию!!! Теперь и у меня есть облако тегов!!!

    ОтветитьУдалить
  20. Большое спасибо за статью... Очень помогла...

    ОтветитьУдалить
  21. а у меня облако незаработало....ошибок никаких не выдало, но облако осталось прежним....

    ОтветитьУдалить
  22. Отлично. Всё заработало с первого раза. Инструкция выполнена на 5+. Всё ясно и понятно.

    ОтветитьУдалить
  23. Статья по прежнему актуальна. Спасибо за труд - скопирайтил вашу интеллектуальную собственность, не забыв указать первоисточник. :)

    ОтветитьУдалить
  24. Да не за что. На самом деле, мой тут только перевод и адаптация под себя. Ссылка на источник интеллектуальной собственности указана в моём посте :-)

    Всё равно приятно, что помогло. :-)

    ОтветитьУдалить
  25. Попробовала, только отображается как и было, только по центру, как сделать, чтобы облако было как у тебя? Очень нравится.

    ОтветитьУдалить
  26. Сама разобралась, спасибо, теперь красивое облачко у меня красуется.

    ОтветитьУдалить
  27. Рад, что пригодилось :-)
    Воистину, самый популярный пост на этом блоге. Вот уж никак не ожидал :-)

    ОтветитьУдалить
  28. Спасибо! все работает=)

    ОтветитьУдалить
  29. А еще для любителей флеш-анимации есть облако тегов на флэш, описано здесь:
    http://beliber-da.blogspot.com/2009/01/flash.html
    Я попробовал на своем блоге(http://windows-777.blogspot.com)- работает нормально.

    ОтветитьУдалить
  30. Спасибо!!! Все замечательно работает

    ОтветитьУдалить
  31. Привет! Загорелся и я этой идеей! Буду флешовое облако делать. А скажите пожалуйста -- новые ярлыки постов автоматом в облако добавляются? Так же как и ярлыки?

    ОтветитьУдалить
  32. Сделал! Абалденно! СПС за информацию!

    ОтветитьУдалить
  33. Новые ярлыки добавляются автоматом.

    ОтветитьУдалить
  34. Это работает только для домена .blogspot.com или для пользовательского домена тоже? У меня публикация блога идет на пользовательский домен и нет опции добавить виджет... =(

    ОтветитьУдалить
  35. 2Plastilin: Должно работать для любого домена, но я не проверял.

    ОтветитьУдалить
  36. Супер, всё получилось, огромное спасибо) На 7 блогах уже видел подобную инструкцию, но ни по одной не получилось сделать) сейчас по рекламке вам покликаю ;)

    ОтветитьУдалить
  37. Спасибо за инструкцию!

    ОтветитьУдалить
  38. А сколько должно быть кликов прежде чем это облако начало действовать.Скрипт установил, но пока тишина.Уже имеется по одной ссылке 2 клика, по другой 1 клик.

    ОтветитьУдалить
  39. А это облако работает только с шаблоном Blogger — layout или какие-то другие то же подходят.Знаю точно, что у меня не классический шаблон, какой именно сказать не могу, потому что не знаю где смотреть.

    ОтветитьУдалить
  40. Привет. От кликов облако никак не зависит. Но обрати внимание на параметр cloudMin. Он указывает, какое минимальное количество постов с таким тегом должно быть, чтобы этот тег отображаться начал. Обязательно прочти этот пост, возможно, он тебе поможет.

    ОтветитьУдалить
  41. Большое спасибо. Все получилось, хотя по другим описаниям не выходило ничего!

    ОтветитьУдалить
  42. Воспользовалась Вашей инструкцией, всё получилось, работает. Спасибо огромное!

    ОтветитьУдалить
  43. ПОЛЬЗИТЕЛЬНО щас попробую спасибо не думал что ЭТО возможно !!

    ОтветитьУдалить
  44. Спасибо, я применила ваш метод в своем блоге

    ОтветитьУдалить
  45. а если обычный шаблон? :(

    ОтветитьУдалить
  46. Здравствуйте, не подскажете что могло случиться.
    До этого облако работало исправно но до недавнего времени...сейчас не отображается вовсе.

    ОтветитьУдалить
  47. Привет. Маловато информации. У меня, как видно, на блоге работает. Я сам делал облако по своей инструкции :-)

    Не менялся параметр cloudmin?

    И ещё. Я посмотрел ошибки при загрузке твоего (можно на ты?) блога. Есть одна, которая могла повлиять на поведение. Вот она

    Ошибка: missing ; before statement
    Источник: http://mandarinebeats.blogspot.com/
    Строка 1112, символ 14
    Исходный код:
    var theName = "Nathan "Flutebox" Lee";

    Попробуй вылечить это. Возможно, остальное заработает.

    ОтветитьУдалить
  48. P.S. Нужно вложенные кавычки убрать, либо заменить их на одинарные.

    ОтветитьУдалить
  49. Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
    Сообщение об ошибке в XML: The element type "b:section" must be terminated by the matching end-tag "". - вот что пишет( пробовал много раз, всё точно по инструкции, шаблон сменил на нестандартный, что делать?

    ОтветитьУдалить
  50. cloudmin менялся на 2 так как я думал может облако стало перегружено и неотображается изза этого...
    а можно попотробнее про "Ошибка: missing ; before statement
    Источник: http://mandarinebeats.blogspot.com/
    Строка 1112, символ 14
    Исходный код:
    var theName = "Nathan "Flutebox" Lee";

    Попробуй вылечить это. Возможно, остальное заработает."

    ОтветитьУдалить
  51. 1. попробуй сменить для начала cloudmin=1.

    2. по поводу ошибки. Попробуй убрать пост от 13 мая про Engine-EarZ. Его не нужно удалять, достаточно просто спрятать (пометить как черновик).

    Если эти меры не помогут заставить облако работать - будем думать дальше.

    ОтветитьУдалить
  52. 2hell4opt: попробуй выслать мне свой шаблон на lamer[на]tut.by. Поковыряю.

    ОтветитьУдалить
  53. Во блина))) заработало))))

    С этого поста по ходу глюки и пошли...а в чем блина проблема то?

    ОтветитьУдалить
  54. Ага. Ошибка была в тексте, браузер доходил до этой ошибки и прерывал загрузку страницы. Соответственно, скрипт, обрабатывающий облако, не загружался.

    Поправь текст поста, как я писал выше, и всё должно быть нормально.

    ОтветитьУдалить
  55. ого тут наспамил всякую чущь
    на самом то деле в инстркментах есть кучу фишек с тегами и не надо так заморачиваться

    ОтветитьУдалить
  56. Скажите, а это облако тегов индексируется поисковиками, и воспринимается как ссылки, или нет?

    ОтветитьУдалить
  57. Класс!! Благодарю за подробную инструкцию, все заработало :)

    Мне сейчас интересно, а что изменить, чтобы отсортировать теги не по частоте, а по алфавиту например?

    ОтветитьУдалить
  58. 2Тёма. Привет. Насколько я понимаю, поскольку облако строится JavaScript-ом, то индексировать его будет проблематично. В то же время, тэги однозначно учитываются при индексировании каждого поста. Все рекомендуют ставить виджет "Архив блога" для того, чтобы индексировались ссылки на посты и поисковик легко находил все посты блога с главной страницы. См. как это сделано у меня.

    ОтветитьУдалить
  59. 2Novomir: Дык у меня именно по алфавиту и сортируется...

    Делается это так. Заходишь в настройки получившегося виджета с облаком (виджет «Ярлыки», см. пункт 4 этого описания). Там есть настройка отображения - по частоте или по алфавиту.

    ОтветитьУдалить
  60. у меня вот тоже перестало облако тегов отображаться, не знаю даже в чём проблема :( раньше норм отображалось, потом взяло и пропало.. Lamer, не знаешь в чём мб проблема? мб в количестве тегов? их у меня достаточно на данный момент :)

    ОтветитьУдалить
  61. ps вот мой блог - http://hiphop-diary.blogspot.com/

    ОтветитьУдалить
  62. 2ex: Я посмотрел - у меня отображается твоё облако тегов. Вот как это выглядит у меня: #.

    ОтветитьУдалить
  63. Анонимный14.07.2009, 20:06

    Спасибо. Получилось!

    ОтветитьУдалить
  64. А у меня почему-то если открыть отдельные сообщения, облако пропадает(( т.е. на главной странице блога есть, а в постах нет(

    ОтветитьУдалить
  65. Катерина25.07.2009, 22:11

    А у меня на главной странице блога облако отображается, а в постах нет((

    ОтветитьУдалить
  66. Катерина, наверное, у тебя что-то с шаблоном. Или виджет куда-то не туда добавлен. Если бы ещё ты ссылочку на блог привела - можно было бы с большего попробовать посмотреть...

    ОтветитьУдалить
  67. Cпасибо все отлично сработало, давно пытался найти инструкцию !

    ОтветитьУдалить
  68. Lamer, спасибо я справилась)
    Но теперь другая проблема, из-за того что там какой-то сайт не работает, на котором хранились файлы для облака, оно постоянно просит скачать flash-плеер( Пока не знаю, как исправить ситуацию, надо альтернативную ссылку найти.

    ОтветитьУдалить
  69. Добрый день.
    Владимир у меня все работает..спасибо...отличная штука, но высвечивается одно название,как добавить тегов не знаю...подскажи пожалуйста.


    Спасибо.

    Сергей

    ОтветитьУдалить
  70. Добрый день.
    Заменил облако, спасибо. Прелесть.
    Подскажите как шрифт на белый поменять, где нужно заменить.

    Спасибо.
    sergeikobinskijj@yandex.ru
    http://globus-ks.blogspot.com/

    ОтветитьУдалить
  71. Спасибо еще раз! Меняла шаблон и опять воспользовалась Вашими рекомендациями - все работает!

    Sergei, ищите в коде HTML "mincolor" и "maxcolor" (если следовать этой инструкции - пункт 7) и меняете на (255,255,255). Ссылка на коды цветов: http://www.arininav.ru/js/colors.htm

    ОтветитьУдалить
  72. Добрый вечер.
    Поменял на 250 получилось что то ужасное огромные буквы.
    Не знаю что еще.
    Сайт:http://globus-ks.blogspot.com/
    sergeikobinskijj@yandex.ru
    Да еще подскажите пожалуйста как изменить квадратики внизу поста отправить сообщение по эл.почте. Там стоят коды ��
    Спасибо.

    ОтветитьУдалить
  73. Посмотрел твой блог, Сергей. Нормальный буковки, красивое облако... Я отсюда, из файрфокса, проблем не заметил...

    ОтветитьУдалить
  74. А в чём загвоздка? Без формулировки проблемы её сложно будет решить :-)

    Что из приведённой инструкции делалось? Что не получилось?

    ОтветитьУдалить
  75. А можно сделать так что бы ярлыки еще высвечивались!!!

    ОтветитьУдалить
  76. Это восклицание, утверждение или вопрос?

    ОтветитьУдалить
  77. Вопрос,Но Уже сделал другое облако!!!

    ОтветитьУдалить
  78. Анонимный07.03.2010, 21:50

    Просто отлично! Пошел уже делать...

    ОтветитьУдалить
  79. Спасибо за информацию.

    ОтветитьУдалить
  80. Только что устанвоил Облако буквально за 5 минут, благодаря такой инструкции замечательной. Спасибо огромное.

    ОтветитьУдалить
  81. Анонимный18.01.2011, 14:05

    Народ подскажите, как на narod.ru это поставить,а еще лудше через коструктор Сайткрофт.

    ОтветитьУдалить
  82. Скорее всего, на narod.ru никак. Здесь специфика Blogger-а.

    ОтветитьУдалить
  83. Анонимный20.02.2012, 17:32

    Подскажите люди, немогу найти:
    В коде HTML ищем строчку самого виджета «Ярлыки». Это будет строчка вроде такой:

    ОтветитьУдалить

Спасибо, что решили оставить комментарий. Ваше мнение очень важно.