WebElement - Лучшие авторские скрипты для вашего сайта и блога
WebElement - это сборник дизайнерских мелочей
А также скриптов, помогающих вам в сайто-строении.
Мы поможем вам сделать сайт красивее, мобильнее и удобнее.
У нас вы можете найти готовые решения на:
HTML, CSS\CSS3, jQuery, JS, плагинам к библиотеке JQ и не только...
Используйте только качественные скрипты на своих сайтах.
Главная » Скрипты »

Информер последних комментариев v.2.0

02.10.2012 14:50

DEMOИнформер последних комментариев v.2.0

В демо используется первая версия (пример можно посмотреть у нас на главной)
Во второй версии информера добавлено:
- замена аватара, если у пользователя его нету или написал гость
- к аватару добавлен ID (сталкивался с тем, что не применялись стили или брались с общих)
- добавлена иконка для перехода к материалу.

Как всегда устанавливаем стили CSS:
Code

#ticker {
width:250px;/*-Ширину и высоту подстраивайте под свой сайт-*/
height:200px;
overflow: hidden;
margin:5px;
float:left;
}
#ticker li {
background:none;/*-Можно подставить цвет комментариям-*/
display:inline-block;
list-style:none;
width:250px;
height: auto;
border:none;
border-top: 1px dotted #ccc!important;
padding: 5px;
margin:0px;
font-style: italic;
}
#ticker img#ava {
float: left;
height: 32px;
width: 32px;
margin-right: 10px;
}

С стилями закончили, перейдем к информеру.
Создаем информер.
Название информера: На ваше усмотрение
Раздел: Комментарии
Модуль: По вашему желанию (Если нужно со всех, то - выбираем "Все модули")
Количество материалов: По вашему желанию ( лучше от 10 до 30 )
Количество колонок: Обязательно 1
Максимальная длина текста комментария: Не важно, но лучше ограничить примерно до 200.

Данный код нужно вставить в ваш созданный информер:
Code

<li><img id="ava" src="$USER_AVATAR_URL$">
<img id="ava" src="/img/noavatar.png"/>
<a href="$ENTRY_URL$" title="Перейти к материалу" ><img src="http://getelement.3dn.ru/img/worwidweb.png" width="12px"/></a>
<a href="$PROFILE_URL$" title="Перейти к профилю пользователя">$USERNAME$</a> : $MESSAGE$</li>


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

Теперь нужно добавить не большой код JS перед закрывающимся тегом body (желательно зайти: Управление дизайном » нижняя часть сайта.) и добавить вот такой код:
Code

<script type="text/javascript">
function tick(){
$('#ticker li:first').slideUp( function () { $(this).appendTo($('#ticker')).slideDown(); });
}
setInterval(function(){ tick () }, 3000);
});
</script>

Берем $MYINF_1$ - созданный вами! Цифры будут отличатся.
Обводим его дивом и вставляем там где хотите видеть:
Code

<div id="ticker">$MYINF_1$</div>

Вот и все.
И не забывайте изменять размеры под свой сайт.

Категория: Информеры | Просмотров: 924 | Добавил: Cradleshel

Теги: информер, Информер для ucoz, информер последних комментариев

Всего комментариев: 2
bayronas | 01.11.2013 | 09:01
+ (0) -
комменеарии работает

http://radikal.ru/fp/db139c4f0d834ec5949e32441d14c6cb

но почему то они не двигаетса что то забыл выложить на двух сайтах пробавал
Cradleshel | 03.11.2013 | 18:31
+ (0) -
Попробуйте подключить скрипт рядом с информером или на странице, где он находится, перед BODY.
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
«  Октябрь 2012  »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
293031
Какой категории уделить больше внимания?
Всего ответов: 251

Полезная информация

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

Для правильного отображения сайта, вам понадобится минимальное разрешение экрана 1024 x 768px, оптимальное разрешение: 1280 x 1024px