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

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

23.08.2012 23:00

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

Перед тем как ставить к себе на сайт, давайте посмотрим демо-пример.

Вот теперь приступим к установке.
Для начала установим стили CSS:
Code
#lastcomment {
width:250px; /*-Размеры нужно поменять на свои-*/
height: 160px; /*-Не желательно трогать (влияет на количество комментариев)-*/
overflow: hidden;
}

#lastcomment li {
display:inline-block;
list-style:none;
width:230px; /*-так же поменять на свои (пропорционально #lastcomment - на 20px меньше)-*/
height: auto;
border: 1px dotted #444;
padding: 5px;
margin: 0px 5px;
font-style: italic;
font-size: 12px;
}

#lastcomment img.ava {
  float: left;
  height: 32px;
  width: 32px;
  margin-right: 10px;
}

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

<li>
<img src="$USER_AVATAR_URL$" class="ava"/>
<a href="$PROFILE_URL$" title="Перейти к профилю пользователя">$USERNAME$</a> : $MESSAGE$</li>

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

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

Теперь осталось вывести информер.
Для этого нужно скопировать его код, у меня это - $MYINF_3$ у вас может быть другой.
И вставляйте там где вы его хотите видеть (желательно в Первый контейнер или во второй, смотря какой дизайн)
Перед вставкой нужно обвести его в див:
Code
<div id="lastcomment">$MYINF_3$</div>

Вот и все smile

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

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

Всего комментариев: 2
Cradleshel | 28.09.2012 | 15:00
+ (0) -
У меня все двигается.
dfd | 18.09.2012 | 23:06
+ (0) -
я поставил,но комментарии не двигаются снизу вверх,не подкажешь?посмотри.... http: / / mestnost . clan . su
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
«  Август 2012  »
ПнВтСрЧтПтСбВс
  12345
6789101112
13141516171819
20212223242526
2728293031
Какой категории уделить больше внимания?
Всего ответов: 251

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

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

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