Облако тегов в стиле flat от Fahrieva
827материалов
228тем на форуме
3003комментария
6154пользователя

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


Доброго времени суток! Сегодня будем видоизменять привычное нам отображение тегов. Для этого нужно лишь следовать не сложной инструкции. А пока мы не начали - смотрим демо.

Шаг 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 стилях.

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 24.08.2013 в 16:27
Материал просмотрен: 687 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта