Меню сайта |
|
|
АКЦИЯ!!! |
|
|
Категории раздела |
|
|
Сервис |
Translate my page
Выбрать язык / Select language:
Бесплатное отправление смс сообщений!
|
|
Поиск |
|
|
Календарь |
|
|
Архив записей |
|
|
Наш опрос |
|
|
Статистика |
Онлайн всего: 1 Гостей: 1 Пользователей: 0 |
|
Реклама |
|
|
|
Главная » 2014 » Сентябрь » 12 » Рип слайдера с главной страницы сервиса Ucoz.
19:24 Рип слайдера с главной страницы сервиса Ucoz. |
Установка: 1. Открываем: Панель управления ---> Управление дизайном ---> Таблица стилей (CSS), вставляем код в самый вверх:
Код #preview-contanier {background-attachment: scroll; background-color: transparent; background-image: url("http://fotki.ucoz.ua/script/primery/slider_ucoz/bg_preview.png"); background-position: 0% 0%; background-repeat: repeat-x;} #preview-contanier {padding-bottom: 15px; height: 200px; width: 961px; margin: 0 auto 20px auto; text-align: center; position: relative;} #preview {width: 900px; padding-top: 40px; margin: 0 auto; text-align: left;} #preview-contanier div.arrow-left {position: absolute; top: 95px; left: -10px; width: 28px; height: 28px; display: block; overflow: hidden; text-indent: -9999px; background: url('http://fotki.ucoz.ua/script/primery/slider_ucoz/arrow_left.png') no-repeat; cursor: pointer;} #preview-contanier div.arrow-right {position: absolute; top: 95px; right: -10px; width: 28px; height: 28px; display: block; overflow: hidden; text-indent: -9999px; background: url('http://fotki.ucoz.ua/script/primery/slider_ucoz/arrow_right.png') no-repeat; cursor: pointer;} li.preview-tumb {padding-left: 0 !important;} .preview-tumb {width: 170px; float: left; display: inline; text-align: center; overflow: hidden; margin: 0 5px;} .preview-tumb a {display: block; padding: 8px 8px 5px 8px; background: #fff; text-decoration: none; color: #9f9f9f; font-size: 9pt;} .preview-tumb a:hover {display: block; padding: 8px 8px 5px 8px; background: #51b5ea; text-decoration: none; color: #fff; font-size: 9pt;} .arrow-left, .arrow-right {padding:2px;filter:alpha(opacity=100); ..-opacity:1.0; opacity:1.0; -khtml-opacity:1.0;} .arrow-left:hover, .arrow-right:hover {filter:alpha(opacity=80); ..-opacity:0.8; opacity:0.8; -khtml-opacity:0.8;}
2. Эту часть кода вставляем в место, где должен быть наш слайдер:
Код <script type="text/javascript" src="http://fotki.ucoz.ua/script/primery/slider_ucoz/main.js"></script> <div id="preview-contanier"> <div class="arrow-left"></div> <div id="preview" class="ie6"> <ul> <li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 1');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 1"><br>Название 1</a></li> <li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 2');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 2"><br>Название 2</a></li> <li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 3');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 3"><br>Название 3</a></li> <li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 4');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 4"><br>Название 4</a></li> <li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 5');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 5"><br>Название 5</a></li> <li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 6');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 6"><br>Название 6</a></li> <li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 7');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 7"><br>Название 7</a></li> <li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 8');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 8"><br>Название 8</a></li> <li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 9');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 9"><br>Название 9</a></li> <li class="preview-tumb panel"><a href="javascript://" onclick="window.open('Адрес сайта 10');return false;" rel="nofollow"><img alt="" style="border: 0 none; width: 150px; height: 110px;" src="Изображение 10"><br>Название 10</a></li> </ul> </div> <div class="arrow-right"></div> </div> <div style="clear:both;height:10px;"></div>
Адрес сайта 1, 2, 3... - адреса сайтов. Изображение 1, 2, 3... - адреса картинок. Название 1, 2, 3... - названия.
|
Категория: Слайдеры |
Просмотров: 496 |
Добавил: master
| Теги: слайдер для сайта
| Рейтинг: 0.0/0 |
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ]
|
|