Posted on By seodiz_baza_

Oблако тегов на CSS

как сделать облако тегов с помощью только css

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

Описанный здесь пример в большей степени предназначен для блогового движка «Litepublisher», но я постараюсь разъяснить те участки кода, которые относятся только к нему, для того чтобы вы смогли легко адаптировать его под вашу CMS.

Стильное облако тегов

HTML облака

Для Lite publisher:
Находим в theme.txt вашей темы, в шаблоне нужного сайдбаре кусок кода, который отвечает за виджет с тегами и заменяем его на:

sidebar.tags.items = [<div id="widgettags">*item = [<a class="t*itemscount" href="*options.url*url" title="*title *subcount">*title</a> &nbsp;]</div>]

* — Заменить на символ — $, иначе не могу опубликовать код, движок ругается.
И не забываем, что sidebar это 1 сайдбар, если вставляете код во второй необходимо заменить на sidebar1.

Для остальных движков объясняю:
Вам нужен только участок кода заключенный в квадратные скобки. Вставляете его в нужное место шаблона вашей темы.

  • *item

    — Шаблон для отображения одного тега.

  • *itemscount

    — Цифра означающая количество статей в которых упоминается тег.

  • *options.url*url

    — Адрес страницы тега.

  • *title *subcount

    — Название тега и количество статей.

  • *title

    — Название тега.

CSS стили облака

Для всех:
Добавляем в самый низ файла стилей style.css следующий код:

/*TAGS*/
div#widgettags{margin:0 10px 10px;}
a.t1{font-size:.8em;color:#808080;font-weight:100;}
a.t2{font-size:.9em;color:#0f0;font-weight:200;}
a.t3{font-size:1em;color:#008000;font-weight:300;}
a.t4{font-size:1.1em;color:#f0f;font-weight:400;}
a.t5{font-size:1.2em;color:#00f;font-weight:500;}
a.t6{font-size:1.3em;color:#ff4500;font-weight:600;}
a.t7{font-size:1.4em;color:#f00;font-weight:700;}
a.t8{font-size:1.5em;color:#a52a2a;font-weight:800;}
a.t9{font-size:1.6em;color:#000;font-weight:900;}

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

Читайте также: теги метки дизайн