Ваша корзина пуста

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

Вы здесь: Главная страница » Файлы » Информеры

Уважаемые пользователи!

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

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

Дата добавления: 02.11.2013 - 03:32

Категория: Информеры

Добавил: newil

Количество просмотров: 1.9k

Количество комментариев: 0

Рейтинг материала: 0.0 / 0

БЕСПЛАТНО

рейтинг 0.0

голосов 0

Описание
Комментарии (0)

Шаг 1 - Установим JS:
Теперь давайте приступим к установке данного решения, для этого нам следует в самый низ страницы вашего сайта пред закрывающим тегом </body>, установить следующий скрипт:

JS

Код

Шаг 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/