Урок_7_Oblako_tegov

Жакулина И.В., учитель начальных классов МОУ-СОШ № 23 г.Чапаевска Самарской обл.
Создание виджета «Flash Облако тегов» для блога
В блоге «БелиберDA» я познакомилась с новым интерактивным виджетом «Flash Облако
тегов». Данный виджет поддерживает кириллицу, отображается разными цветами в
зависимости от количества сообщений, которые будут им соответствовать.
http://www.itn.ru/communities.aspx?cat_no=127385&d_no=130134&ext=Attachment.asp
x?Id=45486
Технология вставки виджета «Flash Облако тегов»:
1. Необходимо чтобы на Вашем блоге был установлен виджет «Ярлыки» (Labels).
Если он не установлен, нужно войти в панель управления блогом. Перейти на вкладку
«Макет» или «Элементы страницы». Левой кнопкой мыши кликаем по «Добавить
ганджет» и добавляем новый виджет «Ярлыки» (Labels).
Жакулина И.В., учитель начальных классов МОУ-СОШ № 23 г.Чапаевска Самарской обл.
Далее из вкладки «Макет» переходим на вкладку «Изменить HTML».
В разделе «Зарезервировать/восстановить шаблон» щёлкаем по ссылке «Загрузить
весь шаблон» и сохраните текущий шаблон на жёстком диске своего компьютера.
Ставим галочку «Расширить шаблоны виджета».
Жакулина И.В., учитель начальных классов МОУ-СОШ № 23 г.Чапаевска Самарской обл.
2. С помощью поиска в браузере (нажимаем одновременно сочетания клавиш
клавиатуры 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>
Жакулина И.В., учитель начальных классов МОУ-СОШ № 23 г.Чапаевска Самарской обл.
</b:includable>
</b:widget>
3. Заменяем его на:
<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">
Жакулина И.В., учитель начальных классов МОУ-СОШ № 23 г.Чапаевска Самарской обл.
<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>
4. Облако тегов можно настроить в соответствии с оформлением Вашего блога. Для
этого в выше указанном коде можно изменять следующие параметры:

в строке "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 Облака тегов.
Жакулина И.В., учитель начальных классов МОУ-СОШ № 23 г.Чапаевска Самарской обл.
5. После внесения изменения переходим в режим предварительного просмотра.
6. Если нужно, вносим дополнительные изменения в размерах виджета.
7. Сохраняем шаблон. Переходим на свой блог.
Используемый ресурс:
http://beliber-da.blogspot.com/2009/01/flash.html блог «БелиберDA»