Вертикальный информер с прокруткой для uCoz - Информеры - Необычные решения - Каталог файлов

ПОСЛЕДНИЕ КОММЕНТАРИИ

Если возник вопрос или проблема при установки - напишите в комментария Admin 16.11.2014

Если хотите помочь нам - напишите нам. Admin 14.11.2014

Спасибо всем, кто остаётся с нами. Мы работаем только для вас. Admin 14.11.2014

Пустой блок

КОРОТКО О НАС

Уважаемые посетители! Наш молодой проект Фулл Юкоз был создан с целью помочь Вам в поиске скриптов и шаблонов для Вашего сайта.
Отличительная черта нашего сайта - это то, что у нас представлен только рабочий и проверенный контент. Если вы не можете найти нужный скрипт - оставьте заявку и в течении дня мы выложим его и оповестим Вас по почте.
В разделе "статьи" Вы можете найти ответы и необычные решения в разных ситуациях при создании сайта. Ещё на нашем сайте можно заказать бесплатный видеоурок по установке или настройке скрипта или шаблона. Оставайтесь с нами и у Вас всё получится. (c) Full.uCoz.com

Рекомендуемые материалы к прочтению в трех вариантах

Информер отображает материалы рекомендуемые к прочтению. Выводить можно как самые просматриваемые по счетчику, так и вывод в случайном порядке. Информер предложен в трех вариантах. От более простого к более объемному.

Рекомендуемые материалы к прочтению в трех вариантах

ПОДРОБНЕЕ

Категория: Информеры Вертикальный информер с прокруткой для uCoz

Admin27.06.2025
Просмотров: 1406
Комментариев: 0

1. Установим JS:

В самый низ страницы вашего сайта пред закрывающим тегом установить следующий скрипт:

Код

2. Установим HTML:

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

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

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

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

Код

<li>
<a href="$ENTRY_URL$" target="_blank">
<?if($TITLE$)?><?if(len($TITLE$)>30)?><?substr($TITLE$,0,30)?>...<?else?>$TITLE$<?endif?><?endif?><?else?>
<span>$CATEGORY_NAME$</span>
</li>

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

Код

<div>
  <img src="http://www.center-dm.ru/ucoz/informer/news/7/angle_top.gif" class="previous" />
  <div id="center-dm-carousel">
  <ul>$MYINF_1$</ul>
  </div>
  <img src="http://www.center-dm.ru/ucoz/informer/news/7/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 символов, вы можете поменять это значение на своё.

На этом всё, спасибо за внимание!

Размер: 5.7 Kb

Теги: прокруткой, информер, Вертикальный, ucoz, для

Вернуться назад

Всего комментариев: 0