Показаны сообщения с ярлыком Облако тегов. Показать все сообщения
Показаны сообщения с ярлыком Облако тегов. Показать все сообщения

Flash облако тегов для Blogger

среда, 14 марта 2012 г.
17 Комментов

Наши читатели помнят когда мы предложили им создать анимированное Flash облако меток для своих блогов на платформе Blogger. Но уже давно это облако у многих перестало работать и сегодня мы предложим быстрый и очень простой способ установить функциональное и легко настраиваемое Flash облако тегов на ваши блоги!

Новое облако меток (тегов) стало гораздо функциональнее:
  • его легко установить за пару минут; 
  • можно менять его оформление прямо из окна настроек гаджета; 
  • работает на русских и английских блогах благодаря мультиязычности;
Установка Flash облака меток:
Для начала зайдите в панель управления блога >> далее перейдите на вкладку "Дизайн" >> Выберите сайдбар или другое место, где Вы хотите установить облако меток и нажмите "Добавить гаджет".

В открывшемся окне "Добавить гаджет" нажмите на вкладку "Добавьте свой собственный"
На вкладке “Добавьте свой собственный” в пустую строку "URL гаджета" введите:
http://b-cumulus.googlecode.com/svn/tags/3.0/b-cumulus.xml
и нажмите на кнопку “Добавить по URL”.
Теперь откроется окно настрое гаджета, т.е. как будет выглядеть облако меток в Вашем блоге:
Настройки Flash облака меток:
Название – заголовок гаджета.

  • Высота – высота гаджета.
  • Высота облака – высота облака в пикселях.
  • Эта величина должна быть не меньше высоты гаджета, иначе облако будет видно не полностью.
  • Ширина облака – ширина облака меток в пикселях.
  • Минимальный размер шрифта – минимальный размер шрифта метки, т.е. размер шрифта метки с минимальным весом.
  • Максимальный размер шрифта – максимальный размер шрифта самой популярной метки.
  • Цвет меток с минимальным весом – цвет самой редко используемой метки.
  • Цвет меток с максимальным весом – цвет самой популярной метки. Для остальных меток будет выбран цвет на линейке между этими двумя цветами.
  • Цвет подсвеченных меток – цвет метки под курсором мыши, при наведении курсора на метку.
  • Скорость вращения – скорость вращения облака.
  • Цвет фона – цвет фона облака меток.
  • Прозрачный фон – устанавливает прозрачный фон облака меток.
  • Показывать вес меток – показывать рядом с меткой сколько раз она использовалась. 
В последующем вы сможете менять эти настройки из панели управления Blogger. Не забывайте подписаться на блог и оставлять свои комментарии и свои замечания!

Ярлыки: , , , ,

Обновление Flash облака тегов!

воскресенье, 15 февраля 2009 г.
20 Комментов

Возможно Вы уже заметили, что Flash облако тегов не работает или работает некорректно.
Мы снова обновили облако тегов для Blogger, теперь его можно установит за пару кликов: Читайте инструкцию в новой записи тут! Я этого не заметил мне подсказала Причуда, за что ей огромное спасибо!


Необходимые изменения в код виджета были внесены незамедлительно:
Настоятельно рекомендую обновить облако по инструкции ниже, даже, если у вас все работает!!!


Чтобы обновить свое облако Вам необходимо отредактировать шаблон блога (Панель инструментов >>> Макет >>> Изменить HTML и не забудьте поставить галочку "Расширить шаблоны виджета"), а именно:
с помощью поиска найти в коде:
http://rublezoid.googlepages.com/swfobject-21.js
и заменить на:
http://forum.wafl.ru/files/freeman/swfobject.js
потом найти:
http://rublezoid.googlepages.com/tagcloud.swf
и заменить на:
http://forum.wafl.ru/files/freeman/tagcloud.swf
после чего сохранить изменения и проверить работоспособность свежего облака тегов ;) Мы снова обновили облако тегов для Blogger, теперь его можно установит за пару кликов: Читайте инструкцию в новой записи тут!

Ярлыки: ,

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

четверг, 22 января 2009 г.
30 Комментов

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


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

Ярлыки: , , , ,

Облако тегов для Blogger

среда, 24 декабря 2008 г.
6 Комментов

Уже на притяжении долгого времени блоггеры, использующие в качестве платформы для постинга "WordPress" имеют на своих страницах так называемые "Облака Тегов", которые по своей сути являются обыкновенном списком тем, только в более оригинальном и привлекательномом исполнении.


tagcloud
Так вот в сегодняшней статье хотелось бы рассказать, как путем некоторых манипуляций с шаблоном Вашего блога можно добавить подобный виджет и на страницы Blogger ;-)


Процесс это довольно таки кропотливый и трудоемкий =/ Но результат обязательно порадует Вас и ваших читателей ;-)


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


Теперь необходимо добавить виджет "Ярлыки" (Labels) на блог, если у Вас уже есть этот виджет, то повторять этого, конечно же, не стоит). Для этого переходим в "Макет" >>> "Элементы страницы" и добавляем видеж "Ярлыки" подобно тому, как мы добавляли "HTML/JavaScript", когда "заснеживали" Blogger.
Теперь приступаем к самому важно, тут уже ошибаться не стоит, инече последуют неприятные последствия(
Из макета Блога переходим к изменению "HTML" шаблона (не забудьте поставить галочку "Расширить шаблоны виджета)":
С помощью поска в браузере находим следующий код:
]]></b:skin>
и непосредственно перед ним вставляем:
/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
а уже после кода ]]></b:skin> вставьте:
<script type='text/javascript'> 
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
теперь предстоит заменить старый виджет Ярлыков на новый, для этого в коде шаблона найдите код подобный тому что ниже:
<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='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>

  <div class='widget-content'>
  <div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
      if(a&gt;b){
          var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
             }
      else{
          var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
          }
      return v
   }


var c=[];
var labelCount = new Array(); 
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
     if (!labelCount[ts[t]]){
           labelCount[ts[t]] = new Array(ts[t])
           }
        }
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
    if(ts[t] &lt; cloudMin){
       continue;
       }
    for (var i=0;3 &gt; i;i++) {
             c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
              }     
         var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
         li = document.createElement('li');
         li.style.fontSize = fs+'px';
         li.style.lineHeight = '1';
         a = document.createElement('a');
         a.title = ts[t]+' Posts in '+t;
         a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
         a.href = '/search/label/'+encodeURIComponent(t);
         if (lcShowCount){
             span = document.createElement('span');
             span.innerHTML = '('+ts[t]+') ';
             span.className = 'label-count';
             a.appendChild(document.createTextNode(t));
             li.appendChild(a);
             li.appendChild(span);
             }
          else {
             a.appendChild(document.createTextNode(t));
             li.appendChild(a);
             }
         ul.appendChild(li);
         abnk = document.createTextNode(' ');
         ul.appendChild(abnk);
    }
  lc2.appendChild(ul);   
</script>

<noscript>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <data:label.name/>
        <b:else/>
          <a expr:href='data:label.url'><data:label.name/></a>
        </b:if>
        (<data:label.count/>)
      </li>
    </b:loop>
    </ul>
</noscript>
    <b:include name='quickedit'/>
  </div>

</b:includable>
</b:widget>
Теперь сохраниет шаблон и посмотрите наличие Облака тегов на странице блога.


Ниже для тех, кто хочет поэкспериментировать с цветами, шрифтами и прочеми параметрами привожу основные данные в введенном нами коде.

var maxFontSize = 20;
 var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
эти значения указывают на максимальны и минимальный размер шрифта в облаке, а также на градации его цвета в формате RGB.
var cloudMin= 1;
данная переменная указывает на необходимое количество статей с одним и тем же тегом, что бы он попал в облако.
var lcShowCount = false;
это параметр (false - по умолчание, изменимо на true) показывает, что теги выводятся без указания количества статей с одинаковым тегом.


есть еще несколько не столь важных параметров, которые можно изменить, если пожелаете узнать о них поподробнее, я обязательно о них расскажу ;)

Ярлыки: , , , ,