Пятница, 26.04.2024, 23:37
Приветствую Вас Гость

PhotoshopBook

Меню сайта

Категории каталога

Web [7]

Текст [1]

Кисти [1]

Фото [3]

Фото эффекты [9]

Основы Photoshop [4]

Наш опрос

Главная » Статьи » Уроки Photoshop » Web

Может не в тему, но очень нужный урок для Web-мастеров

Сегодня я бы хотел описать способ, который позволит Вам добавить в свой блог 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 Облака тегов.

Для сайтов системы Ucoz нужно:

Установка:
1. Скачайте http://photoshopbook.ucoz.ru/lesons/Flash/tagcloud.rar
2. Распакуйте архив и его содержимое (swfobject.js и tagcloud.swf) закачайте на свой сайт (можно в любую папку).
3. Затем в том месте, где будет облако на сайте вставьте код:


$MYINF_1$


<div id="yoblako" align="center">$MYINF_1$</div>

<script type="text/javascript" src="http://адрес_Вашего_сайта/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.mode = 'tags';
flashvars.minFontSize = '8';
flashvars.maxFontSize = '14';
flashvars.tcolor = '0x1D3D61';
flashvars.tcolor2 = '0x4D6D91';
flashvars.hicolor = '0xd193978';
flashvars.distr = 'true';
flashvars.tspeed = '100';

eTagz = document.getElementById('yoblako').getElementsByTagName('A');
flashvars.tagcloud = '<tags>';
for (var i=0; eTagz[i]; ++i) flashvars.tagcloud += '<a href=\'' + eTagz[i].getAttribute('href')
+ '\' style=\'' + parseInt(eTagz[i].style.fontSize)
+ '\'>' + eTagz[i].innerHTML + '</a>';
delete eTagz;
flashvars.tagcloud += '</tags>';
var params = {};
params.wmode = 'transparent';
params.bgcolor = '#FFFFFF';
params.allowscriptaccess = 'always';
var attributes = {};
attributes.id = 'yoblako';
attributes.name = 'tagcloud';
swfobject.embedSWF('http://адрес_Вашего_сайта/tagcloud.swf', 'yoblako', '250', '200', '9.0.0', false, flashvars, params, attributes);
</script>

В коде замените "адрес_Вашего_сайта" на координаты файлов у Вас на сайте.

Теперь немного о самом коде:
Настройки кода:
*в строке swfobject.embedSWF('http://адрес_вашего_сайта/tagcloud.swf', 'yoblako', '250', '200', '9.0.0', false, flashvars, params, attributes);
250 - это высота виджета в пикселях. 200 - это ширина виджета в пикселях.

*flashvars.minFontSize = "8"; - минимальный размер шрифта.
*flashvars.maxFontSize = "14"; - максимальный размер шрифта.
*flashvars.tcolor = "0xffffff"; - цвет самого редкого ярлыка.
*flashvars.tcolor2 = "0x0be4f8"; - цвет самого популярного ярлыка. Для остальных ярлыков будет выбран цвет между этими двумя.
*flashvars.hicolor = "0xd95800"; - цвет текста при наведении курсора на ярлык.
*flashvars.tspeed = "100"; - скорость вращения Flash Облака тегов
*params.wmode = "transparent"; - этот параметр обозначает прозрачный фон.
*params.bgcolor = "#333333"; - цвет фона Flash Облака тегов.

Применяя условный оператор для $USER_AGENT$='ie' && $USER_AGENT_VER$<7 - запрещаем выводить флеш-облако для версии IE ниже 7 (для этих пользователей будет отображаться обычное текстовое облако).
$MYINF_1$ - это ссылка на ваш информер соответствующий облаку тегов юКоза, измените цифру, если необходимо.

Категория: Web | Добавил: Admin (27.05.2009) | Автор: Алексей Александрович