Облако тегов для UCOZ
827материалов
228тем на форуме
3004комментария
6159пользователей

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


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

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

То есть в итоге получится вот так: 
Код
$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;   
}

ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 01.07.2013 в 17:01
Материал просмотрен: 741 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта