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