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

Информер комментариев

31.10.2012 21:18

DEMOИнформер комментариев

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

Для начала давайте зайдем в раздел "Информеры" и создадим информер с такими параметрами:

Раздел: Комментарии
Модуль: Все модули
Количество материалов: 5 (обязательно)
Количество колонок: 1 (обязательно)
Максимальная длина текста комментария: не важно

Теперь в шаблон информера вставим код:
Code
<div class="item">
<div id="cont">
<div id="comment">$MESSAGE$</div>
<div id="information"><img src="$USER_AVATAR_URL$" id="avatars"><img src="/img/noavatar.png" id="avatars"><b>$USERNAME$</b><br/><a href="$ENTRY_URL$">Перейти к комментарию</a></div>
</div>
</div>


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

Заходим в таблицу стилей CSS и ставим код:
Code
.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://getelement.3dn.ru/materials/inf_comment/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
Code
<script src="http://getelement.3dn.ru/materials/inf_comment/mobilyslider.js" type="text/javascript"></script>

Идем в то место, где хотите видеть информер и вставляем код:
Code
<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$ - Замените на свой номер информера.
Готово!

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

Теги: информер комментариев, js, CSS3, html, jQuery, MobilySlider, Информер для ucoz, информер, CSS

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
«  Октябрь 2012  »
ПнВтСрЧтПтСбВс
1234567
891011121314
15161718192021
22232425262728
293031
Какой категории уделить больше внимания?
Всего ответов: 251

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

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

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