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

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

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

Поэтому вижу необходимым освежить статью, и сделать все хоть чуть-чуть проще. Итак как создать анимированное облако тегов в блоге на блогспот:
1. ДА желательно залить скрипт на свой хостинг, или бесплатный хостинг или еще куда-то, но так же можно просто вставить код приведенный ниже и все будет работать, однако возможно не надежно. О бесплатных хранилищах для файлов блоггер я писал в статьях : Бесплатный хостинг или где хранить файлы для блоггера, Бесплатный хостинг для блоггер.
Файл скачать можно тут.
2. Зайдите в настройки блоггер, в раздел Шаблон, нажмите изменить HTML, отметьте галочкой Расширить шаблон.
3. Используя Ctrl+f найдите следующий тэг:
<b:section class='sidebar' id='sidebar' preferred='yes'>
4. Сразу после данного тэга вставьте приведенный ниже скрипт:
<b:widget id='Label99' locked='false' title='b-cumulus test' type='Label'>
<b:includable id='main'>
    <b:if cond='data:title'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <script src='http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject_src.js' type='text/javascript'/>
      <script type='text/javascript'>
  var flashvars = {
   mode: &quot;tags&quot;,
   minFontSize: &quot;6&quot;,
   maxFontSize: &quot;22&quot;,
   showTagWeight: &quot;true&quot;,
   tcolor: &quot;0x0be4f8&quot;,
   tcolor2: &quot;0x0be4f8&quot;,
   hicolor: &quot;0xffffff&quot;,
   distr: &quot;distr&quot;,
   tspeed: &quot;100&quot;,
   tagcloud: &quot;<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>&quot;
  };
  var params = {
   //wmode: &quot;transparent&quot;,
   bgcolor: &quot;#333333&quot;,
   allowscriptaccess: &quot;always&quot;
  };
  var attributes = {
   id: &quot;b-cumulus&quot;,
   name: &quot;tagcloud&quot;
  };
  swfobject.embedSWF(&quot;http://denzelion.nextmail.ru/tagcloud.swf&quot;, &quot;b-cumulus&quot;, &quot;300&quot;, &quot;250&quot;, &quot;9.0.0&quot;, false, flashvars, params, attributes);
      </script>
      <div id='b-cumulus'>
        <a href='http://www.adobe.com/go/getflashplayer'>
          <img alt='Get Adobe Flash player' src='http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif'/>
        </a>
      </div>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>

Все должно заработать. Если нет хостинга просто не загружайте файл никуда, используйте приведенный выше скрипт, однако за надежность не отвечаю-может вылетать.
Если же вы решили чтобы файлы хранились у Вас на хостинге то залейте их и укажите вместо моей ссылки выделенной красным
Теперь если у Вас не влазит облако тэгов в поле гаджета, то изменяйте следующие параметры:
300 – ширина
250 – высота
Готово!

Комментарии

  1. Здравствуйте! Спасибо за статью. У меня появилась еще одна попытка привести в исполнение Ваши рекомендации относительно создания анимированного облака тегов. Однако, как мне думается, что это может занять у меня немало времени.Тем не менее, буду стараться.

    ОтветитьУдалить
  2. просто скопируйте код вставьте его и все заработает.хостинг тут не нужен)

    ОтветитьУдалить
  3. А у меня почему-то такой строчки вообще нет(((
    <b:section class='sidebar' и тд.
    "Расширить шаблон" нажимала

    ОтветитьУдалить
  4. ищите просто sidebar , может код по другому у Вас выглядит!

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

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

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

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

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

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

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

Добавляем простой и удобный поиск по блогу на blogger

Всем известно, что большинство шаблонов Blogger идут без поиска по блогу. Это огромный минус, если Вы хотите сделать Ваш блог максимально удобным. Конечно есть стандартный поиск от Google, однако не взирая на то, что он хорошо ищет, но совсем не вписываеться в дизайн блога, ведь снизу идет надпись google технологии, да и после поиска открывается какое-то невзрачное окно. В общем сейчас я Вам опишу скрипт который поможет сделать Вам поиск по блогу. Итак: 1. заходим в настройки блога, Дизайн/Элементы страници 2. Нажимаем добавить гаджет там где мы хотим, чтобы появился наш новый поиск; 3. Выбираем Html/Java Script, и вставляем в него следующий код: <center><form id="searchThis" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 200px;" value="Введите слово для поиска..." name="q" onclick="this.value=''" type="text...