К основному контенту

Облако тэгов в Блоггер

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


Итак приступим к созданию своего облака тегов.
Для начала необходимо добавить в свой блог гаджет, “Ярлыки”(“Labeles”) в том месте где вы хотите в будущем увидеть свое облако тегов.
облако тегов для блоггерВ первую очередь хочу рассказать о облаке тегов в виде вращающегося шара. Для того чтобы он работал вам необходимо скачать и залить на свой хостинг некоторые фалы. Скачать файлы архивом можноздесь.
1. Скачайте и разархивируйте файл. В архиве содержаться два файла которые необходимо залить на свой хостинг. О том где найти бесплатные хостинги я писал в статьях“Бесплатный хостинг или где хранить файлы для блоггер”, а так же “Бесплатный хостинг на 2гб от DropBox” , а так же могу посоветовать еще один бесплатный хостингFileave. Залив файлы на свой хостинг и получив на них ссылки можем двигаться дальше.
2. Заходим в настройки блога Дизайн/Изменить HTML нажимаемрасширить шаблон и ищем следующий тег:
<b:section class='sidebar' id='sidebar' preferred='yes'>
Либо другую строчку которая открывает гаджеты в подвале блога или шапке.
Сразу после открывающего тега для гаджетов вставляем скрипт облака тегов:
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='ссылка на файл swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://ссылка на файл tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
В данном скрипте необходимо изменить пути к файлам на вашем хостинге. А именно:
src='ссылка на файл swfobject.js'
http://ссылка на файл tagcloud.swf
После чего ваше облако тегов должно заработать. В данном скрипте вы можете изменять параметры вашего облака. Для этого найдите строчки и значения после тегов maxFontSize, maxColor и minFontSize, minColor. Строки с началом min редактируют теги меньшего размера, а max большего. Размер тегов зависит от частоты повторения их на вашем блоге. Стоит заметить, что цвет шрифта тегов изменяется в RGB режиме, для того чтобы правильно подобрать цвет можете воспользоваться программой ColorPic о кторой я писал в статье“Изменяем цвет шапки шаблона” и “Создаем уникальную шапку шаблона”, скачать ее можно здесь. Так же можно воспользоваться сайтом tayloredmktg.
Теперь о том как создать стандартное облако тегов.
Для этого так же необходимо зайти в настройки вашего блога, а именно Дизайн/Изменить HTML и нажать расширить шаблон.
Затем использую поиск (ctrl + f) находим следующую строчку:
]]></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}
а после этого тега вставляем этот скрипт:
<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>
Как вы видите в этом гаджете так же встречаются теги
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
А значит вы также можете изменять цвета шрифтов в облаке тегов с помощью RGB  кодирования.
Теперь необходимо заменить гаджет “Ярлыки” на новый. Для этого ищем его в теле шаблона далее:
<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>
Теперь можно сохранить шаблон и проверить работает ли облфко тегов.
Процедуры не из простейших,  так что советую сохранить ваш шаблон на компьютер перед началом действий, а так же не стесняйтесь писать в комментариях свои вопросы, если что-то не получилось.

Комментарии

  1. Здравствуйте! Все сделал как Вы советовали,но ярлыков нет. Есть гаджет, он получился,тот, второй. Может это связано с тем, что нужно было следовать Вашим советам в первой части? Ну, там, типа, хостинг, заливка и т. д.? Подскажите. Я стараюсь следовать Вашим советам, что-то получилось,а что-то нет. Усиленно изучаю Ваши публикации. Даже стал Вашим постоянным читателем. Спасибо за советы. Они того стоят.

    ОтветитьУдалить
  2. Эта статья писалась очень давно. Сейчас Вы можете добавить такой гаджет облако тегов просто в настройках блоггер.

    ну и конечно надо залить java скрипты на свой хостинг а потом в коде вставить на них ссылки.
    Сейчас проверю возможно ли скачать их еще или уже нет.

    ОтветитьУдалить
  3. Легче Вам написать что конкретно Вы хотите получить я объясню Вам как это сделать в статье..
    Блоггер с каждым днем упрощается, то что раньше надо было в муках делать сейчас зачастую можно сделать парой кликов.

    ОтветитьУдалить
  4. Согласен с Вами, что такой гаджет есть и он был у меня. Но, вот, не догадался превратить его в облако. Впрочем, пытался, но не получилось. Ведь я со многими вещами незнаком. Но все равно, благодаря Вам у меня вчера, наконец-то, что-то получилось. Не беспокойтесь, я не унываю.Видно, я еще не дошел до хостинга. Пока кручусь на одном месте, конечно же, только по своему незнанию. Кстати, я очень долго искал сайт или блог, который бы мне помог и, думаю, что на ближайшее время я его нашел. Спасибо за быстрый ответ и помощь.

    ОтветитьУдалить
  5. Кажется, что-то получилось! Спасибо за подсказку.

    ОтветитьУдалить
  6. когда гаджет Ярлыки ставите в настройках можно выбрать "В виде облака" но оно не будет двигать но будет облако=)

    ОтветитьУдалить
  7. Да, Вы правы, мои ярлыки абсолютно неподвижны. Конечно,хотелось, чтобы они двигались, но этого я пока не достиг. Что-то надо еще сделать? Подскажите, если не трудно.

    ОтветитьУдалить
  8. Написал статью. Новую, там просто надо вставить приведенный скрипт и все заработает!!!

    ОтветитьУдалить

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

Популярные сообщения из этого блога

Как сделать ссылку на определенную часть той же страницы.

Все блоггеры пользуются ссылками практически в каждой статье, помимо удобства это еще и очень полезно для индексации блога. Сегодня хотел бы описать как сделать ссылку на туже страницу на которой находится Ваш читатель, только ниже, либо Выше, допустим Ваша статья состоит из нескольких частей и читатель, хочет пропустить первую и перейти сразу ко второй. Сделать это достаточно просто! 1.Для начала нам необходимо присвоить определенной части текста “Якорь”, допустим Вы хотите ссылать на каую-либо часть статьи, перед началом необходимого участка текста вставьте в HTML коде статьи следующий тег : <a id=" yakor "></a> Начало текста или заголовка В качестве слова якорь выделенного красным вы можете использовать любое другое, подходящее по смыслу. 2. Теперь необходимо сделать ссылку на данный якорь. А именно в HTML коде страницы перед словом которое должно быть ссылкой ставим тэг вида: <a href="# yakor ">Слово</a> Покажу как это долж

Добавляем красивый гаджет Поделиться

Если Вы регулярно совершенствуете свой блог, то Вам пригодится данная не сложная публикация, о том как добавить красивую кнопку "Поделиться". Ее особенность в том, что при наведение курсора она раскрывается и предлагает несколько сервисов в которых можно разместить ссылку на Ваш блог. Демо можно посмотреть тут!

Открыть несколько ссылок одним кликом мыши

Многие из Вас наверняка встречали сайты, на которых нажав на одну ссылку открывается сразу несколько сайтов. Так делают те кто хочет прорекламировать независимый интернет ресурс, в таком случае открывается ссылка по которой вы должны перейти и еще одна, так-же это делают для увеличения просмотров определенных страниц на сайте, либо если действительно необходимо открыть сразу две ссылки. Для обычного блоггера это может быть полезным так как заинтересовав человека одной ссылкой Вы как бы повышаете популярность Вашего ресурса, так как он посетит вместо одной страницы в Вашем блоге сразу несколько. Чтобы вставить такую ссылку необходимо к тексту добавить следующий код: <a href="http://www.ссылка1.com/" target="_blank" onmouseover="window.open(&quot;&quot;http://www.ссылка2.com&quot;&quot;);window.open(&quot;&quot;http://www.ссылка3.com&quot;&quot;);">Click Here Link Bucket</a>   Вставьте свои ссылки, увеличьт