Облако тегов в стиле flat от Fahrieva

·	29.09.2013, 13:43
Доброго времени суток! Сегодня будем видоизменять привычное нам отображение тегов. Для этого нужно лишь следовать не сложной инструкции. А пока мы не начали - смотрим демо. Шаг 1 - Установим HTML: Начнем с того, что нам нужно создать информер, а для этого заходим в Админ панель => Инструменты => Информеры => Создать информер => Теги Далее изменяем настроки на те, что показаны внизу: - ставим галочку Список тегов - выбираем нужные модули - выставляем количество тегов 20 ( настоятельно рекомендую не ставить число больше 25-30) и устанавливаем системную переменную данного информера в нужное место на странице сайта: HTML $MYINF_1$ Шаг 1 - Установим CSS: Ну что ж, теперь, когда теги расположены там где нужно, приступим к видоизменению. Для этого пропишем css стили расположенные ниже: CSS /* Облако тегов в стиле flat*/ .tagItem { float:left; color:#fff; background:#53a7d7; margin: 7px 0px 0px 10px; padding: 7px 7px 7px 3px; font: 10px Verdana,Arial,Helvetica, sans-serif; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; border-bottom: 3px solid #1889b8; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; } .tagItem:hover { float:left; color:#fff; background:#4394c3; margin: 7px 0px 0px 10px; padding: 7px 7px 7px 3px; font: 10px Verdana,Arial,Helvetica, sans-serif; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } .tagItem a:link, .tagItem a:visited { float:left; color:#fff; padding: 0px 5px 0px 5px; } Вот и все, если цветовая гамма на вписывается в стилистику вашего сайта, то можно ее изменить покапавшись в css стилях.
1 2 3 4 5 Категория: Вид Тегов и Кнопок \| Добавил: tashkent97
Просмотров: 625 \| Загрузок: 248 \| Источник: center-dm.ru \| Рейтинг: 5.0/1

Всего комментариев: 0