ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Цветной информер Топ 5 пользователей для uCoz

Цветной информер Топ 5 пользователей для uCoz

Цветной информер Топ 5 пользователей для uCoz
Один из важных элементов на сайте, является информер, что аналогично несет информацию. Здесь он будет выводить пользователя по рангу. Он отличается от других не только самим форматом или визуальном, здесь за каждым пользователем, будет закреплен свой оттенок цвета, что безусловно после установки ваш сайт станет более ярким по палитре цвета. По каким параметрам ставить, здесь веб мастер в самих настройках может выставить, но по умолчанию от источника идет в рангах, это у кого больше значение, тот в топ выше становится.

Работа его простая как видите, но безусловно по мне есть небольшие минусы, которое можно исправить, но все оставил как есть. Это длинна его, да она больше стандартного, но все сделано на стилях, а значит за счет стилистики вы можете сделать меньше или изменить оттенок под свой шаблон. Все отлично работает и выводит Avatar, где к нему будут прикреплены данные, это логин и в какой группе находится. Что на светлом или темном смотрится прекрасно, и уникально, где идет шапка в самом верху и по обоим сторонам различие в положение.

Здесь на темном фоне выставлено, что как полагаете, можно использовать одну палитру, все зависит от вас и как вы хотите его видеть.

Информер сайта для вывода материалов

Приступаем к установке:

В админ панели создаем информер с тамими параметрами.

[ Пользователи · Материалы · Репутация · Материалы: 5 · Колонки: 1 ]

HTML

Код
<?if($NUMBER$="1")?>  
<a href="$PROFILE_URL$" title="Перейти в профиль $USERNAME$">  
  <div class="gilisticexpi_alidocious">  
<div class="gilisticexpi_alidocious_ava_bs"><div class="gilisticexpi_alidocious_ava_bs_img"><?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?>  
<img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/zornet.jpg"><?endif?></div></div>  
  <div class="gilisticexpi_alidocious_user">  
  <b>$USERNAME$</b>  
  <span>$GROUP_NAME$</span>  
  </div>  
</div>  
</a>  
<?endif?>  

<?if($NUMBER$="2")?>  
<a href="$PROFILE_URL$" title="Перейти в профиль $USERNAME$">  
  <div class="gilisticexpi_alidocious2">  
<div class="gilisticexpi_alidocious_ava_bs2"><div class="gilisticexpi_alidocious_ava_bs_img2"><?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?>  
<img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/zornet.jpg"><?endif?></div></div>  
  <div class="gilisticexpi_alidocious_user2">  
  <b>$USERNAME$</b>  
  <span>$GROUP_NAME$</span>  
  </div>  
</div>  
</a>  
<?endif?>  

<?if($NUMBER$="3")?>  
<a href="$PROFILE_URL$" title="Перейти в профиль $USERNAME$">  
  <div class="gilisticexpi_alidocious pilification">  
<div class="gilisticexpi_alidocious_ava_bs"><div class="gilisticexpi_alidocious_ava_bs_img"><?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?>  
<img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/zornet.jpg"><?endif?></div></div>  
  <div class="gilisticexpi_alidocious_user">  
  <b>$USERNAME$</b>  
  <span>$GROUP_NAME$</span>  
  </div>  
</div>  
</a>  

<?endif?>  

<?if($NUMBER$="4")?>  
<a href="$PROFILE_URL$" title="Перейти в профиль $USERNAME$">  
  <div class="gilisticexpi_alidocious2 thyroidism">  
<div class="gilisticexpi_alidocious_ava_bs2"><div class="gilisticexpi_alidocious_ava_bs_img2"><?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?>  
<img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/zornet.jpg"><?endif?></div></div>  
  <div class="gilisticexpi_alidocious_user2">  
  <b>$USERNAME$</b>  
  <span>$GROUP_NAME$</span>  
  </div>  
</div>  
</a>  
<?endif?>  
<?if($NUMBER$="5")?>  
<a href="$PROFILE_URL$" title="Перейти в профиль $USERNAME$">  
  <div class="gilisticexpi_alidocious zornet_ru_gersan">  
<div class="gilisticexpi_alidocious_ava_bs"><div class="gilisticexpi_alidocious_ava_bs_img"><?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?>  
<img src="http://zornet.ru/ZORNET-RU/ZR/Alinuversa/zornet.jpg"><?endif?>  
</div></div>  
  <div class="gilisticexpi_alidocious_user">  
  <b>$USERNAME$</b>  
  <span>$GROUP_NAME$</span>  
  </div>  
</div>  
</a>  
<?endif?>

CSS

Код
.gilisticexpi_alidocious_user_bs {  
  background: rgba(78, 72, 72, 0.98);  
  padding: 30px 10px;  
  color: rgba(249, 243, 243, 0.81);  
}  
.gilisticexpi_alidocious_user_bs b {  
  display: block;  
  text-align: center;  
  font-size: 22px;  
}  
.gilisticexpi_alidocious_user_bs span {  
  display: block;  
  text-align: center;  
  font-size: 14px;  
  font-weight: 100;  
  color: rgba(243, 239, 239, 0.7);  
}  

.gilisticexpi_alidocious {  
  background: #5392CF;  
  padding: 30px 10px;  
  color: rgba(249, 243, 243, 0.97);  
  position: relative;  
  overflow: hidden;  
}  
.gilisticexpi_alidocious_user b {  
  display: block;  
  font-size: 18px;  
}  
.gilisticexpi_alidocious_user span {  
  display: block;  
  font-size: 14px;  
  font-weight: 100;  
  color: rgba(249, 242, 242, 0.7);  
}  

.gilisticexpi_alidocious_ava_bs {  
  position: absolute;  
  right: -35px;  
  top: 50%;  
  margin-top: -75px;  
  width: 150px;  
  height: 150px;  
  overflow: hidden;  
  border-radius: 50%;  
  background: rgba(247, 242, 242, 0.98);  
}  

.gilisticexpi_alidocious_ava_bs_img {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 50%;
  margin: 31px 3px 3px 20px;
  border: 5px solid rgba(74, 128, 181, 0.96);
}  
.gilisticexpi_alidocious_ava_bs_img img {  
  object-fit: cover;  
  width: 80px;  
  height: 80px;  
}  

.gilisticexpi_alidocious2 {  
  background: #5C944D;  
  padding: 30px 10px;  
  color: rgba(249, 243, 243, 0.99);  
  position: relative;  
  overflow: hidden;  
}  
.gilisticexpi_alidocious_user2 b {  
  display: block;  
  font-size: 18px;  
  text-align: right;  
}  
.gilisticexpi_alidocious_user2 span {  
  display: block;  
  font-size: 14px;  
  font-weight: 100;  
  color: rgba(249, 242, 242, 0.7);  
  text-align: right;  
}  

.gilisticexpi_alidocious_ava_bs2 {  
  position: absolute;  
  left: -35px;  
  top: 50%;  
  margin-top: -75px;  
  width: 150px;  
  height: 150px;  
  overflow: hidden;  
  border-radius: 50%;  
  background: rgba(249, 244, 244, 0.96);  
}  

.gilisticexpi_alidocious_ava_bs_img2 {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 50%;
  border: 5px solid rgba(73, 121, 60, 0.97);
  margin: 31px 0px 0px 39px;
}  
.gilisticexpi_alidocious_ava_bs_img2 img {  
  object-fit: cover;  
  width: 80px;  
  height: 80px;  
}  

.pilification {  
  background: rgba(208, 162, 48, 0.97);  
}  

.pilification .gilisticexpi_alidocious_ava_bs_img {  
  border: 5px solid rgba(173, 133, 32, 0.99);  
}  

.thyroidism {  
  background: rgba(88, 85, 85, 0.96);  
}  

.thyroidism .gilisticexpi_alidocious_ava_bs_img2 {  
  border: 5px solid rgba(74, 72, 72, 0.95);  
}  

.zornet_ru_gersan {  
  background: rgba(151, 120, 169, 0.97);  
}  
.zornet_ru_gersan .gilisticexpi_alidocious_ava_bs_img {  
  border: 5px solid rgba(125, 93, 142, 0.96);  
}

Теперь осталось установить, где хотите видеть.

Код
<div class="gilisticexpi_alidocious_user_bs">  
  <div class="gilisticexpi_alidocious_user_bs_name">  
  <b>TOP-5</b>  
  <span>ЛИДЕРЫ САЙТА</span>  
  </div>  
</div>  
$MYINF_ваш номер$

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

Автор: waak
Источник: Talantlev.ucoz.ru
12 Января 2018 Просмотров: 1778 Комментариев: (21)

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

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

Оставь свой отзыв

Комментарии: 21
waak
waak 12 Января 2018 19:481
+1
Огромное спасибо автору! 11a
Kosten
Kosten 12 Января 2018 20:243
+1
Все правильно, вид оригинальный и на тематические сайты он найдет свое место.
noavatar
spinaclan 13 Января 2018 00:468
0
Ты крутой, мне нравятся все твои работы!
waak
waak 13 Января 2018 01:3810
0
Спасибо!
noavatar
spinaclan 13 Января 2018 15:2213
0
Пожалуйста!
Kosten
Kosten 19 Февраля 2018 22:1021
0
waak, твой пост попал в быстрые ссылки, не понимаю как Яндекс ранжирует.)

Melisa
Melisa 12 Января 2018 20:222
0
классный вид информера)
First-1
First-1 12 Января 2018 21:014
0
Даже очень не плохо
Kosten
Kosten 12 Января 2018 21:045
0
Здесь когда на тестовый ставил информер, то место под изображение пользователя не корректно выставились, что пришлось стиль добавить margin: 31px 3px 3px 20px; - это если что, здесь редактируем.
First-1
First-1 13 Января 2018 00:266
0
Задумка очень не плохая. Не ставил, но судя по скрину, так смотрится современно. Правда как по мне, так не хватает одной строки, вывод по рейтингу, репе или материалам.... Всё таки топ или рейтинг какой-то. Но не вижу проблем добавить эту строку.
Kosten
Kosten 13 Января 2018 00:307
0
А это точно, что то не подумал, можно просто выставить шрифтовую кнопку и прикрепить к нему оператор, что за вывод рейтинг отвечает. Но в описание подчеркнул. что можно и на другие функций вывести, не только по рейтинг, а как пример, по комментарием.
noavatar
spinaclan 13 Января 2018 00:489
0
Думаю нужно обязательно ставить активную ссылку на первоисточник! Надоело выделять и копировать, что бы перейти на сайт.

Человек трудится старается, его контент, вы берёте его контент, ставьте ссылку на него активную.

Это называется даш на даш!
waak
waak 13 Января 2018 01:3911
0
Хорошо хоть что то указывают
Kosten
Kosten 13 Января 2018 13:1312
0
А, что некоторые не указывают, если так важно, чтоб быстрее переходить, под ссылкой.
noavatar
spinaclan 13 Января 2018 15:2514
-1
Очень важно, и по закону тоже! Должна быть гиппер ссылка, а не просто текст.
Kosten
Kosten 13 Января 2018 16:3115
0
Скиньте на закон? Он по любому есть, на авторство, не могу найти. Просто мне знакома тема по теме новостного порядка, там ставят гипер ссылку, что бы не было не какой мути в судебном порядке, так как гипер ссылка, все расставит на место. Так как основном там клевета идет. А здесь авторство, вот не могу найти, да знаю, что автора и ссылку нужно на автора оставлять, про гипер ссылку не читал.
Kosten
Kosten 13 Января 2018 16:3616
0
Просто эта тема щепетильная, хоть ты оставил активную ссылку и автора написал, тебе все равно придет страйк, если автор это захочет, и там хоть гипер ссылка или просто написано, не какой разницы, так как по этому положению проверено. точнее стояла гипер ссылка и автор указан был, все как нужно, но жалоба пришла на удаление.

Просто эту тема трактуют каждый по своему.
Webmaster32
Webmaster32 14 Января 2018 03:3317
0
Для справки Закон об авторских и смежных правах кому интересно пара статей закона о использовании произведения без согласия автора:
Kosten
Kosten 14 Января 2018 11:4518
0
Про, то, когда другой берет материал, что он должен указывать, просто про гипер ссылку не нашел, за которую здесь говорили, что можно сказать, каждый трактует как сам видит, один скажет да мне все равно ссылаются на меня, как то не до этого - ходить искать, другой как раз будет искать и говорить, чтоб обязательно ссылка была под клик.
Webmaster32
Webmaster32 14 Января 2018 15:1219
0
Пл поводу кликабельных ссылок на сайт источник автора материала нигде подобной информации не находил, весь закон об авторстве перечитал и ничего подобного не нашёл, только написано что требуется указывать автора и источник где взят материал, а кликабельный должен быть источник или нет об этом ни слова.
-SAM-
-SAM- 17 Января 2018 00:4320
+1
Вот по этому поводу писал здесь, читайте (как там написал - так и нужно ставить, если требуют ставить иначе - можно не выполнять просьбу).
avatar