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

четверг, 22 января 2009 г.

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


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


Далее из макета Блога переходим к изменению "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 Облака тегов.


Пробуйте на своих блогах, в случае чего оставляйте сообщения в комментариях.

30 коммент.:

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

Проверенно, Работает на этом блоге ;)

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

SUPER

Причуда комментирует...

Спасибо, мне как раз пригодилось. Давно искала как это можно сделать. Проверила на различных дизайнах- работает!!!

Пузат в линкомаулия комментирует...

Спасибо, попробую, как раз на блог что-нибудь двигающиеся хотел.

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

А можно ли каким-то образом ограничить количество показываемых тегов?

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

в данном исполнии нет =(
И кстати всем, у кого перестало работать облако нужно обновить код. Читайте апдейт в сообщении!

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

Я недавно здесь. И только начинаю разбираться. Обнако без тегов совершенно не удобно. Я не совсем поняла как это сделать. Со снежинками все ясно. Но там свой код вставляется. После добавления гаджета , открывается окно, предлагающее ввести HTML-код. И вот с этого момента не понятно. Какой же именно надо ввести для установки такого Flash-облака?

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

Anais, тут код вставляется не как виджет, а непосредственно в шаблон блога.
Т.е. Вам нужно из панели инструментов перейти в "макет" вашего блога, а уже там выбрать вкладку "Изменить HTML"

Елена комментирует...

Спасибо за оптимизацию виджета! Оно (облако) работает :-)

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

Спасибо! Кажется получилось. Работает даже без доп.изменений. Проблема лишь в том, что у меня он (шаблон) узкий какой-то и облако поэтому отображается не полностью. Маловато места для него, видимо. Как расширить - пока не знаю. Но оно вертится! =) И еще. Хотелось бы там цвета поменять: голубой на темно-зеленый (к примеру) - он более соответствует моему дизайну, а код не знаю Где найти коды цветов, не подскажите?

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

Anais, в конце описания написаны настройки олака, в том числе и цветов текста ;)

Алексей комментирует...

Всё работает,большое спасибо,недолго искал,сразу на ваш блог наткнулся.

Макс комментирует...

Спасибо, само облако работает, но когда меняю цвета flashvars.tcolor и flashvars.tcolor2 то ссылки вообще черные становятся, в чем дело ?

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

Большое спасибо, работает отлично!

Владимир комментирует...

Спасибо огромное! Давно хотел узнать как это делается!

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

Макс, по поводу цвета flashvars.tcolor и flashvars.tcolor2, чтобы ссылки не становились черными, указывайте значение цвета не как RRGGBB, а именно так, как в оригинале: 0хRRGGBB, не забывая в начале "0х"

Найдите в шаблоне строчку:
flashvars.hicolor = "..."
и между квотами впишите нужный цвет с нулём в начале.

Евгений Синяков комментирует...

как сделать так, чтобы браузер отображал код HTML в тексте, как обычный текст, есть ли какие-то теги? я уже замоталсо искать их!

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

вставить изображение в облако нельзя.
То что Вы видите по ссылке лишь отпический обман: это изображение является лишь фоном облака.

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

ну да я знаю, а как сделать етот оптический обман?

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

Класно!У меня тоже получилось.

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

Уррряяя!наконецто у меня получилось=))пол дня убил на эти облака тегов =)но всеже получилось))афтору риспект! спасибо=))

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

Огромное спасибо Экономит место и очень функциональная вещь

Ирина Валентиновна Жакулина комментирует...

Огромное спасибо за материал!!!
Все получилось, работает.

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

Спасибо! Все получилось!! Только вот места не хватает в классическом шаблоне, следовательно такое пожелание - как можно расширить границы шаблона?

Анонимный комментирует...
Этот комментарий был удален администратором блога.
Boholik комментирует...

Перестало работать облако меток. ;-(

Елена комментирует...

у меня ничего не получается, кнопочку выдает Адобе флэш плеер и все.

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

Работало все отлично.. но где-то уже месяц тоже перестало работать... тоже показывает только кнопку Get Adobe Flash Player... http://lavif.blogspot.com/ Что делать??? Спасибо!

Лариса Нефёдова комментирует...

такая же фигня...

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

У меня не все разделы показывает в некоторых пусто)

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