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

html colors blog

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

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

tag cloud blogger blogspot

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

Иногда на блогах можно встретить разноцветное облако тегов. Если кому-то такое облако покажется чем-то запредельным, то, забегая вперёд скажу, что раскрасить при помощи 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);
}
.

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

colorfull tag cloud blogger

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

4 комментария:

  1. Добрый день, уважаемый администратор!)

    Можете, пожалуйста, подсказать, как сделать ярлыки, как у Вас, где написано - Теги: html, виджеты, теги, хитрости (эффект hover (green) ) и, где Блогнавигатор написано.

    ОтветитьУдалить
  2. Я просто не могу найти, куда вставить стайл или заменить, чтобы вместо стандартных ярлыков и архив-ссылок, был именно такой дизайн - http://1.bp.blogspot.com/-F2tzlxC-HJs/T6DnesCgF3I/AAAAAAAAJ7c/1WWKa1RjauE/s400/lychshie-posti-v-bloge.png

    ОтветитьУдалить
  3. Здравствуйте.
    Это стандартное облако тегов, и цвет меняют ссылки при наведении из-за свойств к тегу a.
    Чтобы их сделать на определённом фоне, нужно в css прописать фон, например:
    .label-size-5 {background: #ff0a3b;}

    Цвет шрифта задаёт color.

    Про блогонавигатор писал здесь - http://blogger.omg-linux.ru/2012/04/blogspot.html.

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