Скачать для фотошопа и создания сайта

	Скачать для фотошопа и для создания сайта	Понедельник, 17.06.2024, 04:27
		Главная Регистрация Вход

Приветствую Вас Гость | RSS

[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 1
1

Облако тегов для ucoz (Облако тегов для ucoz)

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

Marco

Дата: Вторник, 08.12.2020, 05:14 | Сообщение # 1

Генералиссимус

Группа: Администраторы

Сообщений: 1691

Offline

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

Теперь давайте разберемся со стандартной структурой тегов созданных при помощи информера, для этого вначале установим этот информер. Перейдите в ПУ / Инструменты / Информеры, кликаем создать новый информер, раздел выбираем теги, способ вывода - список тегов, а остальное по желанию. Полученный код вызова информера $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 варианте:
Вариант бирюзовый

Код

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

Код

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

Код

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

Код

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

Код

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

Код

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

Код

Готово!

Прикрепления: 4850617.jpg (31.3 Kb)

Скоро новый год

Облако тегов для ucoz (Облако тегов для ucoz)

Страница 1 из 1
1