Вид статистики для uCoz

Всем доброго дня, из этого материала вы узнаете как улучшить вид статистики на сайте ucoz, она будет отображать только количество людей онлайн. Все будет сделано на Html, без использования Js ну и конечно стилизуем с помощью CSS.

Для начала зайдем в Панель управления -> Настройки -> Общие настройки -> Активировать функцию "Кто Онлайн" на против ставим галочку.
Теперь активируем модуль статистика сайта, опять идём в Админ панель нажимаем на вкладку неактивные и активируем модуль.

Теперь, когда мы все активировали нужно поставить Html код, там где мы хотим видеть статистику. На пример это может быть первый или второй контейнер

Код

<?if($COUNTER$ || $ONLINE_COUNTER$)?>
  <div class="statistics-user">
  <div class="statistics-user-l">$ONLINE_COUNTER$</div>

  <span class="statistics-user-r">
  $COUNTER$
  <a href="#"><img src="http://uwebo4ka.3dn.ru/scripts/statistika/stat-img2.gif" alt="ucoz" /></a>
  <a href="#"><img src="http://uwebo4ka.3dn.ru/scripts/statistika/stat-img2.gif" alt="ucoz" /></a>
  </span>

  </div>
<?endif?>

И чтобы это все выглядело красиво установим css стили

Код

/* Функция Кто Онлайн для uCoz в стиле минимализм
------------------------------------------*/
.statistics-user {
  float:left;
  width:230px;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #CAD3DA;
  border-radius:5px;
}

.statistics-user-l {
  float:left;
  width:90px;
}

.statistics-user-l b,
.statistics-user-l div{
  float:left;
  width:90px;
}

.statistics-user-l b {
  padding-bottom: 3px;
  border-bottom: 1px solid #CAD3DA;
  font-size:14px;
  color:#666;
}

.statistics-user-l div{
  color:#999;
  height:37px;
  padding: 3px 0px 0px 37px;
  display:block;
  background: url(http://uwebo4ka.3dn.ru/scripts/statistika/statistics-user.png) no-repeat;
}

#onl1 {background-position:0px 0px;}
#onl2 {background-position:0px -35px;}
#onl3 {background-position:0px -69px;}
#onl3 b {border-bottom:none }

.statistics-user-r{
  float:right;
  width:88px;
  padding: 5px 0px 0px 7px;
  border-left: 1px solid #CAD3DA;
}

.statistics-user-r img{
  margin-bottom: 5px;
}

.statistics-user a:hover img {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=85);}

Автор материала:

Логин на сайте:

Группа:

Дата входа:

О материале:

Дата добавления: 07.08.2013 в 11:25

Материал просмотрен: 1282 раз

Категория: Скрипты и модификации для uCoz

Оставлены: 0 комментария

Рейтинг материала По мнению пользователей

4.0

Комментарии

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

Навигация

Статистика

Онлайн всего: 1

Гостей: 1

Пользователей: 0

Онлайн никого нет