регистрация
856материалов
3260комментариев
227тем на форуме
6730пользователей

Информер комментариев для uCoz


Описание:

Необычный информер последних комментариев, снова сделан на MobilySlider. Идея была взята с обыкновенной картинки, на просторах интернета.

Установка:

Для начала давайте зайдем в раздел "Информеры" и создадим информер с такими параметрами:
  • Раздел: Комментарии
  • Модуль: Все модули
  • Количество материалов: 5 (обязательно)
  • Количество колонок: 1 (обязательно)
  • Максимальная длина текста комментария: не важно
Теперь в шаблон информера вставим код:
Код
<div class="item">       
<div id="cont">       
<div id="comment">$MESSAGE$</div>       
<div id="information"><img src="$USER_AVATAR_URL$" id="avatars"><img src="http://webmaster-ucoz.ru/master/avatar.png" id="avatars"><b>$USERNAME$</b><br/><a href="$ENTRY_URL$">Перейти к комментарию</a></div>       
</div>       
</div>

/img/noavatar.png - замените на свой файл (нет аватара)

Заходим в таблицу стилей CSS и ставим код:
Код
.slider {       
float:left;       
width:300px;       
height:200px;       
position:relative;       
padding:0px;       
}       

.sliderContent {       
float:left;       
width:300px;       
height:200px;       
clear:both;       
position:relative;       
overflow:hidden;       
border:1px solid #eee;       
background:#eee;       
-webkit-border-radius:6px;       
-moz-border-radius:6px;       
border-radius:6px;       
}       

.sliderArrows a {       
display:none;       
text-indent:-9999px;       
outline:none;       
}       

.sliderContent .item {       
position:absolute;       
width:300px;       
height:200px;       
background: #eee;       
}       

.sliderBullets {       
position:absolute;       
top:10px;       
right:20px;       
z-index:50;       
margin:0px;       
border:1px solid #ccc;       
padding:5px 5px 5px 3px;       
-webkit-border-radius:10px;       
-moz-border-radius:10px;       
border-radius:10px;       
}       

.sliderBullets a {       
display:block;       
float:left;       
text-indent:-9999px;       
outline:none;       
margin-left:5px;       
width:9px;       
height:9px;       
background:url(http://webmaster-ucoz.ru/ucoz/img/img/bull.png) no-repeat;       
background-position:left;       
}       

.sliderBullets .active {background-position:right;}       

.sliderContent a {outline:none;}       

a img {border:none;}       

.sliderContent #cont{       
padding:0px 10px 10px 20px;       
display:block;       
overflow:hidden;       
}       

.sliderContent h2{       
font-size:15px!important;       
color:#666!important;       
margin-left:20px;       
}       

#comment{       
padding:10px;       
text-align:left;       
width:240px;       
height:80px;       
color:#fff;       
font-size:12px;       
overflow:hidden;       
background:#adbc4e;       
-webkit-border-radius:6px;       
-moz-border-radius:6px;       
border-radius:6px;       
}       

#comment:before{       
       content: ' ';       
       position: absolute;       
       width: 0;       
       height: 0;       
       left:230px;       
       top: 100px;       
       border: 15px solid;       
       border-color: #adbc4e transparent transparent #adbc4e;       
}       

#information{       
width:200px;       
float:left;       
background:none;       
font-size:12px;       
margin-top:10px;       
padding:5px;       
color:#666!important;       
overflow:hidden;       
}       

#avatars{       
float:right;       
border:none;       
width:40px;       
height:40;       
margin:-5px 4px 0px 0px;       
-webkit-box-shadow: 0 0px 6px #666;       
-moz-box-shadow: 0 0px 6px #666;       
box-shadow: 0 0px 6px #666;       
}

Подключаем скрипт:

Подключать нужно в нижнюю часть сайта или на страницах перед закрывающимся тегом body
Код
<script src="http://webmaster-ucoz.ru/ucoz/js/js/js/mobilyslider.js" type="text/javascript"></script>

Идем в то место, где хотите видеть информер и вставляем код:
Код
<div class="slider news">       
<div class="sliderContent">       
<h2>Комментарии</h2>       
$MYINF_3$</div></div>       
<script type="text/javascript">       
$(function(){       
       $('.news').mobilyslider({       
       transition: 'fade',       
       animationSpeed:500,       
       bullets: true,       
       autoplay: true,       
       pauseOnHover: true,       
       arrows: false,       
       });       
});       
</script>

$MYINF_3$ - Замените на свой номер информера.


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 17.02.2017 в 16:00
Материал просмотрен: 428 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 3 комментария

Пожаловаться
Сказать спасибо
Источник

3 комментария


Valera_Ragozin
Ну что сказать, вид тансляции коммментариев не плохой
LANIGIRO
У меня уже больше года наподобие такого установлен: http://fonts.clan.su/load....1-0-621

под менюшкой стоит...
maksim-nowokoschnikov
Ну и к чему это сказано установлен да установлен зачем говорить об этом
avatar
uLike – кнопка «Мне нравится»
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 3
Гостей: 3
Пользователей: 0