Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Вертикальная карусель информера uCoz
БЕСПЛАТНО
рейтинг
0.0
/
голосов
0
Шаг 1 - Установим JS:
Теперь давайте приступим к установке данного решения, для этого нам следует в самый низ страницы вашего сайта пред закрывающим тегом </body>, установить следующий скрипт:
JS
Шаг 2 - Установим HTML:
Теперь давайте создадим для данного решения нужным нам информер, для этого заходим
в Админ панель => Инструменты => Информеры => Создать информер
Раздел: Новости сайта
Тип данных: Материалы
Способ сортировки: Количество просмотров А
Количество материалов: 10
Количество колонок: 1
и устанавливаем в шаблон информера следующий html код:
HTML
а теперь в нужном месте на сайте прописываем данный информер в общий html каркас данного решения:
HTML
Шаг 3 - Установим CSS:
Теперь когда мы произвели нужные манипуляции с html кодом, давайте пропишем ему css стили, тем самым закончив установку вертикальной карусели информера для uCoz.
CSS
Источник: http://www.gmarwaha.com/
Теперь давайте приступим к установке данного решения, для этого нам следует в самый низ страницы вашего сайта пред закрывающим тегом </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>
<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>
<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;
}
------------------------------------------*/
#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/
Поделись с друзьями:
