Описание
Как установить?
Очень красивый и стильный вид статистики для вашего сайта, очень интересное строение. Каждый счетчик обведен в свой цвет, Счетчик который считает сколько всего на сайте пользователей , обведен в оранжевый цвет, пользователи в зеленый, а гости в желтый
Установка
1. CSS-код, необходимый для стилизации элементов, вставьте в любое место в своей Таблице стилей:
2. HTML-код, который необходимо вставить вместо $ONLINE_COUNTER$:
3. И, собственно, скрипт, который заставит работать всё это, вставьте сразу после HTML-кода:
<script>
$('#tnum').text($('#onl1 b').text());
$('#gnum').text($('#onl2 b').text());
$('#unum').text($('#onl3 b').text());
</script>
Установка
1. CSS-код, необходимый для стилизации элементов, вставьте в любое место в своей Таблице стилей:
Код
.statistics {margin: 20px 0 17px; text-align: center;}
.statistics .block {display: inline-block; margin: 0 8px; position: relative;}
.statistics .block div {border: 1px solid; border-radius: 50%; width: 60px; height: 60px; line-height: 53px; font-size: 16px;}
.statistics span {display: block; border-radius: 3px; width: 54px; height: 20px; line-height: 20px; font-size: 10px; color: #fff; text-transform: uppercase; position: absolute; right: 3px; top: 47px;}
.statistics .block:nth-of-type(1) div {border-color: #ca6539; color: #ca6539;}
.statistics .block:nth-of-type(1) span {background: #ca6539;}
.statistics .block:nth-of-type(2) div {border-color: #8bca39; color: #8bca39;}
.statistics .block:nth-of-type(2) span {background: #8bca39;}
.statistics .block:nth-of-type(3) div {border-color: #cac839; color: #cac839;}
.statistics .block:nth-of-type(3) span {background: #cac839;}
.statistics .block {display: inline-block; margin: 0 8px; position: relative;}
.statistics .block div {border: 1px solid; border-radius: 50%; width: 60px; height: 60px; line-height: 53px; font-size: 16px;}
.statistics span {display: block; border-radius: 3px; width: 54px; height: 20px; line-height: 20px; font-size: 10px; color: #fff; text-transform: uppercase; position: absolute; right: 3px; top: 47px;}
.statistics .block:nth-of-type(1) div {border-color: #ca6539; color: #ca6539;}
.statistics .block:nth-of-type(1) span {background: #ca6539;}
.statistics .block:nth-of-type(2) div {border-color: #8bca39; color: #8bca39;}
.statistics .block:nth-of-type(2) span {background: #8bca39;}
.statistics .block:nth-of-type(3) div {border-color: #cac839; color: #cac839;}
.statistics .block:nth-of-type(3) span {background: #cac839;}
2. HTML-код, который необходимо вставить вместо $ONLINE_COUNTER$:
Код
<div class="statistics">
<div class="block">
<div id="tnum"></div>
<span>Всего</span>
</div>
<div class="block">
<div id="unum"></div>
<span>Польз.</span>
</div>
<div class="block">
<div id="gnum"></div>
<span>Гости</span>
</div>
</div>
<div style="display: none;">$ONLINE_COUNTER$</div>
<div class="block">
<div id="tnum"></div>
<span>Всего</span>
</div>
<div class="block">
<div id="unum"></div>
<span>Польз.</span>
</div>
<div class="block">
<div id="gnum"></div>
<span>Гости</span>
</div>
</div>
<div style="display: none;">$ONLINE_COUNTER$</div>
3. И, собственно, скрипт, который заставит работать всё это, вставьте сразу после HTML-кода:
Код
<script>
$('#tnum').text($('#onl1 b').text());
$('#gnum').text($('#onl2 b').text());
$('#unum').text($('#onl3 b').text());
</script>
Проблемы с модом? И так если у вас вдруг не работает мод, или выскакивает какая нибудь ошибка, мы попробуем Вам помочь тут Обратная связь
Пожаловаться
Нашли ошибку? Или хотите пожаловаться?
Нашли ошибку? Или хотите пожаловаться?
Популярные шаблоны
Больше шаблонов
Комментариев 0
Информация о материале
- Опубликовано Понедельник, 01:07
- Категория Скрипты
- Просмотры 293
- Источник
Не указан
Навигация на сайте
Мини-чат
Последние комментарии
Опрос по сайту
Статистика Сайта
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сегодня нас посетило
1