Облако тегов на blogger

Гаджет,который позволяет добавлять на blogger.com облако тегов. Поддерживает кириллицу. Теги в облаке отображаются разными цветами,в зависимости от количества записей с данным ярлыком.





  1. Добавить гаджет "Ярлыки" из стандартных на blogger. Для этого переходим "Дизайн"-"Элементы страницы"- "Добавить гаджет"-"Ярлыки"
  2. Переходим в раздел "Изменить HTML"


  3. Запускаем поиск браузера (CTRL+F) и ищем код





<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'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>
          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </b:if>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
    </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
И заменяем его на:


<b:widget id='Label99' locked='false' title='Темы' type='Label'>
  <b:includable id='main'>
    <b:if cond='data:title'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <script type="text/javascript" src="http://forum.wafl.ru/files/freeman/swfobject.js"></script>
      <script type="text/javascript">
        var flashvars = {};
        flashvars.mode = "tags";
        flashvars.minFontSize = "8";
        flashvars.maxFontSize = "22";
        flashvars.tcolor = "0x0988ff";
        flashvars.tcolor2 = "0x000000";
        flashvars.hicolor = "0xd95800";
        flashvars.distr = "true";
        flashvars.tspeed = "100";
        flashvars.tagcloud = "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' expr:style='data:label.count'><data:label.name/></a></b:loop></tags>";
        var params = {};
        params.wmode = "transparent";
        params.bgcolor = "#333333";
        params.allowscriptaccess = "always";
        var attributes = {};
        attributes.id = "b-cumulus";
        attributes.name = "tagcloud";
        swfobject.embedSWF("http://forum.wafl.ru/files/freeman/tagcloud.swf", "b-cumulus", "300", "250", "9.0.0", false, flashvars, params, attributes);
      </script>
      <div id="b-cumulus">
        <a href="http://www.adobe.com/go/getflashplayer">
          <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
        </a>
      </div>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>



Облако тегов можно настроить в соответствии с оформлением вашего блога. Для этого в выше указанном коде можно изменять следующие параметры:





  • в строке "swfobject.embedSWF("http://FILE_HOST_NAME/tagcloud.swf", "b-cumulus", "300", "250", "9.0.0", false, flashvars, params, attributes); " 300 - это ширина виджета в пикселях. 250 - это высота виджета в пикселях.
  • flashvars.minFontSize = “8“; - минимальный размер шрифта.
  • flashvars.maxFontSize = “22“; - максимальный размер шрифта.
  • flashvars.tcolor = “0xffffff“; - цвет самого редкого ярлыка.
  • flashvars.tcolor2 = “0×0be4f8“; - цвет самого популярного ярлыка. Для остальных ярлыков будет выбран цвет между этими двумя.
  • flashvars.hicolor = 0xd95800- цвет текста при наведении курсора на ярлык.
  • flashvars.tspeed = “100“; - скорость вращения Flash Облака тегов
  • //params.wmode = “transparent“; - этот параметр обозначает прозрачный фон.
  • params.bgcolor = “#333333“; - цвет фона Flash Облака тегов.

10 коммент.:

buxip@bk.ru комментирует...

Забыли сказать что нужно отметить галкой "Расширить шаблоны виджета" вероятно этот пост не для тех кто в танке - не сразу смекнул.

akiobre комментирует...

вопрос: при установке данного кода отображжается картинка: Get Adobe Flash player. Я нуб.
После указания путей для файлов с хостинга выползает просто белая картинка. Как сделать красивое облако, хелп)))

Анна комментирует...

у меня тот же вопрос, выползает адоб

lina комментирует...

спасибо за замечание.
будем решать эту проблему.

Дмитрий46 комментирует...

Вы бы прежде чем тут эту статью писать, сами проверили бы работает облако или нет!!
Вылазает адоб и просит, чтоб установили его. Я вообще не понимаю, что в коде делает ссылка на установку флэш плейера? Добивают люди, которые пишут то, чего сами не проверяли! И этот тупой код на многих сайтах/блогах выложен, и нигде не пашет облако.

Люда комментирует...

а где сами теги при постинге раставлять ?

KliKoMEN комментирует...

OmG..

Андрей Кочерга комментирует...

А было бы классно.. Эх

Ирина Непогодова комментирует...

Спасибо! Все установилось с первого раза! Красиво смотится рядом с гаджетом "изменить величину текста", за который тоже огромное спасибо!

Исцелинка, Свет во тьме комментирует...

nope, не пашет

Отправить комментарий