Другие разделы
Наши партнеры
Реклама на сайте
  • Статистика
  • Пользователи

    Другие счетчики
    Проверка сайта Rambler's Top100

    Счетчики материалов
    Комментарии: 123
    Форум: 15/75
    Дневник: 8
    Новости: 30
    Файлы: 592
    Статей: 80
    Сайты: 4444
    Фото-галлерея: 845
    Объявления: 2
    FAQ: 8
    Гостевая книга: 46


    Наша кнопка
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0


    Сегодня нас посетил:

Опросы
Где вы отдыхали
Всего ответов: 287
Популярные фотоснимки


Информер слайдер новостей для UCOZ

Решил поделиться с Информером слайдер новостей для UCOZ сайтов. Я видел его на различных сайтах, не помню именно откуда, устанавливал давно, но он довольно популярный скрипт, на множество сайтах можно найти его. Зато я не встречал встроенный его в информере. Благодарю автора этого слайдера, хотя я его не знаю, но если кто знает, то сообщите мне в ЛС.
Данный скрипт можно переделать под свои нужды для любого модуля в системе юкоз, в этом уроке я постараюсь подробнее описать его установку.
Создаем в ротаторе баннер и вставляем туда вот этот содержимое.

Code


[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11"> <link type="text/css" rel="StyleSheet" href="http://www.nabran.ru/css/slider1.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); }); </script> </head>
<body>
<div id="featured" >
  <ul class="ui-tabs-nav">
<script type="text/javascript" src="http://www.nabran.ru/informer/1"></script></ul>
<!-- First Content -->
<script type="text/javascript" src="http://www.nabran.ru/informer/2"></script>
</div></div> </body> </html>

А теперь по подробнее об установке.

Создаем два информера, но учтите, у обеих информеров параметры должны быть одинаковыми.
Информер новостей (Часть 1)
[ Новости сайта • Материалы • Дата добавления материала A • Материалы: 4 • Колонки: 1 ]
И вставляем туда вот этот код

Code
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-$ID$"><a href="#fragment-$ID$"><img alt="" src="$IMG_URL1..10$" height="50" border="0" width="80" /><font size="1"></font></a></li>

Информер новостей (Часть 2)
[ Новости сайта • Материалы • Дата добавления материала A • Материалы: 4 • Колонки: 1 ]
И вставляем туда вот этот код

Code
<div id="fragment-$ID$" class="ui-tabs-panel" style="">
  <img alt="" src="="$IMG_URL1..10$" height="250" border="0" width="400" />
  <div class="info" >
  <h2><a target="_parent" href="$ENTRY_URL$">$TITLE$</a></h2>
  </div>
  </div>

Берем код от информеров (кликаем по названию информера) заменяем коды в созданном баннере в ротаторе, первый вставляем где написано информер 1 и 2

Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11"> <link type="text/css" rel="StyleSheet" href="http://www.nabran.ru/css/slider1.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); }); </script> </head>
<body>
<div id="featured" >
  <ul class="ui-tabs-nav">
Первый информер - <script type="text/javascript" src="http://www.nabran.ru/informer/1"></script>
</ul>
<!-- First Content -->
Второй информер - <script type="text/javascript" src="http://www.nabran.ru/informer/2"></script>
</div></div> </body> </html>

А этот код в css или вы можете скачать вот этот css документ и установить путь в баннере - http://www.nabran.ru/css/slider1.css

Code
/* ====== Slider ====== */
#featured{

width:400px;

padding-right:250px;

position:relative;

height:250px;

background:#;

border:0px solid #727372;

}

#featured ul.ui-tabs-nav{

position:absolute;

top:0; left:400px;

list-style:none;

padding:0; margin:0;

width:107px;

}

#featured ul.ui-tabs-nav li{

padding:1px 0; padding-left:13px;

font-size:12px;

color:#2E4057;

}

#featured ul.ui-tabs-nav li img{

float:left; margin:2px 5px;

background:#fff;

padding:1px;

border:1px solid #eee;

}

#featured ul.ui-tabs-nav li span{

font-size:11px; font-family:Verdana;

line-height:18px;

}

#featured li.ui-tabs-nav-item a{

display:block;

height:60px;

color:#A7D903; background:#0F5FC7;

line-height:20px;

}

#featured li.ui-tabs-nav-item a:hover{

background:#84c220;

}

#featured li.ui-tabs-selected{

background:url('/img/selected-item.gif') top left no-repeat;

}

#featured ul.ui-tabs-nav li.ui-tabs-selected a{

background:#A7D903;

}

#featured .ui-tabs-panel{

width:400px; height:250px;

background:#999; position:relative;

}

#featured .ui-tabs-panel .info{

position:absolute;

top:180px; left:0;

height:70px;

background: url('/img/transparent-bg.png');

}

#featured .info h2{

font-size:18px; font-family:Georgia, serif;

color:#; padding:5px; margin:0;

overflow:hidden;

}

#featured .info p{

margin:0 5px;

font-family:Verdana; font-size:11px;

line-height:15px; color:#f0f0f0;

}

#featured .info a{

text-decoration:none;

color:#fff;

}

#featured .info a:hover{

text-decoration:underline;

}

#featured .ui-tabs-hide{

display:none;

}
/* ====== Slider End ====== */

А затем берем код от баннера и вставляем его в желаемое место.
Учтите, Вы можете изменить размеры, цвета и параметры слайдера в css коде.

Вот живой пример в шапке – fananji.com
Желаю продвижения в мастерстве.



Тип лицензии - Бесплатно
Имя автора - Азер Исмиханов
Источник: Перейти
Категория: Скрипты для Ucoz | Добавил: | Теги: скрипты для ucoz сайтов, Скрипт, информер слайдер., слайдер новостей Просмотров: 8055 | Загрузок: 0 | Рейтинг: 5.0/1/5 15 5.0
Материал добавлен , 01:15


Схожие материалы
Комментариев всего: 0




Комментариев НЕТ
Стань первым, кто прокомментирует



ComForm">
avatar
Хостинг от uCoz Топ сайтов ucozon.ru Catalog-Moldova - Ranker, Statistics Туристический каталог Санатории курорта Саки Create a free website Каппадокия - Турция: форум, информация, достопримечательности, статьи, фотографии, карты Каталог лучших сайтов конструктора uCoz Турция.Ру Индия.Ру Непал.Ру Пакистан.Ру Тибет.Ру Египетский Клуб. Обмен ссылками. Каталог сайтов: Туризм Наш сайт в каталоге Главной Московской доски объявлений 495RU.ru Каталог сайтов Всего.RU Каталог сайтов Bi0 Каталог сайтов OpenLinks.RU Каталог сайтов и статей iLinks.RU Каталог Ресурсов Интернет Каталог сайтов :: Развлекательный портал iTotal.RU
Все права защищены Nabran.ru © 2008-2024
Копирование информации запрещено без указания индексирующего гиперссылки на наш сайт!
Дизайн от Азер Исмиханов
Сайт оптимизирован под браузеры
opera firefox chrome safari Internet Explorer