Облако тегов на блог Блогспот

Автор Damir-Tote. Опубликовано в Блог, Гаджеты Блогспот

           Облако тегов на блоге Блогспот в виде анимированного движения ярлыков на самом деле нет. Но, использовав скрипты и HTML, можно сделать очень красивое анимированное облако тегов на блоге Блогспот.

Облако тегов
            Когда я только создал этот блог, я мечтал иметь анимированное облако, но не мог её воплотить в жизнь. И вот случайно бродя по блогам, я зашел на один блог и увидел облако тегов. По началу подумал, что попал в Вордпресс, но увидев до более знакомую форму комментариев. Я понял, что это возможно сделать.
            Времени докопаться во всех кодах у меня  попросту не было и об этом я попросил Дмитрия46, он накопал совсем иное в течении двух дней, но по началу у него ни чего не получалось и тогда я сам решил собрать облако тегов. И в течении суток (не все время) сделал его. И тут же Дмитрий46 пишет, что тоже сделал. Но у него немного отличается от моего облака, поэтому вам будет дано на выбор оба варианта анимированного облака тегов.
            1. Вариант (сборка damir-tote)
<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 src=’http://ryaboff.com.ua/Books/SEO/swfobject.js’ type=’text/javascript’/>
<script type=’text/javascript’>
var flashvars = {
mode: «tags»,
minFontSize: «6»,
maxFontSize: «22»,
showTagWeight: «true»,
tcolor: «0x3451a1»,
tcolor2: «0x3451a1»,
hicolor: «0x3451a1»,
distr: «distr»,
tspeed: «100»,
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 = {
//wmode: «transparent»,
bgcolor: «#FFFFFF»,
allowscriptaccess: «always»
};
var attributes = {
id: «b-cumulus»,
name: «tagcloud»
};
swfobject.embedSWF(«http://ryaboff.com.ua/Books/SEO/tagcloud.swf», «b-cumulus», «250», «250», «9.0.0», 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>
            2. Вариант (сборка Дмитрия46)
<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 src=’http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject_src.js’ type=’text/javascript’/>
<script type=’text/javascript’>
var flashvars = {
mode: «tags»,
minFontSize: «6»,
maxFontSize: «22»,
showTagWeight: «true»,
tcolor: «0x0be4f8»,
tcolor2: «0x0be4f8»,
hicolor: «0xffffff»,
distr: «distr»,
tspeed: «100»,
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 = {
//wmode: «transparent»,
bgcolor: «#333333»,
allowscriptaccess: «always»
};
var attributes = {
id: «b-cumulus»,
name: «tagcloud»
};
swfobject.embedSWF(«http://failosclad/sklad-fajlov/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 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>
            Данный код необходимо добавить рядом с остальными виджетами шаблона, заходя через Дизайн > Изменить HTML. Будут сложности пишите в комментариях, обсудим. Мое же облако можете лицезреть в боковой панели.
            Чем отличается сборка Дмитрия46, а тем, что при наведении курсора на теги, он показывает количество использованных этих тегов или статей. В общем модификация моего облака тегов.
            Итак, а теперь к инструкции изменения облака тегов под себя:
            «300″ – ширина облака тегов
«250″ – высота облака тегов
flashvars.minFontSize = «8«; – минимальный размер шрифта тега
            flashvars.maxFontSize = «22«; – максимальный размер шрифта тега
            flashvars.tcolor = «0x3451a1«; – цвет тега (малого количества тегов)
            flashvars.tcolor2 = «0x3451a1«; – цвет тега (большего количества тегов)
            flashvars.hicolor = «0x3451a1«; – цвет тега при наведении курсора мышки на тег
            flashvars.tspeed = «100«; – скорость вращения облака тегов
params.bgcolor = «#ffffff«; – цвет фона, он задаётся через #, а не 0x.
Цвета и колоры облака тегов можете подобрать под себя, а так же размеры и скорость облака.
            До новых статей!!!

PS: Решили купить дом за рубежом? Воспользуйтесь услугой ознакомительные туры, которую предлагают большинство агентств для просмотра и окончательной покупки недвижимости.

Трекбэк с Вашего сайта.

  • ОЛЬГА

    Пыталась создать облако по второму варианту, залезла в шаблон и в конце вставила то что у вас скопировала в статье. Перед всеми сообщениями на главной вышло что-то непонятное и ненужное! удалила все после строки 2090 (запомнила) и ничего не ушло! ЧТО ДЕЛАТЬ!? КАК УБРАТЬ!????????????? ПОМОГИТЕ!

    • У меня код кривой, замените такие черточки << на "

      • ОЛЬГА

        уважаемый Модератор, дело в том, что я уже попыталась удалить то, что скопировала у вас, НО видимо не все. Опять пыталась сама разобраться — сложно… вот ссылка — помогите удалить ненужное!? Потом прошу удалить эту ссылку. Заранее спасибо!
        http://www.blogger.com/blogger.g?blogID=2617876883492872582#templatehtml

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

          • ОЛЬГА

            пробовала, можно я вышлю вам на почту весь список? оч нужна помощь!

  • ОЛЬГА

    http://dashinamama2011.blogspot.ru/2013/08/blog-post_26.html#comment-form ВОТ ССЫЛКА В РАСКРЫТОМ ВИДЕ ЧЕРЕЗ КОМЕНТАРИИ.

.