Вид тегов uCoz

Все привет =)

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


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

вид тегов uCoz

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

вид тегов uCoz

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

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

Код
<div class="tagItem"><a href="/search/%D0%B1%D0%BE%D0%B5%D0%B2%D0%B8%D0%BA/" rel="nofollow" class="eTag eTagGr25">css</a> (3)</div>

Слудующим шагом у нас уже будет установка, а для первого варианта тегов 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>

Код
<script type="text/javascript" src="http://mvcreative.ru/example/16/2/js/functions.js"></script>

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

Код
<div id="newTags"></div>

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

Код
$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.

Понравилась статья? Перейди по рекламной ссылке ниже.
Раздел: Вид тегов ∫ Просмотров: 12556 ∫ 24.01.2013 ∫ 4.6
Теги: теги
» Оцени и добавь:
оцени статью
4.6
» Читайте также:
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;
}
Вы зашли на сайт как незарегистрированный пользователь. Чтобы получить полный доступ к сайту, дополнительные возможности, пройдите пятиминутную регистрацию, либо войдите на сайт под свои логином.
Рубрики блога
uCoz решения
Новые комментарии
Почему то не работает помогите разобраться. Не переключает
handmade-veronica
27.12.2017
почему второй код не работает в IE и Mozilla? Отображается только в Opera и Yandex.
Первый код нигде не работает
1234669
07.12.2017
Кому скорость нужна будет - строка var speedFactor = 1; Меняете 1 на 0.5 - скорость уменьшается в 2 раза
johnshytov1995
30.11.2017
Цитата Nick6696 ()
НЕ работает на сайте построенном на Битриксе!!!(((

Всё работает, если в коде разбираться.
Всем:
В скрипте строка jQuery('body').append( snowflakesCanvas );отвечает за вывод блока со снежинками ПОСЛЕ тега body. Вместо body укажите,куда вам надо выводить + еще не забываем править стили css для этого блока(#snowflakesCanvas).
johnshytov1995
30.11.2017
Что говорят заказчики?
Наша команда сотрудничает с MVC достаточно продолжительное время. Мы очень довольны результатами работы. Рекомендуем!
Брович Денис, Россия
Заказывал шаблон, всё на высшем уровне, все что я просил было выполненно, даже больше, перевыполнено. Всё получилось просто супер, сочетания цветов и красота просто поражают.
Велисов Юрий, Украина
Приятно работать! Отзывчивость, исполнительность, заинтересованность в результате и качестве работы! Спасибо!
Смолен Аленксандо, Украина