Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Вертикальная карусель информера uCoz

Дата добавления: 02.11.2013 - 03:32
Категория: Информеры
Добавил: newil
Количество просмотров: 723
Количество комментариев: 0
Рейтинг материала: 0.0 / 0
Вертикальная карусель информера uCoz
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 0.0
/
голосов 0
Шаг 1 - Установим JS:
Теперь давайте приступим к установке данного решения, для этого нам следует в самый низ страницы вашего сайта пред закрывающим тегом </body>, установить следующий скрипт:

JS
Код
<script type="text/javascript" src="http://art-ucoz.ru/files/hacki/1/content_jcarousel.js"></script>


Шаг 2 - Установим HTML:
Теперь давайте создадим для данного решения нужным нам информер, для этого заходим

в Админ панель => Инструменты => Информеры => Создать информер

Раздел: Новости сайта
Тип данных: Материалы
Способ сортировки: Количество просмотров А
Количество материалов: 10
Количество колонок: 1

и устанавливаем в шаблон информера следующий html код:

HTML


Код
<li>  
<a href="$ENTRY_URL$" target="_blank">  
30)?>...$TITLE$  
<span>$CATEGORY_NAME$</span>  
</li>


а теперь в нужном месте на сайте прописываем данный информер в общий html каркас данного решения:

HTML


Код
<div>  
  <img src="http://art-ucoz.ru/files/hacki/1/angle_top.gif" class="previous" />  
  <div id="center-dm-carousel">  
  <ul>$MYINF_1$</ul>  
  </div>  
  <img src="http://art-ucoz.ru/files/hacki/1/angle_bottom.gif" class="next" />  
  </div>


Шаг 3 - Установим CSS:
Теперь когда мы произвели нужные манипуляции с html кодом, давайте пропишем ему css стили, тем самым закончив установку вертикальной карусели информера для uCoz.

CSS


Код
/* Вертикальная карусель контента uCoz  
------------------------------------------*/  
#center-dm-carousel {  
  float:left;  
  width:230px;  
  height:300px;  
  overflow:hidden;  
  padding:0px 10px;  
  background: #fff;  
  border: 1px solid #CAD3DA;  
  border-radius:5px;  
}  

#center-dm-carousel li {  
  float:left;  
  width:100%;  
  height:30px;  
  list-style:none;  
  display:block;  
  padding:5px 0px;  
  border-bottom: 1px solid #CAD3DA;  
}  

#center-dm-carousel li a {  
  float:left;  
  width:100%;  
  margin-bottom: 3px;  
}  

#center-dm-carousel span {  
  float:left;  
  color:#999;  
  width:100%;  
  font:9px Verdana,Arial,Helvetica, sans-serif;  
  text-align:right;  
}  

.previous {  
  outline:none;  
  cursor:pointer;  
  margin-left:125px;  
  vertical-align: bottom;  
}  

.next {  
  outline:none;  
  cursor:pointer;  
  margin-left:125px;  
  vertical-align: top;  
}


Источник: http://www.gmarwaha.com/
Добавлять комментарии могут только зарегистрированные пользователи.