Flash Облако тегов

В одной из первых статей этого блога описывалось как можно сделать облако тегов.

Сейчас я вам предлагаю сделать Flash Облако тегов (которое в отличии от аналогов поддерживает кириллицу) . При этом Темы будут отображаться разными цветами - в зависимости от количества сообщений, которые будут им соответствовать. Теги находящиеся в нём будут беспорядочно крутиться.

Во-первых необходимо добавить Гаджет "Ярлыки" (Labels). Для этого переходим в "Макет" >>> "Элементы страницы" и добавляем видеж "Ярлыки".

Далее из макета Блога переходим к изменению "HTML" шаблона, ставим галочку "Расширить шаблоны виджета"

С помощью поска в браузере находим следующий код:

<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 Облака тегов.