Войти на сайт Регистрация
Добавить файлВ каталоге: 678
Информер Топ Постовиков для uCoz
15.11.2018
Информер Топ Постовиков для uCoz
  • 637 Просмотров:
  • 0 Скачиваний:
  • 0 Комментариев:
  • 5.0 Рейтинг:
  • (Голосов: 1)
Описание:
Зайдя на один сайт увидел красивый информер - Топ аплоадеров (пользователей) Решил добавить его в паблик, особенность информера в том. Что при наведении на иконки выдвигается небольшая информация о количестве файлов и т.д.

Установка:

1. Создаем информер

Кто не знает где это вот ссылка: http://адрес_вашего_сайта/panel/?a=informers

Информер с такими параметрами:

Название информера - Топ пользователей
Раздел - Пользователи
Способ сортировки - Количество файлов
Количество материалов - 4
Количество колонок - 2
Создать

Должен появится новый информер - и рядом с ним код вызова
Например $MYINF_1$ - у вас может быть другой

2)После этого меняем дизайн информера

Заходим в управление дизайном созданного информера

И заменяем весь код на этот:

Код
<style>
.place1 {background:url('http://7old.ru/ucoz-files/1/inf/trophy1.png') no-repeat center left; display:inline-block; padding-left:16px; height:16px; overflow:hidden; width:1px;}  
.place1 #text {display:inline-block; padding:0 3px;}  
.place2 {background:url('http://7old.ru/ucoz-files/1/inf/trophy2.png') no-repeat center left; display:inline-block; padding-left:16px; height:16px; overflow:hidden; width:1px;}  
.place2 #text {display:inline-block; padding:0 3px;}
.place3 {background:url('http://7old.ru/ucoz-files/1/inf/trophy3.png') no-repeat center left; display:inline-block; padding-left:16px; height:16px; overflow:hidden; width:1px;}  
.place3 #text {display:inline-block; padding:0 3px;}
.place4 {background:url('http://7old.ru/ucoz-files/1/inf/trophy4.png') no-repeat center left; display:inline-block; padding-left:16px; height:16px; overflow:hidden; width:1px;}  
.place4 #text {display:inline-block; padding:0 3px;}

div.chat-addtime span {-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;background:#83C315; display:inline-block; height:19px; line-height:18px; padding:0px 2px 0px 6px; color:#ffffff; font-size:12px; text-shadow:0px 1px 0px #6fa413;}

.topusers-elem-bg {display:inline-block; background:url('http://7old.ru/ucoz-files/1/inf/topusers.png') no-repeat 0 -25px; padding-left:4px; position:absolute; margin-left:61px;}
.topusers-elem-bg .topusers-elem-bg1 {display:inline-block; background:url('http://7old.ru/ucoz-files/1/inf/topusers.png') no-repeat 100% 0; padding:4px 4px 5px 0px; height:16px; line-height:16px;}

.torrents {background:url('http://7old.ru/ucoz-files/1/inf/torrents.png') no-repeat center left;}
.comments {background:url('http://7old.ru/ucoz-files/1/inf/comments.png') no-repeat center left;}

.torrents , .comments {display:inline-block; padding-left:16px; height:16px; overflow:hidden; width:1px;}
.torrents #text, .comments #text {display:inline-block; padding:0 3px;}
img#topusers {margin-bottom: 1px;width:86px; height:86px; border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15), inset 0 0 50px rgba(0, 0, 0, 0.35);;-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15), inset 0 0 50px rgba(0, 0, 0, 0.35);;;box-shadow: 0 0 5px rgba(0, 0, 0, 0.15), inset 0 0 50px rgba(0, 0, 0, 0.35);;}

img#topusers:hover {box-shadow: 0 0 5px rgba(0, 0, 0, 0.38), inset 0 0 50px rgba(0, 0, 0, 0.82);-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.38), inset 0 0 50px rgba(0, 0, 0, 0.82);-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.38), inset 0 0 50px rgba(0, 0, 0, 0.82);}
</style>

<a href="/index/8-$USER_ID$" target="_blank" style="color:#ffffff;">  
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$" title="Перейти в профиль" id="topusers"><?else?>  
<img src="http://7old.ru/ucoz-files/1/inf/no.png" id="topusers">  
<?endif?></a>  

<div class="chat-addtime" style="float:none; width:87px; margin-top:1px;">  
<span style="display:block; text-align:center;">  
<a href="/index/8-$USER_ID$" target="_blank" style="color:#ffffff;">  

<?if(len($USERNAME$)>11)?>  
<?substr($USERNAME$,0,11)?>  
<?else?>  
$USERNAME$  
<?endif?>  
</a>  
</span>  
</div>  
</center>  
<script type="text/javascript"> $('.place$NUMBER$').hover( function () {$(this).stop().animate({"width" : $('.place1 #text').width() + 6} , 250);}, function () {$(this).stop().animate({"width" : 1} , 250);} ); $('.torrents').hover( function () {$(this).stop().animate({"width" : $('.torrents #text').width() + 6} , 250);}, function () {$(this).stop().animate({"width" : 1} , 250);} ); $('.comments').hover( function () {$(this).stop().animate({"width" : $('.comments #text').width() + 6} , 250);}, function () {$(this).stop().animate({"width" : 1} , 250);} ); </script>


Теперь создаём новый блок (например через конструктор)

И называем его например "Топ пользователей"

В html код блока вставляем:

Код
$MYINF_1$


- меняем на свой (если у вас другой)

На этом всё.
Информер Топ Постовиков для uCoz" title="Скачать Информер Топ Постовиков для uCoz бесплатно, без смс и регистрации" target="_blank">Сервер Скачать файл
Источник: Неизвестно
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]