Я вам предлагаю два варианта, один упрощенный, другой анимированный, какой выбрать для себя решайте сами.
Теперь давайте разберемся со стандартной структурой тегов созданных при помощи информера, для этого вначале установим этот информер. Перейдите в ПУ / Инструменты / Информеры, кликаем создать новый информер, раздел выбираем теги, способ вывода - список тегов, а остальное по желанию. Полученный код вызова информера $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, скопируйте данный код в самый низ страницы, перед тегом
Код
<script type="text/javascript"src="http://mvcreative.ru/example/16/2/js/functions.js"></script>
И в то место куда мы устанавливали код вызова информера $MYINF_#$, рядом поставим данный код.
То есть в итоге получится вот так:
Код $MYINF_#$ <div id="newTags"></div>
Ну а дальше все тоже самое, установка 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;
}
Вариант оранжевый
Код
.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;
}
Вариант синий
Код
.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;
}
Готово!
| 
