ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Красивый статистика "Кто онлайн" для uCoz

Красивый статистика "Кто онлайн" для uCoz

Красивый статистика "Кто онлайн" для uCoz
Это красиво созданный блог статистики для сайта, что выводит, кто онлайн на площадке. Сделать который можно в несколько оформление. Он устанавливается в блок-контейнере на портале, где идет по вверх значок с обозначением, но, а в самом низу функция на вывод всех, кто прошел регистрацию. К ней подключены шрифтовые кнопки, что придает современный облик. Есть славные переходы в стилистике и формы, это круг или квадрат, все реализовано в ручную, не говоря о темном или светлом ресурсе.

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

Проверено на тестовом:

Статистика для сайта код

Знаки по левой стороне:

Вывод кто онлайн

Подборка, как реально выставить по цветности:

Цветная подборка статистики сайта

HTML:

Код
<?if($COUNTER$ || $ONLINE_COUNTER$)?>  
  <div class="circle-tile ">  
  <a href="$USERS_LIST_URL$"><div class="circle-tile-heading dark-blue"><i class="fa fa-users fa-fw fa-3x"></i></div></a>  
  <div class="circle-tile-content dark-blue">  
  <div class="circle-tile-description text-faded"> $ONLINE_USERS_LIST$</div>  
  <div class="circle-tile-number text-faded"><?if($ONLINE_COUNTER$)?><hr />$ONLINE_COUNTER$<?endif?></div>  
  <a class="circle-tile-footer" href="$USERS_LIST_URL$">Все пользователи <i class="fa fa-chevron-circle-right"></i></a>  
  </div>  
  </div>  
<?endif?>

CSS:

Код
.circle-tile {  
  margin-bottom: 15px;  
  text-align: center;  
}  
.circle-tile-heading {
  border: 3px solid rgba(241, 235, 235, 0.45);
  border-radius: 100%;
  color: #FFFFFF;
  height: 80px;
  margin: 0 auto -40px;
  position: relative;
  transition: all 0.3s ease-in-out 0s;
  width: 80px;
}  
.circle-tile-heading .fa {  
  line-height: 80px;  
}  
.circle-tile-content {
  padding-top: 50px;
}  
.circle-tile-number {  
  font-size: 13px;  
  font-weight: normal;  
  line-height: 1;  
  padding: 5px 0 15px;  
}  
.circle-tile-footer {  
  background-color: rgba(42, 57, 72, 0.94);  
  color: rgba(162, 247, 255, 0.92);  
  display: block;  
  padding: 5px;  
  transition: all 0.3s ease-in-out 0s;  
}  
.circle-tile-footer:hover {  
  background-color: rgba(37, 45, 53, 0.84);  
  color: rgba(230, 240, 241, 0.8);  
  text-decoration: none;  
}

.circle-tile-heading.dark-blue:hover {
  background-color: rgba(38, 70, 103, 0.89);
}  
.dark-blue {
  background-color: rgba(54, 76, 99, 0.94);
}

В ответе за различные фигуры у названия.

Код
a.groupAdmin:before{color:rgba(255, 88, 0, 0.96);font-family: FontAwesome;content: "\f005";}  
a.groupModer:before{color:rgba(247, 157, 23, 0.96);font-family: FontAwesome;content: "\f05b";}  
a.groupAdmin:link,a.groupAdmin:active,a.groupAdmin:visited,  
a.groupModer:link,a.groupModer:active,a.groupModer:visited,  
a.groupUser:link,a.groupUser:active,a.groupUser:visited{color:rgba(255, 255, 255, 0.95);text-decoration:none;}  
a.groupAdmin:hover,a.groupModer:hover,a.groupUser:hover{color:rgba(197, 184, 32, 0.95);text-decoration:none;}

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

Источник: ps-studio.info
13 Октября 2017 Просмотров: 1764 Комментариев: (2)

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

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

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

Комментарии: 2
Melisa
Melisa 24 Октября 2017 22:391
0
Красивая статистика,возьму себе)
Kosten
Kosten 25 Октября 2017 01:572
0
Оригинально смотрится, и главное можно его по гамме цвета, и отлично подвести под свой дизайн сайта.
avatar