Облако тегов разных цветов

Облако тегов (облако ярлыков или меток) - практически обязательный элемент любого блога. Это и элемент удобной тематической релевантной навигации и просто дополнительные понты к дизайну сайта. Несколько лет назад популярно было облако на flash технологии, ещё встречаются трёхмерные модельки на jQuery, но обычно блогеры и вебмастера используют упрощённый вариант с ипользованием CSS и встроенных средств своего движка.

В Blogger облако тегов (tag cloud) поставляется в виде настраиваемого виджета и (именно в виде облака) выглядит вот так:

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

Иногда на блогах можно встретить разноцветное облако тегов. Если кому-то такое облако покажется чем-то запредельным, то, забегая вперёд скажу, что раскрасить при помощи CSS его очень легко.

Но сначала надо определить структуру этого виджета. Сделать это можно при помощи инспектирования в браузере. Я использую Оперу (контекстное меню через правую кнопку мыши):

Виджет облака тегов (как видно на скриншоте) состоит из:
-- заголовка <h2>Облако тегов</h2>
-- и содержимого <div class="widget-content cloud-label-widget-content">
</div>

Внутри последнего вложена цела группа тегов span с классами label-size и label-size-5 (4,3,2,1):

Именно эти классы нам и нужны.
label-size - общий класс, о воздействует на все теги в облаке
label-size-5 (4,3,2,1) - это класс привязанный к определённому размеру тега, которые (теги) выстраиваются в облаке от 1 (самый маленький) до 5 (самый крупный).

Соответственно, каждому классу мы можем дать собственный цвет. Ещё надо помнить, что все теги - это ссылки (html тег a):

.label-size-5 a {color: black;}
.label-size-4 a {color: red;}
.label-size-3 a {color: yellow;}
.label-size-2 a {color:green;}
.label-size-1 a {color:gray;}

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

Пример:

.label-size-5 a {color: #5a5d63;}
.label-size-4 a {color: #4b8aaf;}
.label-size-3 a {color: #4baf68;}
.label-size-2 a {color:#b30a00;}
.label-size-1 a {color:#f8c412;}

Всё это копируем в шаблон, в ту часть, которая заведует стилями, например после a:hover {
text-decoration:underline;
color: $(link.hover.color);
}.

В итоге у нас получается вот такое симпатичное цветное облако тегов:

Сегодняшний постовой - Глазябра.
Под смешным названием скрывается позитивный блог c креативным контентом, а главное (для меня) с дизайном в духе хабрахабра и лайвстрит (так что не только я страдаю плагиатами в оформлении шаблона на блоге).