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

2011-06-17 | Веб-дизайн

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

Создание красивого облака тегов при помощи стилей совсем не сложный процесс. В этой статье я объясню как придать тегам в облаке свой индивидуальный стиль.
Описанный здесь пример в большей степени предназначен для блогового движка "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.

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

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 раз, но на основании этого примера, вы легко сможете продолжить этот список стилей.
Кроме того вы так же можете изменить под свой вкус цвета, и ваш сайт будет выделяться оригинальным и самостоятельно оформленным облаком с красивыми тегами.

Статьи по теме:

Комментарии к записи

RSS

Рекомендую
  1. WEBHOST1 - проверенный недорогой хостинг для сайта с PHP и MYSQL.
  2. LOGASTER - генератор логотипов и фавиконок с поддержкой кириллицы.
  3. QComment - наполнение сайтов комментариями и заработок на отзывах.
Категории

Как создать:

Где найти:

Как заработать:

© 2011-2016 «Сеодиз». Создание сайтов и заработок для начинающих.
Копирование запрещено.