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 коммент.:
-
Проверенно, Работает на этом блоге ;)
-
SUPER
-
Спасибо, мне как раз пригодилось. Давно искала как это можно сделать. Проверила на различных дизайнах- работает!!!
-
Спасибо, попробую, как раз на блог что-нибудь двигающиеся хотел.
-
А можно ли каким-то образом ограничить количество показываемых тегов?
-
в данном исполнии нет =(
И кстати всем, у кого перестало работать облако нужно обновить код. Читайте апдейт в сообщении! -
Я недавно здесь. И только начинаю разбираться. Обнако без тегов совершенно не удобно. Я не совсем поняла как это сделать. Со снежинками все ясно. Но там свой код вставляется. После добавления гаджета , открывается окно, предлагающее ввести HTML-код. И вот с этого момента не понятно. Какой же именно надо ввести для установки такого Flash-облака?
-
Anais, тут код вставляется не как виджет, а непосредственно в шаблон блога.
Т.е. Вам нужно из панели инструментов перейти в "макет" вашего блога, а уже там выбрать вкладку "Изменить HTML" -
Спасибо за оптимизацию виджета! Оно (облако) работает :-)
-
Спасибо! Кажется получилось. Работает даже без доп.изменений. Проблема лишь в том, что у меня он (шаблон) узкий какой-то и облако поэтому отображается не полностью. Маловато места для него, видимо. Как расширить - пока не знаю. Но оно вертится! =) И еще. Хотелось бы там цвета поменять: голубой на темно-зеленый (к примеру) - он более соответствует моему дизайну, а код не знаю Где найти коды цветов, не подскажите?
-
Anais, в конце описания написаны настройки олака, в том числе и цветов текста ;)
-
Всё работает,большое спасибо,недолго искал,сразу на ваш блог наткнулся.
-
Спасибо, само облако работает, но когда меняю цвета flashvars.tcolor и flashvars.tcolor2 то ссылки вообще черные становятся, в чем дело ?
-
Большое спасибо, работает отлично!
-
Спасибо огромное! Давно хотел узнать как это делается!
-
Макс, по поводу цвета flashvars.tcolor и flashvars.tcolor2, чтобы ссылки не становились черными, указывайте значение цвета не как RRGGBB, а именно так, как в оригинале: 0хRRGGBB, не забывая в начале "0х"
Найдите в шаблоне строчку:
flashvars.hicolor = "..."
и между квотами впишите нужный цвет с нулём в начале. -
как сделать так, чтобы браузер отображал код HTML в тексте, как обычный текст, есть ли какие-то теги? я уже замоталсо искать их!
-
вставить изображение в облако нельзя.
То что Вы видите по ссылке лишь отпический обман: это изображение является лишь фоном облака. -
ну да я знаю, а как сделать етот оптический обман?
-
Класно!У меня тоже получилось.
-
Уррряяя!наконецто у меня получилось=))пол дня убил на эти облака тегов =)но всеже получилось))афтору риспект! спасибо=))
-
Огромное спасибо Экономит место и очень функциональная вещь
-
Огромное спасибо за материал!!!
Все получилось, работает. -
Спасибо! Все получилось!! Только вот места не хватает в классическом шаблоне, следовательно такое пожелание - как можно расширить границы шаблона?
- Этот комментарий был удален администратором блога.
-
Перестало работать облако меток. ;-(
-
у меня ничего не получается, кнопочку выдает Адобе флэш плеер и все.
-
Работало все отлично.. но где-то уже месяц тоже перестало работать... тоже показывает только кнопку Get Adobe Flash Player... http://lavif.blogspot.com/ Что делать??? Спасибо!
-
такая же фигня...
-
У меня не все разделы показывает в некоторых пусто)
