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

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

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

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

Дата добавления: 11.09.2013 - 00:15
Категория: Информеры
Добавил: faz
Количество просмотров: 559
Количество комментариев: 0
Рейтинг материала: 0.0 / 0
Вертикальная карусель информера uCoz
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 0.0
/
голосов 0
Шаг 1 - Установим JS: =================================================================================== Теперь давайте приступим к установке данного решения, для этого нам следует в самый низ страницы вашего сайта пред закрывающим тегом </body>, установить следующий скрипт:
Код
<script type="text/javascript" src="http://art-ucoz.ru/files/informs/1/content_jcarousel.js"></script>
Шаг 2 - Установим HTML: =================================================================================== Теперь давайте создадим для данного решения нужным нам информер, для этого заходим в Админ панель => Инструменты => Информеры => Создать информер Раздел: Новости сайта Тип данных: Материалы Способ сортировки: Количество просмотров А Количество материалов: 10 Количество колонок: 1 и устанавливаем в шаблон информера следующий html код:
Код
<li>  <a href="$ENTRY_URL$" target="_blank">  30)?>...$TITLE$  <span>$CATEGORY_NAME$</span>  </li>
а теперь в нужном месте на сайте прописываем данный информер в общий html каркас данного решения:
Код
<div>   <img src="http://art-ucoz.ru/files/informs/1/angle_top.gif" class="previous" />   <div id="center-dm-carousel">   <ul>$MYINF_1$</ul>   </div>   <img src="http://art-ucoz.ru/files/informs/1/angle_bottom.gif" class="next" />   </div>
Шаг 3 - Установим CSS: =================================================================== Теперь когда мы произвели нужные манипуляции с html кодом, давайте пропишем ему css стили, тем самым закончив установку вертикальной карусели информера для uCoz.
Код
/* Вертикальная карусель контента 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;  }
=================================================================================== Обратите внимание, что в данном решении в шаге номер два, мы сокращаем заголовок новости до 30 символов, вы можете поменять это значение на своё. На этом всё, спасибо за внимание!

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