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

Неординарная по стилю статистика для uCoz

Если вас не устраивает своя статистика, которая идет по установке. То после всего, когда поставите шаблон, вы можете ее изменить на скрипт Неординарная по стилю статистика для uCoz которая безусловно будет заметна. С ней идут стили и вы можете поменять цвет, если он не вписался ваши стили. Я множество видал вариантов статистики различного варианта, но вот который я хочу вам сейчас предоставить я вижу первый раз и сразу же в голове у меня промелькнуло то что я во что бы то не стало должен поделится с вами. Фишка в том данной статистики что стоят два горизонтальных столбика и на них надпись а стоит навести на неё мышкой так показывает сколько человек онлайн, гостей или пользователей. Так же мне что понравилось в этом скрипте так это то что он легко устанавливается.

И так для установки вам следует установить ниже приведённый код в нужное место на сайте.

Код

<hr />$ONLINE_COUNTER$$ONLINE_USERS_LIST$

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

Код

.tOnline,.gOnline,.uOnline {zoom: 1;width:100px;}
.tOnline:before, .tOnline:after {
  content: "";
  display: table;
}
.tOnline:after,.gOnline:after,.uOnline:after {
  clear: both;
}
.tOnline,.gOnline,.uOnline {
  position: relative;
  margin: 0 2px 8px 0px;
}
.tOnline:active,.gOnline:active,.uOnline:active {
  margin-top: 1px;
  margin-bottom: 7px;
}
.tOnline, .tOnline b,,.gOnline,.gOnline b,.uOnline b {
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tOnline,.gOnline,.uOnline {
  height: 26px;
  line-height: 23px;
  padding: 0 9px 0 8px;
  font-size: 12px;
  color: #555;
  text-shadow: 0 1px #fff;
  border-width: 1px 0 1px 1px;
  border-style: solid;
  border-color: #dadada #d2d2d2 #c5c5c5;
  border-radius: 3px 0 0 3px;
  background-color: #fafafa;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc), color-stop(100%, #f0f0f0));
  background-image: -webkit-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: -moz-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: -ms-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: -o-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: linear-gradient(top, #fcfcfc, #f0f0f0);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.tOnline:hover,.gOnline:hover,.uOnline;hover {
  text-decoration: none;
}
.tOnline:hover b,.gOnline:hover b,.uOnline:hover b {
  padding: 0 7px 0 6px;
  max-width: 40px;
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.tOnline:after {
  content: '';
  z-index: 3;
  position: absolute;
  top: 10px;
  right: -2px;
  width: 5px;
  height: 6px;
  opacity: .95;
  background: #eb6b22;
  border-radius: 3px 0 0 3px;
  -webkit-box-shadow: inset 1px 0 #99400e;
  box-shadow: inset 1px 0 #99400e;
}
.tOnline b {
  position: absolute;
  top: 1px;
  left: 100%;
  z-index: 2;
  overflow: hidden;
  max-width: 0;
  height: 24px;
  line-height: 21px;
  padding: 0 0 0 2px;
  opacity: .95;
  color: #fff;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  border: 1px solid;
  border-color: #d15813 #c85412 #bf5011;
  border-radius: 0 2px 2px 0;
  background-color: #eb6b22;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ed7b39), color-stop(100%, #df5e14));
  background-image: -webkit-linear-gradient(top, #ed7b39, #df5e14);
  background-image: -moz-linear-gradient(top, #ed7b39, #df5e14);
  background-image: -ms-linear-gradient(top, #ed7b39, #df5e14);
  background-image: -o-linear-gradient(top, #ed7b39, #df5e14);
  background-image: linear-gradient(top, #ed7b39, #df5e14);
  -webkit-transition-property: padding, max-width;
  -moz-transition-property: padding, max-width;
  -ms-transition-property: padding, max-width;
  -o-transition-property: padding, max-width;
  transition-property: padding, max-width;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -ms-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}

.gOnline:after {
  content: '';
  z-index: 3;
  position: absolute;
  top: 10px;
  right: -2px;
  width: 5px;
  height: 6px;
  opacity: .95;
  background: #65bb34;
  -webkit-box-shadow: inset 1px 0 #3a6b1e;
  box-shadow: inset 1px 0 #3a6b1e;
  border-radius: 3px 0 0 3px;
}
.gOnline b {
  position: absolute;
  top: 1px;
  left: 100%;
  z-index: 2;
  overflow: hidden;
  max-width: 0;
  height: 24px;
  line-height: 21px;
  padding: 0 0 0 2px;
  opacity: .95;
  color: #fff;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  border: 1px solid;
  border-radius: 0 2px 2px 0;
  border-color: #549b2b #4f9329 #4b8b27;
  background-color: #65bb34;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #71ca3f), color-stop(100%, #5aa72e));
  background-image: -webkit-linear-gradient(top, #71ca3f, #5aa72e);
  background-image: -moz-linear-gradient(top, #71ca3f, #5aa72e);
  background-image: -ms-linear-gradient(top, #71ca3f, #5aa72e);
  background-image: -o-linear-gradient(top, #71ca3f, #5aa72e);
  background-image: linear-gradient(top, #71ca3f, #5aa72e);
  -webkit-transition-property: padding, max-width;
  -moz-transition-property: padding, max-width;
  -ms-transition-property: padding, max-width;
  -o-transition-property: padding, max-width;
  transition-property: padding, max-width;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -ms-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}

.uOnline:after {
  content: '';
  z-index: 3;
  position: absolute;
  top: 10px;
  right: -2px;
  width: 5px;
  height: 6px;
  opacity: .95;
  background: #56a3d5;
  -webkit-box-shadow: inset 1px 0 #276f9e;
  box-shadow: inset 1px 0 #276f9e;
  border-radius: 3px 0 0 3px;
}

.uOnline b {
  position: absolute;
  top: 1px;
  left: 100%;
  z-index: 2;
  overflow: hidden;
  max-width: 0;
  height: 24px;
  line-height: 21px;
  padding: 0 0 0 2px;
  opacity: .95;
  color: #fff;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  border: 1px solid;
  border-radius: 0 2px 2px 0;
  border-color: #3591cd #318cc7 #2f86be;
  background-color: #56a3d5;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6aaeda), color-stop(100%, #4298d0));
  background-image: -webkit-linear-gradient(top, #6aaeda, #4298d0);
  background-image: -moz-linear-gradient(top, #6aaeda, #4298d0);
  background-image: -ms-linear-gradient(top, #6aaeda, #4298d0);
  background-image: -o-linear-gradient(top, #6aaeda, #4298d0);
  background-image: linear-gradient(top, #6aaeda, #4298d0);
  -webkit-transition-property: padding, max-width;
  -moz-transition-property: padding, max-width;
  -ms-transition-property: padding, max-width;
  -o-transition-property: padding, max-width;
  transition-property: padding, max-width;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -ms-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}

Вот и всё, мы смогли с вами установить данное чудо и улучшить хоть на чуть чуть наш сайт!

19 Сентября 2015 Просмотров: 1322 Комментариев: (15)

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

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

Kosten

Похожие материалы

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

Комментарии: 15
Порядок вывода комментариев: Сопрано 19 Сентября 2015 21:24¹ 0 Как только статистику не переделывают, и здесь она стоит в самом низу. Здесь главное, чтоб в ней отражались, а потом можно устанавливать, не знаю, но так считаю. workman 19 Сентября 2015 21:25² 0 Классненько. И самое главное что без файлов (картинок) лишних. Только потом просто нужно будет сжать немного css стиль, или прописать отдельным файлом Kosten 19 Сентября 2015 21:28³ 0 Не разу не приходилось видеть такую статистику на порталах. ЕЕгде ставить в блоге? workman 19 Сентября 2015 21:31⁴ 0 Не обязательно. Можно поменять на стандартную в блоке Kosten 19 Сентября 2015 21:33⁵ 0 Она же показывает только когда на ее наводишь или сразу все видно. workman 19 Сентября 2015 21:35⁶ 0 Так можно будет убрать фокус и будет показывать всегда Kosten 19 Сентября 2015 21:58⁷ 0 Не знаю, наверное будишь первым, кто создаст, просто если социального сайта ты зашел, с ним кнопка идет в комментариях и ее нужно обязательно оставить. Это может быть как почтовый ящик Яндекс или вообще профиль с гугл плюс. Kosten 19 Сентября 2015 21:59⁸ 0 Я про комментарий говорю. Про статистику сказать не чего не могу, так как не устанавливал и только вижу, что создана под светлый дизайн. workman 19 Сентября 2015 22:04⁹ 0 Так ее можно будет перекрасить FeStemBer 19 Сентября 2015 22:25¹⁰ 0 Точно не помню сайт, но видел на светлом дизайне, а дизайн его, который раньше всегда рип на его был, название их 4 букв, так и не поняв что означает. workman 19 Сентября 2015 22:34¹¹ 0 Так смотрите здесь в статистике, как он работает ZruBkul 19 Сентября 2015 22:51¹² 0 workman, смотрится нормально, и по теме поставлено, ине понравилась ваша мысль. Kosten 19 Сентября 2015 22:51¹³ 0 Сейчас скрин скину. Kosten 19 Сентября 2015 22:53¹⁴ 0 Ты что убрал, поставил стандарт, мне кажется та лучше смотрелась, и можно сделать чтоб не наводить и показывало, хотя изначально было норм.
1 2 »