Стильный вид статистики онлайн на сайт uCoz - Информеры - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Информеры


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

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

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

Чтоб она полноценно работала, вам нужно активировать модуль статистики сайта, все это делается в алмин панели.

Потом находим оператор, основном он находиться в контейнере, это правои или левом в блоке.

Код
$ONLINE_COUNTER$


И нужно его заменить, а точнее убрать и поставить этот скрипт.

Код
<div class="b_stat"><div class="item total">  
<div id="tnum" class="num"></div>  
Всего  
</div>  
<div class="item users">  
<div id="unum" class="num"></div>  
Юзеры  
</div>  
<div class="item guests">  
<div id="gnum" class="num"></div>  
Гости  
</div>  
<div style="display:none;">$ONLINE_COUNTER$</div>  
<script type="text/javascript">  
$('#tnum').text($('#onl1 b').text());  
$('#gnum').text($('#onl2 b').text());  
$('#unum').text($('#onl3 b').text());  
</script></div>


Остается подключить стили в CSS где также вы можете выводить цвета и форму.

Код
.b_stat {margin:0 0 0 40px;display:inline-block;}  
.item {text-align: center; float: left; margin: 10px 10px 0 10px;font-size:12px !important;text-transform:uppercase;}  
.num {border: 2px solid; border-radius: 3px;line-height: 30px;width: 30px;margin: auto;text-align: center; font-size:16px;}  
#tnum {border-color: #222121;color: #222121;}  
#unum {border-color: #f96c04;color: #f96c04;}  
#gnum {border-color: #95a5a6;color: #95a5a6;}


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

Важно!

При копировании материала указывать ссылку на источник.

- 406
- 31-Января-2017
- 0
Материал разместил:

Похожий материал
Статьи сайта