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

Информер подсчета численности для uCoz

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

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

Так реально выглядит после как вы поставите:

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

1. Там где будет выводиться информер вставляем код:

Код

<section class="mainpage-stats-block">
  <div class="main_width">
  <h2 class="section-title animated fadeInDown visible" data-animation="fadeInDown" data-animation-delay="400">$SITE_NAME$ в цифрах</h2>
  <div class="statistics-grid">
  <div class="statistics-grid-item animated fadeIn visible" data-animation="fadeIn" data-animation-delay="800">
  <div class="value">
  <i class="fa fa-user"></i>
  <div>$MYINF_2$</div>
  </div>
  <div class="label">Пользователей</div>
  </div>

  <div class="statistics-grid-item animated fadeIn visible" data-animation="fadeIn" data-animation-delay="1000">
  <div class="value">
  <i class="fa fa-comments"></i>
  <div>$MYINF_3$</div>
  </div>
  <div class="label">Сообщений</div>
  </div>

  $MYINF_4$
  </div>
  </div>
  </section>

  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato:300,400,700,900">
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&subset=latin,latin-ext,cyrillic">
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=PT+Sans+Caption:regular,italic,bold,bolditalic&subset=latin,latin-ext,cyrillic">
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=latin,cyrillic">
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:400,100,300,500">
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

2. В таблицу стилей CSS в самый конец:

Код

.mainpage-stats-block {
background: #fff url(http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/st-pad.jpg);
padding: 20px 0;
text-align: center;
margin: 0 0 0px;
  }

  .mainpage-stats-block .section-title {
font-size: 22px;
font-weight: 400;
text-transform: uppercase;
font-family: 'Open Sans', sans-serif;
color: #6f6f6f;
margin: 0 0 20px 0;
text-align: center;
  }

  .statistics-grid-item {
display: inline-block;
width: 24%;
text-shadow: 1px 1px 1px #fff;
  }

  .mainpage-stats-block .value {
font: normal 23px 'Open Sans', sans-serif;
color: #94A8BD;
  }

  .mainpage-stats-block .value ~ .label {
color: #696969;
font: normal 13px 'Open Sans', sans-serif;
  }

  .fast-links {
float: left;
width: 250px;
  }

  .fast-links figure {
margin: 0;
height: 86.66px;
overflow: hidden;
position: relative;
  }

  .fast-links a,
  .fast-links .overlayed,
  .fast-links .overlayed span {
color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
  }

  .fast-links .overlayed {
-webkit-transition: background 200ms ease-in-out;
-moz-transition: background 200ms ease-in-out;
-ms-transition: background 200ms ease-in-out;
-o-transition: background 200ms ease-in-out;
transition: background 200ms ease-in-out;
background: rgba(0, 0, 0, .2);
  }

  .fast-links .overlayed:hover {
background: rgba(0, 0, 0, .1);
  }

  .fast-links .overlayed span {
font-family: 'PT Sans Capture', sans-serif;
font-size: 15px;
top: 50%;
margin: -6px 0 0;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 1px #000;
  }

3. Далее Инструменты - Информер и создаем 3 информера:

1 информер [ Счетчики для пользователей · Материалы · всех, по группам, по полу, по зодиаку, по дням (сегодня, вчера, 7 дней, 30 дней) ]

Код

$ALL_USERS$

2 информер [ Счетчики материалов · Материалы ]

Код

$FORUM_T$

3 информер [ Счетчики для пользователей · Материалы · всех, по группам, по полу, по зодиаку, по дням (сегодня, вчера, 7 дней, 30 дней) ]

Код

<div class="statistics-grid-item animated fadeIn visible" data-animation="fadeIn" data-animation-delay="1200">
<div class="value">
<i class="fa fa-gamepad"></i>
<div>$GROUP_2$</div>
</div>
<div class="label">Игроков</div>
</div>
<div class="statistics-grid-item animated fadeIn visible" data-animation="fadeIn" data-animation-delay="1400">
<div class="value">
<i class="fa fa-ban"></i>
<div>$GROUP_255$</div>
</div>
<div class="label">Банов</div>
</div>

Находим в коде MYINF_2, MYINF_3, MYINF_4 и заменяем на новые, свои созданные.

17 Декабря 2017 Просмотров: 1662 Комментариев: (0)

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

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

Kosten

Комментарии: 0