828материалов
231тема на форуме
3032комментария
6247пользователей

Делаем информер последних новостей для uCoz


Описание скрипта:

  • Очередная реализация информера на MobilySlider.
  • Информер сделан под темные дизайны.
  • Также не забывайте, что сделать можно не только, информер "Последних новостей"
  • Но и последних файлов, лучших новостей или популярных материалов.
Слайдер становится на паузу и не движется, при наводке мышкой, убираете мышку и слайдер снова движется, что очень удобно для чтения заголовков новостей, если не успел)

И так, начнем установку...

Для того, чтобы информер выглядел как на демо, нужно создать его с такими параметрами:
  • Новости сайта (можно и каталог файлов, смотря для чего создаете)
  • Материалы
  • Дата добавления материала A (это последние материалы)
  • Материалы: 7 (желательно 7, это для того, чтобы выглядело как на демо, 7 пунктов под картинкой)
  • Колонки: 1 (обязательно)
Теперь в шаблон информера вставим данный код:
Код
<div class="item">      
<div id="cont">      
<img id="newsimage" src="$IMG_URL1$">      
<div id="text">      
<h2>$TITLE$</h2>      
$MESSAGE$      
<a href="$ENTRY_URL$" id="readmore">Читать дальше...</a></div></div>      
</div>

Сохраняем, идем в таблицу стилей CSS и ставим стилизацию для информера:
Код
.slider {      
float:left;      
width:600px;      
height:200px;      
position:relative;      
padding:0px;      
}      

.sliderContent {      
float:left;      
width:600px;      
height:200px;      
clear:both;      
position:relative;      
overflow:hidden;      
border:2px solid #333;      
}      

.sliderArrows a {      
display:none;      
}      

.prev {      
display:none;      
}      

.next {      
display:none;      
}      

.sliderContent .item {      
position:absolute;      
width:600px;      
height:200px;      
background: #333;      
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));      
background-image: -webkit-linear-gradient(top, #444, #222);      
background-image: -moz-linear-gradient(top, #444, #222);      
background-image: -ms-linear-gradient(top, #444, #222);      
background-image: -o-linear-gradient(top, #444, #222);      
background-image: linear-gradient(top, #444, #222);      
}      

.sliderBullets {      
position:absolute;      
bottom:15px;      
left:10px;      
z-index:50;      
margin-left:10px;      
}      

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

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

.sliderContent a {      
outline:none;      
}      

a {      
color:yellowgreen;      
text-decoration:none;      
}      
.sliderContent #cont{padding:10px 10px 10px 20px;display:block;}      

#text{text-align:left;float:right;width:360px;height:128px;color:#ccc;font-size:12px;overflow:hidden;}      
#text h2{font-size:13px;color:#999;color:#c69d33;}      
#readmore{      
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#333));      
background-image: -webkit-linear-gradient(top, #444, #333);      
background-image: -moz-linear-gradient(top, #444, #333);      
background-image: -ms-linear-gradient(top, #444, #333);      
background-image: -ms-linear-gradient(top, #444, #333);      
background-image: -o-linear-gradient(top, #444, #333);      
background-image: linear-gradient(top, #444, #333);      
-webkit-border-radius:1px;      
-moz-border-radius:1px;      
border-radius:1px;      
-webkit-box-shadow: 0 0px 2px #666;      
-moz-box-shadow: 0 0px 2px #666;      
box-shadow: 0 0px 2px #666;      
color:#c69d33;      
float:right;      
display:inline-block;      
font-size:11px;      
font-weight:bold;      
padding:4px;      
position:absolute;      
bottom:20px;      
right:20px;      
}      
#readmore:hover{color:#999;}      
#newsimage{float:left;border:4px solid #222;width:180px;height:120px;margin:10px 10px 0px 0px;}

В нижней части сайта или в глобальном блоке подключим скрипт:
Код
<script src="http://webmaster-ucoz.ru/ucoz/1/js/mobilyslider.js" type="text/javascript"></script>      
<script type="text/javascript">      
$(function(){      
      $('.news').mobilyslider({      
      transition: 'horizontal',      
      animationSpeed:300,      
      bullets: true,      
      autoplay: true,      
      pauseOnHover: true,      
      arrows: false,      
      });      
});      
</script>

Идем на страницу, где хотите видеть информер

И вставляем код информера предварительно скопировав его:
Код
<div class="slider news">      
<div class="sliderContent">$MYINF_1$</div>      
</div>
$MYINF_1$ - это нужно поменять на свой номер информера.

Все, "информер последних новостей" готов.

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

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

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

9 комментариев


Дмитрий
Дмитрий @Дмитрий 03.08.2015 15:451
+3
Интересный информер и самое главное компактный, и можно красиво оформить на главной страницы сайта, так же думаю прикольно было бы замоделить в материале как похожие материалы в виде слайдера!
А_С
Код
a img {
border:none;
}

А вот от этого, скрипт встаёт криво и некоторые авторские стили кривит. А так интересны информер.
Ромчик
Хорошо, убрал данный код
PersONAIncognito
Возможно, был бы востребован скрипт, который бы (хотя бы на куках) показывал пользователю некий маркер, что с момента его последнего визита в такой-то категории (например, новостей) появились новые материалы... чтобы человек знал, пропустил он что-то или нет. Т.е. не за заданное количество дней, а в принципе с момента последнего визита.
avatar
Всем привет! А есть ли возможность смены фона в слайдере?
Ромчик
В этом коде меняется цвет:
Код
.sliderContent .item {  
position:absolute;  
width:600px;  
height:200px;  
background: #333;  
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));  
background-image: -webkit-linear-gradient(top, #444, #222);  
background-image: -moz-linear-gradient(top, #444, #222);  
background-image: -ms-linear-gradient(top, #444, #222);  
background-image: -o-linear-gradient(top, #444, #222);  
background-image: linear-gradient(top, #444, #222);  
}
avatar
Большое спасибо!
avatar
Все получилось! Отличный слайдер, не тупит, красивый, удобный код для адаптации под дизайн своего сайта! Респект автору!
Ромчик
Рад что Вам понравился слайдер
avatar
uLike – кнопка «Мне нравится»
Вход через социальные сети
Эрудит системы uCoz-uВопросы
Статистики нашего сайта