Делаем информер последних новостей для uCoz
827материалов
228тем на форуме
3003комментария
6151пользователь

Делаем информер последних новостей для 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
Материал просмотрен: 3234 раза
Категория материала: Скрипты для 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
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта