WebElement - это сборник дизайнерских мелочей А также скриптов, помогающих вам в сайто-строении. Мы поможем вам сделать сайт красивее, мобильнее и удобнее. У нас вы можете найти готовые решения на: HTML, CSS\CSS3, jQuery, JS, плагинам к библиотеке JQ и не только... Используйте только качественные скрипты на своих сайтах.
В демо используется первая версия (пример можно посмотреть у нас на главной) Во второй версии информера добавлено: - замена аватара, если у пользователя его нету или написал гость - к аватару добавлен 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.
Данный код нужно вставить в ваш созданный информер:
/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>
Вот и все. И не забывайте изменять размеры под свой сайт.
http://radikal.ru/fp/db139c4f0d834ec5949e32441d14c6cb
но почему то они не двигаетса что то забыл выложить на двух сайтах пробавал