Вид тегов uCoz

Все привет =)

Вид тегов для uCoz это в принципе мелочь, но какая? В основном все оставляют стандартный вид тегов и сейчас я не говорю только про систему и ее теги uCoz. Под словом стандартный, я рисую себе такой вид, где есть просто ссылка и есть просто дай бог цифра, а чаще всего цифра компенсируется размером текста тега, давайте посмотрим демо:

Стандартный вид выглядит примерно так, согласитесь неважно, поэтому я и решил сделать несколько решений по улучшению визуального восприятия тегов для uCoz.

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

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

У нас получился не стилизованный список тегов uCoz, имеющий вот такую структуру для каждого тега

Код

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

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

Код

.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;
}

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

Код

.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;
}

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

Код

.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;
}

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

Код

.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;
}

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

Код

.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;
}

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

Код

.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, скопируйте данный код в самый низ страницы, перед тегом </body>

Код

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

Код

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

Код

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

Ну а дальше все тоже самое, установка css кода, точно также как и в 1 варианте:

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

Код

#newTags {
  position:relative;
  z-index:1;
}
#newTags div {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg.png) no-repeat;
  color:#3f3f3f;
  float:left;
  height:25px;
  line-height:1;
  margin:5px;
  padding:0 5px 0 8px;
  position:relative;
  text-decoration:none;
  overflow:hidden;
  font-family:helvetica, arial, sans-serif;
}
#newTags div:active {
  top:1px;
}
#newTags div a, #newTags div span {
  display:block;
  float:left;
}
#newTags div a {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg.png) no-repeat 100% -25px;
  height:19px;
  padding:6px 10px 0 0;
  position:relative;
  text-shadow:0 1px 1px #fff;
  z-index:10;
  font-weight:bold;
  font-size:12px;
  color:#3f3f3f;
  text-decoration:none;
}
#newTags div span {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg.png) no-repeat 100% -50px;
  color:#fff;
  height:19px;
  padding:5px 10px 0;
  position:absolute;
  right:0;
  top:1px;
  text-shadow:0 -1px 0 #5c5c5c;
  z-index:-1;
  font-size:12px;
  line-height:14px;
}

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

Код

#newTags {
  position:relative;
  z-index:1;
}
#newTags div {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg2.png) no-repeat;
  color:#3f3f3f;
  float:left;
  height:25px;
  line-height:1;
  margin:5px;
  padding:0 5px 0 8px;
  position:relative;
  text-decoration:none;
  overflow:hidden;
  font-family:helvetica, arial, sans-serif;
}
#newTags div:active {
  top:1px;
}
#newTags div a, #newTags div span {
  display:block;
  float:left;
}
#newTags div a {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg2.png) no-repeat 100% -25px;
  height:19px;
  padding:6px 10px 0 0;
  position:relative;
  text-shadow:0 1px 1px #fff;
  z-index:10;
  font-weight:bold;
  font-size:12px;
  color:#3f3f3f;
  text-decoration:none;
}
#newTags div span {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg2.png) no-repeat 100% -50px;
  color:#fff;
  height:19px;
  padding:5px 10px 0;
  position:absolute;
  right:0;
  top:1px;
  text-shadow:0 -1px 0 #5c5c5c;
  z-index:-1;
  font-size:12px;
  line-height:14px;
}

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

Код

#newTags {
  position:relative;
  z-index:1;
}
#newTags div {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg3.png) no-repeat;
  color:#3f3f3f;
  float:left;
  height:25px;
  line-height:1;
  margin:5px;
  padding:0 5px 0 8px;
  position:relative;
  text-decoration:none;
  overflow:hidden;
  font-family:helvetica, arial, sans-serif;
}
#newTags div:active {
  top:1px;
}
#newTags div a, #newTags div span {
  display:block;
  float:left;
}
#newTags div a {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg3.png) no-repeat 100% -25px;
  height:19px;
  padding:6px 10px 0 0;
  position:relative;
  text-shadow:0 1px 1px #fff;
  z-index:10;
  font-weight:bold;
  font-size:12px;
  color:#3f3f3f;
  text-decoration:none;
}
#newTags div span {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg3.png) no-repeat 100% -50px;
  color:#fff;
  height:19px;
  padding:5px 10px 0;
  position:absolute;
  right:0;
  top:1px;
  text-shadow:0 -1px 0 #5c5c5c;
  z-index:-1;
  font-size:12px;
  line-height:14px;
}

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

Код

#newTags {
  position:relative;
  z-index:1;
}
#newTags div {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg4.png) no-repeat;
  color:#3f3f3f;
  float:left;
  height:25px;
  line-height:1;
  margin:5px;
  padding:0 5px 0 8px;
  position:relative;
  text-decoration:none;
  overflow:hidden;
  font-family:helvetica, arial, sans-serif;
}
#newTags div:active {
  top:1px;
}
#newTags div a, #newTags div span {
  display:block;
  float:left;
}
#newTags div a {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg4.png) no-repeat 100% -25px;
  height:19px;
  padding:6px 10px 0 0;
  position:relative;
  text-shadow:0 1px 1px #fff;
  z-index:10;
  font-weight:bold;
  font-size:12px;
  color:#3f3f3f;
  text-decoration:none;
}
#newTags div span {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg4.png) no-repeat 100% -50px;
  color:#fff;
  height:19px;
  padding:5px 10px 0;
  position:absolute;
  right:0;
  top:1px;
  text-shadow:0 -1px 0 #5c5c5c;
  z-index:-1;
  font-size:12px;
  line-height:14px;
}

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

Код

#newTags {
  position:relative;
  z-index:1;
}
#newTags div {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg5.png) no-repeat;
  color:#3f3f3f;
  float:left;
  height:25px;
  line-height:1;
  margin:5px;
  padding:0 5px 0 8px;
  position:relative;
  text-decoration:none;
  overflow:hidden;
  font-family:helvetica, arial, sans-serif;
}
#newTags div:active {
  top:1px;
}
#newTags div a, #newTags div span {
  display:block;
  float:left;
}
#newTags div a {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg5.png) no-repeat 100% -25px;
  height:19px;
  padding:6px 10px 0 0;
  position:relative;
  text-shadow:0 1px 1px #fff;
  z-index:10;
  font-weight:bold;
  font-size:12px;
  color:#3f3f3f;
  text-decoration:none;
}
#newTags div span {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg5.png) no-repeat 100% -50px;
  color:#fff;
  height:19px;
  padding:5px 10px 0;
  position:absolute;
  right:0;
  top:1px;
  text-shadow:0 -1px 0 #5c5c5c;
  z-index:-1;
  font-size:12px;
  line-height:14px;
}

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

Код

#newTags {
  position:relative;
  z-index:1;
}
#newTags div {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg6.png) no-repeat;
  color:#3f3f3f;
  float:left;
  height:25px;
  line-height:1;
  margin:5px;
  padding:0 5px 0 8px;
  position:relative;
  text-decoration:none;
  overflow:hidden;
  font-family:helvetica, arial, sans-serif;
}
#newTags div:active {
  top:1px;
}
#newTags div a, #newTags div span {
  display:block;
  float:left;
}
#newTags div a {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg6.png) no-repeat 100% -25px;
  height:19px;
  padding:6px 10px 0 0;
  position:relative;
  text-shadow:0 1px 1px #fff;
  z-index:10;
  font-weight:bold;
  font-size:12px;
  color:#3f3f3f;
  text-decoration:none;
}
#newTags div span {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg6.png) no-repeat 100% -50px;
  color:#fff;
  height:19px;
  padding:5px 10px 0;
  position:absolute;
  right:0;
  top:1px;
  text-shadow:0 -1px 0 #5c5c5c;
  z-index:-1;
  font-size:12px;
  line-height:14px;
}

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

Код

#newTags {
  position:relative;
  z-index:1;
}
#newTags div {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg7.png) no-repeat;
  color:#3f3f3f;
  float:left;
  height:25px;
  line-height:1;
  margin:5px;
  padding:0 5px 0 8px;
  position:relative;
  text-decoration:none;
  overflow:hidden;
  font-family:helvetica, arial, sans-serif;
}
#newTags div:active {
  top:1px;
}
#newTags div a, #newTags div span {
  display:block;
  float:left;
}
#newTags div a {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg7.png) no-repeat 100% -25px;
  height:19px;
  padding:6px 10px 0 0;
  position:relative;
  text-shadow:0 1px 1px #fff;
  z-index:10;
  font-weight:bold;
  font-size:12px;
  color:#3f3f3f;
  text-decoration:none;
}
#newTags div span {
  background:url(http://mvcreative.ru/example/16/2/images/tag_bg7.png) no-repeat 100% -50px;
  color:#fff;
  height:19px;
  padding:5px 10px 0;
  position:absolute;
  right:0;
  top:1px;
  text-shadow:0 -1px 0 #5c5c5c;
  z-index:-1;
  font-size:12px;
  line-height:14px;
}

Ну вот в принципе и все, отдельное спасибо за возможность сделать анимированный вариант, моему земляку TRANE73, помог с кодом для изменения стандартной структуры тегов uCoz.

Понравилась статья? Перейди по рекламной ссылке ниже.

Раздел: Вид тегов ∫ Просмотров: 10522 ∫ 24.01.2013 ∫ 4.9

Теги: теги

Получайте актуальные статьи uCoz решениий прямо на ваш почтовый ящик.

» Оцени и добавь:

оцени статью

4.9

» Читайте также:

14 Комментариев Поделись своим мнением

Порядок вывода комментариев:

#14 Написал 777777rddyd, 04.12.2014 22:33

Цитатнуть

Круто, забираю себе.

#13 Написал Krixys, 13.12.2013 22:32

Цитатнуть

Чуваки вы как всегда на высоте =)

#12 Написал antina, 14.10.2013 19:31

Цитатнуть

думала, думада, куда такие теги..не знаю даже

#11 Написал Devix, 27.05.2013 21:04

Цитатнуть

Красивый вид тегов )))

#10 Написал cech, 08.04.2013 02:26

Цитатнуть

прохожий, ссылку на демонстрацию можно?

#9 Написал Проходивший мимо, 07.04.2013 18:27

Цитатнуть

не работает в Каталоге файлов, Каталоге статей, блоге, гостевой книге,

#8 Написал Vedmak, 26.01.2013 18:39

Цитатнуть

Интересно, но у анимации на мой взгляд слишком медленное выползание.

#7 Написал Arty Musatin, 25.01.2013 00:21

Цитатнуть

@cech Spasiba. teperi vseo haraso.

Kstati u vasheva saita esti malenkaia prablema. Kod bezapasnasti ploha viden i trudna atpraviti cammentarii.

#6 Написал cech, 25.01.2013 00:15

Цитатнуть

Мой косяк, вот это в css докинуть

Код

#newTags {
position:relative;
z-index:1;
}

1 2 »

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