»

 Будь в курсе событий:

oblako tegov dlya jimdo

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

В свое время, когда я был еще в команде суппортеров Jimdo, мне был задан один вопрос: "Можно ли сделать облако тегов как на других сайта?" Мне тогда подумалось, а почему нет? И я решил написать урок.

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

Как то я пообещал не помню кому и когда, что сделаю урок по созданию облака тегов для Jimdo.  Я покажу как можно обойтись без использования других хостингов. Раскрою секрет, почему много подобных облаков работают через http://farengate.clan.su. А так же добавлю интересную фичу по внедрению в облако задний фон. Думаю, урок окажется полезным, ввиду того, что уже неоднократно встречал такие облака на сайтах Jimdo. И все они работают практически через один и тот же хостинг, который кстати арендую я сам. Ну а теперь давайте объясню доступно на пальцах что к чему.

Шаг 1. Открываем занавес

Почему же многие подобные облака работают черей этот хостинг? Задумка была простой и носила в основном испытательный характер. Заключалась она в том, чтобы как можно больше пользователей узнали о моем ресурсе http://farengate.clan.su, а так же чтобы поисковые боты при сканировании контента Jimdo-сайтов собирали обращения к моему хостингу в виде ссылки на сам flash-исходник. Таким образом, пользуясь данным ресурсом, я убивал двух зайцев: во-первых - делал добро всем пользователям Jimdo, во-вторых - скрыто продвигал свой ресурс. Но не так давно я стал получать уведомления от хостера, что основная нагрузка на сервер идет именно от обращения к данному облаку. Я решил, что так больше продолжаться не может и решил накатать этот урок по плавному переезду облака на ваш собственный Jimdo сайт.

Шаг 2. Загружаем исходник

Вторым шагом будет являться загрузка нашего облака на ваш собственный сайт Jimdo. Лучше для облака выделить отдельную скрытую страницу, о присутствии которой знали бы только вы и никто больше. Загрузить файл можно стандартными средствами Jimdo как показано на рисунке слева. Ничего сложного, но появляется одно большое НО!

Как узнать валидную ссылку на загруженный исходник? Сделать это можно различными способами. Но я обрисую самый простой вариант. А именно, установите браузер Google Chrome и воспользуйтесь встроенным в него просмотрщиком кода элемента, как показано на рисунке справа. Дальше откроется нижняя панель и вам будет доступен html код вашей страницы. Если вы развернете список, то сможете увидеть, что при наведении на определенный элемент кода, будет подсвечиваться соответсвующий данному коду сегмент страницы. В моем случае вы можете увидеть, что на моем сайте данный флеш-элемент располагается по ссылке которую я выделил красным цветом:

html
<div id="cc-m-flash-5164660312" align="left">
<embed allowfullscreen="true" allowscriptaccess="always" quality="best" wmode="transparent" bgcolor="#fff" flashvars="null" menu="false" version="6.0.0" type="application/x-shockwave-flash" width="100" height="100" id="flash-1307898070510" src="http://u.jimdo.com/www10/o/s639b734c484de1/flash/m64f9f991c97e67/13078072/flash.swf"/>
</div>

Что-то подобное должно быть и у вас. Можно воспользоваться и дополнительным расширением для Google Chrome - Firebug Lite. Смотрите по вашему усмотрению.

tagcloud.swf
swf Файл 50.9 KB

Шаг 3. Вставляем html-код

html
<!-- Устанавливаем ссылку на фоновое изображение -->
<div style="background-image: url(http://image.jpeg); background-position: 50% 50%; background-repeat: no-repeat; ">

<div align="center">
<!-- Указываем ссылку на исходник -->
<object height="400" width="600" type="application/x-shockwave-flash" id="b-cumulus" name="tagcloud" data="http://tagcloud.swf" style="visibility: visible;"> 

<param name="wmode" value="transparent">
<param name="bgcolor" value="#333333">
<param name="allowscriptaccess" value="always">
<param name="flashvars" value="mode=tags&amp;minFontSize=8&amp;maxFontSize=18&amp;tcolor=0x0988ff&amp;tcolor2=0x000000&amp;hicolor=0xd95800&amp;distr=true&amp;tspeed=200&amp;tagcloud=<tags> 

<!-- Название тега и ссылка -->
<a href='http://farengate.jimdo.com/' style='3'>Тег 1</a>
<a href='http://farengate.jimdo.com/' style='1'>Тег 2</a> 
<a href='http://farengate.jimdo.com/' style='3'>Тег 3</a> 
<a href='http://farengate.jimdo.com/' style='4'>Тег 4</a> 
<a href='http://farengate.jimdo.com/' style='5'>Тег 5</a> 

</tags>">
</object>
</div>

</div>

Как видно из кода, вы можете установить задний фон. Если же он не нужен, то удаляем блок, не забываем при этом удалять закрывающие дивы. Тегов и ссылок может быть сколько угодно. В общем ничего сложного, будьте просто повнимательней с добавлением или удалением кода.

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

Комментарии: 20
  • #1

    skayvin163 (Среда, 21 Май 2014 07:18)

    Привет а где взять исходник ?
    если можешь на почту ответь zilote163@gmail.com

  • #2

    skayvin163 (Среда, 21 Май 2014 09:40)

    не получается запустить облако *(

  • #3

    Farengate Pulse (Суббота, 24 Май 2014 17:58)

    урок внимательно читайте, или напишите что именно вы делаете по шагам, чтобы понять где именно есть проблема

  • #4

    multfilm-online (Вторник, 08 Июль 2014 13:33)

    Спасибо! Классно работает!

    Скажи у меня есть исходник классного вращающегося меню. Не хочешь сделать себе на сайт и выложить всем гостям. По аналогии верхнего урока.

  • #5

    Farengate Pulse (Вторник, 08 Июль 2014 13:38)

    Присылай, будет время, гляну - если будет на Jimdo работать - сделаю урок. Почта brokerex от google.

  • #6

    multfilm-online (Вторник, 08 Июль 2014 14:21)

    Отправил.

  • #7

    Farengate Pulse (Вторник, 08 Июль 2014 14:37)

    Спасибо, посмотрю обязательно, сейчас немного времени не хватает - работы много. Но по первому виду уже вижу недочеты, картинки должны быть в PNG для лучшего отображения, xml документ придется заливать на сторонний хостинг или на dropbox, правда там сейчас защиту поставили, но я ее вроде как обхожу пока. Думаю, на джимдо работать будет, выложу в уроках. Если Вы подписаны в рассылке новостей, то первыми узнаете об уроке.

  • #8

    multfilm-online (Вторник, 08 Июль 2014 15:59)

    Взял вот отсюда http://sofyasofiya.ru/index-2.html?act=bannpl&page=29

  • #9

    multfilm-online (Вторник, 08 Июль 2014 16:00)

    Что касается картинок, то я тоже сразу увидел.

  • #10

    neobdizain (Суббота, 09 Август 2014 16:47)

    Добрый день, у меня почти все получилось, но осталось два вопроса:1)как увеличить размер текста(т.е. тег 1, тег2 и т.д.)?
    2)как изменить цвет ссылок?
    А так спасибо большое за урок, очень помогло

  • #11

    neobdizain (Суббота, 09 Август 2014 16:53)

    А все, цвет получилось изменить, как изменить размер?
    А и еще, можно ли изменить форму окошка(я хочу встроить в колонку и мне нужна маленькая ширина и большая высота)
    Заранее спасибо за помощь!

  • #12

    Farengate Pulse (Суббота, 09 Август 2014 18:59)

    настройки прописаны, цвета состоят из 6 знаков, пример 0988ff, 000000, d95800, там же минимальный и максимальный размер шрифтов от 8 до 18, а так же скорость вращения:
    minFontSize=8&amp;
    maxFontSize=18&amp;
    tcolor=0x0988ff&amp;
    tcolor2=0x000000&amp;
    hicolor=0xd95800&amp;
    tspeed=200&amp;

  • #13

    Акмаль (Воскресенье, 10 Август 2014 09:35)

    Спасибо, разобрался. Вот что получилось http://www.unusual-design.ru/облако-тегов/ Спасибо большое автору, очень полезный урок!

  • #14

    neobdizain (Среда, 13 Август 2014 20:07)

    Еще один вопрос, я поменял дизайн сайта на зеленый и соответсвенно теперь мне нужно чтоб облако было зеленым(не само облако а текст). Код зеленого цвета, который мне нужен 7da630, но когда я его вставляю, облако распознает его как черный! В чем может быть проблема и как ее исправить?

  • #15

    Farengate Pulse (Четверг, 14 Август 2014 07:04)

    Товарищи, юзаем настройки, там tcolor1 - инициирует темный оттенок цвета, tcolor2 - светлый оттенок, hicolor - оттенок при наведении. Следовательно Вам нужно указывать 3 разных цвета для работы облака.

  • #16

    sail74 (Вторник, 21 Октябрь 2014 19:55)

    Подскажите, пожалуйста, как заменить надписи картинками?)

  • #17

    Farengate Pulse (Вторник, 21 Октябрь 2014 20:32)

    я не проверял, но попробуйте вставить таким образом:
    <a href='http://farengate.jimdo.com/' style='3'><img src="http://image.jpg" /></a>

  • #18

    sail74 (Четверг, 23 Октябрь 2014 16:54)

    Неа...не работает :(

  • #19

    Fofilm.ru (Воскресенье, 16 Октябрь 2016 10:56)

    Смотреть фильмы онлайн бесплатно без регистрации в хорошем качестве

  • #20

    ALEX (Понедельник, 03 Июль 2017 11:13)

    Мне необходимо вставить flash на сайт на платформе Jimdo. (расширение .swf)
    это возможно сделать?