Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

Мы собираем и публикуем материалы не только на сайте, но и в нашей группе Вконтакте, нужно отметить то, что на сайте публикуются не все материалы, небольшая часть выкладывается только в группе.

17 Марта 2014 Подробнее

Свернуть

Прямой эфир

Пользователь: artCreative

В раздел по теме: Вид материалов как на Pinterest
Пользователь: artCreative

В раздел по теме: Ссылка на источник при копировании текста
Пользователь: muxa

В раздел по теме: Ссылка на источник при копировании текста
Не работает
Пользователь: muxa

В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
Все работает класс
Пользователь: muxa

В раздел по теме: Всплывающее меню на чистом CSS
Не работает
Пользователь: muxa

В раздел по теме: Шаблон Фотошоп-Мастер
Пользователь: vovany

В раздел по теме: Уникальная страница технических работ для uCoz

Свернуть

Статистика

Пользователи

Гости сайта

Онлайн
Кто был
СЧ

[Статистика недоступна]

Всего пользователей: 1492 ⁺⁰
Всего материалов [?]: 1434 +

Полный список

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Переключатели и кнопки » Облако тегов для UCOZ

Облако тегов для UCOZ

Опубликовал: artCreative™
Категория: Переключатели и кнопки
Дата: 19 Июня 2025 в 02:41

1 голос

Я вам предлагаю два варианта, один упрощенный, другой анимированный, какой выбрать для себя решайте сами.

Теперь давайте разберемся со стандартной структурой тегов созданных при помощи информера, для этого вначале установим этот информер. Перейдите в ПУ / Инструменты / Информеры, кликаем создать новый информер, раздел выбираем теги, способ вывода - список тегов, а остальное по желанию. Полученный код вызова информера $MYINF_#$ вставляем в то место где хотим видеть список тегов, прежде заменяем в этом коде # на свой номер информера.

Слудующим шагом у нас уже будет установка, а для первого варианта тегов uCoz она крайне простая, просто скопируйте css код нужного цвета к себе в ПУ / Дизайн / Управление дизайном (CSS), либо в отдельный css файл.

Вариант бирюзовый

Код

.tagItem {
  float:left;
  margin:0 10px 7px 0;
  padding:2px 10px 2px 0;
  background:url(http://mvcreative.ru/example/16/1/images/tag_bg.png) no-repeat right -25px;
  color:#fff;
  font-size:11px;
  font-family:helvetica, arial, sans-serif;
}
.eTag {
  background:url(http://mvcreative.ru/example/16/1/images/tag_bg.png) no-repeat left top;
  padding:6px 5px 4px 7px;
  position:relative;
  margin:0 3px 0 -2px;
  border-right:1px solid #d2d2d2;
  -moz-border-radius:0 3px 3px 0;
  -webkit-border-radius:0 3px 3px 0;
  border-radius:0 3px 3px 0;
  color:#3f3f3f;
  text-shadow:0 1px #fff;
  text-decoration:none;
  font-size:11px;
}

Вариант оранжевый

Код

.tagItem {
  float:left;
  margin:0 10px 7px 0;
  padding:2px 10px 2px 0;
  background:url(http://mvcreative.ru/example/16/1/images/tag_bg2.png) no-repeat right -25px;
  color:#fff;
  font-size:11px;
  font-family:helvetica, arial, sans-serif;
}
.eTag {
  background:url(http://mvcreative.ru/example/16/1/images/tag_bg2.png) no-repeat left top;
  padding:6px 5px 4px 7px;
  position:relative;
  margin:0 3px 0 -2px;
  border-right:1px solid #d2d2d2;
  -moz-border-radius:0 3px 3px 0;
  -webkit-border-radius:0 3px 3px 0;
  border-radius:0 3px 3px 0;
  color:#3f3f3f;
  text-shadow:0 1px #fff;
  text-decoration:none;
  font-size:11px;
}

Вариант 1, синий

Код

.tagItem {
  float:left;
  margin:0 10px 7px 0;
  padding:2px 10px 2px 0;
  background:url(http://mvcreative.ru/example/16/1/images/tag_bg3.png) no-repeat right -25px;
  color:#fff;
  font-size:11px;
  font-family:helvetica, arial, sans-serif;
}
.eTag {
  background:url(http://mvcreative.ru/example/16/1/images/tag_bg3.png) no-repeat left top;
  padding:6px 5px 4px 7px;
  position:relative;
  margin:0 3px 0 -2px;
  border-right:1px solid #d2d2d2;
  -moz-border-radius:0 3px 3px 0;
  -webkit-border-radius:0 3px 3px 0;
  border-radius:0 3px 3px 0;
  color:#3f3f3f;
  text-shadow:0 1px #fff;
  text-decoration:none;
  font-size:11px;
}

Вариант зеленый

Код

.tagItem {
  float:left;
  margin:0 10px 7px 0;
  padding:2px 10px 2px 0;
  background:url(http://mvcreative.ru/example/16/1/images/tag_bg4.png) no-repeat right -25px;
  color:#fff;
  font-size:11px;
  font-family:helvetica, arial, sans-serif;
}
.eTag {
  background:url(http://mvcreative.ru/example/16/1/images/tag_bg4.png) no-repeat left top;
  padding:6px 5px 4px 7px;
  position:relative;
  margin:0 3px 0 -2px;
  border-right:1px solid #d2d2d2;
  -moz-border-radius:0 3px 3px 0;
  -webkit-border-radius:0 3px 3px 0;
  border-radius:0 3px 3px 0;
  color:#3f3f3f;
  text-shadow:0 1px #fff;
  text-decoration:none;
  font-size:11px;
}

Вариант пурпурный

Код

.tagItem {
  float:left;
  margin:0 10px 7px 0;
  padding:2px 10px 2px 0;
  background:url(http://mvcreative.ru/example/16/1/images/tag_bg5.png) no-repeat right -25px;
  color:#fff;
  font-size:11px;
  font-family:helvetica, arial, sans-serif;
}
.eTag {
  background:url(http://mvcreative.ru/example/16/1/images/tag_bg5.png) no-repeat left top;
  padding:6px 5px 4px 7px;
  position:relative;
  margin:0 3px 0 -2px;
  border-right:1px solid #d2d2d2;
  -moz-border-radius:0 3px 3px 0;
  -webkit-border-radius:0 3px 3px 0;
  border-radius:0 3px 3px 0;
  color:#3f3f3f;
  text-shadow:0 1px #fff;
  text-decoration:none;
  font-size:11px;
}

Вариант красный

Код

.tagItem {
  float:left;
  margin:0 10px 7px 0;
  padding:2px 10px 2px 0;
  background:url(http://mvcreative.ru/example/16/1/images/tag_bg6.png) no-repeat right -25px;
  color:#fff;
  font-size:11px;
  font-family:helvetica, arial, sans-serif;
}
.eTag {
  background:url(http://mvcreative.ru/example/16/1/images/tag_bg6.png) no-repeat left top;
  padding:6px 5px 4px 7px;
  position:relative;
  margin:0 3px 0 -2px;
  border-right:1px solid #d2d2d2;
  -moz-border-radius:0 3px 3px 0;
  -webkit-border-radius:0 3px 3px 0;
  border-radius:0 3px 3px 0;
  color:#3f3f3f;
  text-shadow:0 1px #fff;
  text-decoration:none;
  font-size:11px;
}

Вариант серый

Код

.tagItem {
  float:left;
  margin:0 10px 7px 0;
  padding:2px 10px 2px 0;
  background:url(http://mvcreative.ru/example/16/1/images/tag_bg7.png) no-repeat right -25px;
  color:#fff;
  font-size:11px;
  font-family:helvetica, arial, sans-serif;
}
.eTag {
  background:url(http://mvcreative.ru/example/16/1/images/tag_bg7.png) no-repeat left top;
  padding:6px 5px 4px 7px;
  position:relative;
  margin:0 3px 0 -2px;
  border-right:1px solid #d2d2d2;
  -moz-border-radius:0 3px 3px 0;
  -webkit-border-radius:0 3px 3px 0;
  border-radius:0 3px 3px 0;
  color:#3f3f3f;
  text-shadow:0 1px #fff;
  text-decoration:none;
  font-size:11px;
}

А для второго варианта нам потребуется еще установить js, скопируйте данный код в самый низ страницы, перед тегом

Код

И в то место куда мы устанавливали код вызова информера $MYINF_#$, рядом поставим данный код.

Код

То есть в итоге получится вот так:

Код

$MYINF_#$ <div id="newTags"></div>

Ну а дальше все тоже самое, установка css кода, точно также как и в 1 варианте:
Вариант бирюзовый

Код

Вариант оранжевый

Код

Вариант синий

Код

Вариант зеленый

Код

Вариант пурпурный

Код

Вариант красный

Код

Вариант серый

Код

Спонсор материала: Студия Веб-Дизайна RealARTs

Автор файла: TRANE73

Ссылка на источник материала

Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 823 « Назад

Теги материала: Ucoz, тегов, облако, для

Комментарии пользователей

Внимание ! У вас нет прав для добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.

E-mail отправителя *:
Тема письма:
Текст сообщения *:

ПАНЕЛЬ УПРАВЛЕНИЯ

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Переключатели и кнопки » Облако тегов для UCOZ

Облако тегов для UCOZ

Комментарии пользователей