» »

Топ пользователей uCoz как на сайте Урааа


Топ пользователей uCoz как на сайте Урааа

Стильно сделан скрипт топ пользователей, который выводит самых активных. Вы здесь видите 8 исполнителей, которые всех больше набрали постов на ресурсе и на темно прозрачной планке, выводит в цифрах. У кого больше, как полагается он стоит на самом первом месте, в нашем случай в первом ряду. Здесь нужно сразу сказать, что в стилях нет авто, это вы просто ставите и он автоматически находит место. Вам нужно будет потом после установке, его подогнать, как вам нужно. Также можете вместо восьми сделать шесть, главное чтоб было четно, ведь 2 колонки будет. Вы можете рассмотреть еще один информер, который оригинально как по дизайн и функциям своим сделан.

Чтоб понятней было, вы можете на изображение посмотреть, какие стили отвечают и за что.



Установка:

Создаем информер с такими параметрами.

Способ сортировки по Репутации. Количество материалов – 8, а количество колонок – 1

Потом открываем его и все чистим там и ставим этот скрипт и сохранить.

Код
<div class="top_user"><a href="$PROFILE_URL$"><span>$REPUTATION$</span></a><div class="top_user_black"></div><img src="$AVATAR_URL$" alt="$USERNAME$" /></div>


Таблицу стилей CSS:

Код
.top_use1s {width:300px;height:180px;background:#1d1d1d;font-family:Tahoma,sans-serif}  
.top_user {width:75px;height:90px;overflow:hidden;float:left;background:#1d1d1d}  
.top_user img {width:90px;margin-left:-7px}  
.top_user a {width:75px;height:90px;position:absolute;z-index:2;text-decoration:none}  
.top_user a:hover {background:rgba(255,255,255,0.1)}  
.top_user a span {color:#FFF;padding-top:70px;text-align:center;display:block;font-size:11px}  
.top_user_black {position:absolute;width:75px;height:24px;background:rgba(0,0,0,0.3);margin-top:66px}


Теперь остается разместить информер и номер его, который вы создали.

Код
<div class="top_use1s">$MYINF_Здесь вам номер$</div>


Основном ставят в блок, но как уже говорил, он может быть разный по размерам, тогда в стилях все ровняем, по изображению смотрим и там все очень понятно показано, как делать.

Источник: http://yraaa.ru/
07.04.2016 Просмотров: 487 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Комментарий: 3
FeStemBer
FeStemBer 08.04.2016 16:201
0
Что то помню, раньше на источнике стоял этот информер и долго, так нормально смотрелся на светлом дизайн сайте.
tsakonter
tsakonter 08.04.2016 16:252
0
Но так, лучше намного других информер смотрится, здесь все понятно, вывод постов и хватит, на других еще что то добавляют, что вообще не нужно.
csretven
csretven 08.04.2016 17:013
0
Вообще то раньше у у меня такой информер стоял на блоге, отлично вписался, его не нужно ставить как навигацию самым первым блоком, а вот замыкающим, это нормально.
avatar