Меню
Скрипт вид материалов для UCOZ [42] |
Информеры для UCOZ [25] |
Меню для UCOZ [18] |
Слайдер для UCOZ [11] |
Кнопки для UCOZ [21] |
МИНИ ПРОФИЛЬ УКОЗ [4] |
Скрипты мини-чатов для UCOZ [10] |
Страница 404 для UCOZ [3] |
Скрипты статистики для UCOZ [5] |
Скрипты PHP для UCOZ [4] |
Другие скрипты для UCOZ [131] |
НОВОЕ ВИДЕО
НОВЫЕ КОМЕНТАРИИ
Коментарий:Невероятно....это полезный веб-сайты.
Добавил:Stevensleed
Коментарий:Сколько лет прошло, старина?) зарегался, просто вспомнить те времена,
Добавил:Vj PitBulvjpitbul94
Коментарий:Всё исправил, проверил , скачивайте
Добавил:Modred
Коментарий:Классный скрипт , но на PHP
Добавил:ZemHU
Коментарий:Отличный движок Добавил:DexonEdutt
Коментарий:Легко установить Добавил:Mixhoarm
Поиск
Витрины ссылок
НОВОЕ НА ФОРУМЕ
Тема: Stepform - Виджеты для повышен... | |
Форум: "Полезные сслыки |
Тема: REG.RU - бесплатный хостинг д... | |
Форум: "Полезные сслыки |
Тема: Бесплатный веб хостинг с PHP | |
Форум: "Полезные сслыки |
Тема: Sape | |
Форум: "Полезные сслыки |
Тема: Ukit - конструктор сайтов для ... | |
Форум: "Полезные сслыки |
Тема: Megaindex.ru | |
Форум: "Полезные сслыки |
Тема: TeaserNet.com | |
Форум: "Полезные сслыки |
Каталог ТОП
1. RemMosMash.ru - ремонт бытовой техники Сайт: https://remmosmash.ru |
2. МастерРБТ - ремонт стиральных машин в Домодедово Сайт: https://masterrbt.ru/ |
3. Ремонт и отделка. Контакты: +7 (926) 214-53-53 Сайт: http://www.remgam.ru/ |
4. Адвокатский кабинет Шишук А.Б. Сайт: http://ADVOKAT-SHISHUK.RU |
5. Автозапчасти-СПАКСЕР Сайт: http://spacser-shop.com.ua |
6. Islamiconline.ru Сайт: https://islamiconline.ru/ |
7. Покупаем электродвигатели Сайт: http://stanprivod.ru |
8. Кабинет Информатики Сайт: http://kabinfo.ucoz.ru/ |
9. Торрент портал Сайт: http://utrutor.ucoz.org/ |
10. ООО "Корпорация АЕГ" Сайт: http://aeg-med.ru/ |
11. Татобзор.ру Сайт: https://tatobzor.ru/ |
12. Займ онлайн. Кредитуем всех 24 часа. Сайт: http://vyberi-uslugi.ru |
13. Автозапчасти-СПАКСЕРВИС Сайт: https://spacser.com.ua |
14. AndroSoft Сайт: http://androsoft.ucoz.ru |
15. Заработок в интернете без вложений Сайт: http://seodengi.ucoz.org/ |
Главная » Файлы » Скрипты для UCOZ » Информеры для UCOZ |
Три красивых информера для ucoz
И так давайте для начало создадим информер случайных новостей, для этого идем в Админ панель => Инструменты => Информеры => Создать информер Параметры информера: Раздел: Новости сайта Тип данных: Материалы Способ сортировки: В случайном порядке Количество материалов: 1-й и 3-й вариант = 3, а 2-й вариант = 6 Количество колонок: 1 А на страницу контента для первого и второго примера, установим следующий html каркас: Код <div class="cell_recommend_1 left"> <h3>Рекомендую к прочтению</h3> $MYINF_1$ </div> незабываем изменить номер класса cell_recommend_1 на один из ниже приведенных примеров стилизации информера. 1 - вариант информера: Для первого варианта информера случайных новостей, я использовал Caption Plugin, поэтому внизу страницы после закрывающего тега устанавливаем следующий js скрипт: Код <script type="text/javascript" src="http://center-dm.ru/ucoz/informer/news4/capty.min.js" ></script> Для отображение контента в информере заходим в его шаблон, удаляем старый html код и устанавливаем следующий: Код <p><a href="$ENTRY_URL$"><img src="$IMG_SMALL_URL1$" /><img src="$IMG_URL1$" class="default" alt="35 ?>..."></a></p> А для данного визуально решения, пропишем следующие css стили: Код /* Рекомендую к прочтению - v 1.0 ------------------------------------------*/ .cell_recommend_1 { width:620px; background:#fff; margin-bottom:20px; border: 1px solid #CAD1DB; padding: 0px 0px 10px 30px; } .cell_recommend_1 h3 { font:115% Verdana,Arial,Helvetica, sans-serif!important; font-weight:700!important; color:#666; } .capty-caption { color: #fff; padding:5px; background: #000; font: bold 11px verdana; text-shadow: 1px 1px 0 #222; } .cell_recommend_1 img{ width:180px; height:100px; } .cell_recommend_1 p{ float:left; margin: 0px 25px 10px 0px; } .left {float:left;} 2 - вариант информера: Для второго варианта информера используем следующий html код: Код <a id="nr_$NUMBER$" href="$ENTRY_URL$"> <img src="$IMG_SMALL_URL1$" alt="$TITLE$"><img src="$IMG_URL1$" alt="$TITLE$"><p>35 ?>...</p></a> А для визуально решения, пропишем следующие css стили: Код /* Рекомендую к прочтению - v 2.0 ------------------------------------------*/ .cell_recommend_2 { width:590px; background:#fff; margin-bottom:20px; border: 1px solid #CAD1DB; padding: 0px 30px 10px 30px; } .cell_recommend_2 h3 { font:120%/1.5 Verdana,Arial,Helvetica, sans-serif; font-weight:700; color:#666; margin-bottom: 5px; } .cell_recommend_2 img { width:90px; height:30px; padding:3px; background:#F4F8F9; border: 1px solid #CAD3DA; float:left; margin-right: 15px!important } .cell_recommend_2 p { margin: 0px; } .cell_recommend_2 a:link, .cell_recommend_2 a:visited { color:#555; float:left; width:280px; display: block; color:#555; padding: 10px 0px; border-top: 1px solid #CAD3DA; } .cell_recommend_2 a:hover { background:#F4F8F9; } #nr_2, #nr_4, #nr_6 {float:right;} 3 - вариант информера Для третьего варианте информера мы будем использовать списки, поэтому в шаблон информера устанавливаем следующий html код: Код <div class="cell_recommend_1 left"> <h3>Рекомендую к прочтению</h3> <ul> $MYINF_1$ </ul> </div> а сам html шаблон информера будет создан из следующего кода: Код <li> <a href="$ENTRY_URL$"> <h2>$TITLE$</h2> 300 ?>... </a> </li> А для визуально решения, пропишем следующие css стили: Код /* Рекомендую к прочтению - v 3.0 ------------------------------------------*/ .cell_recommend_3 { width:590px; background:#fff; margin-bottom:20px; border: 1px solid #CAD1DB; padding: 0px 30px 10px 30px; } .cell_recommend_3 h3 { font:120%/1.5 Verdana,Arial,Helvetica, sans-serif; font-weight:700; color:#666; margin-bottom: 5px; } .cell_recommend_3 h2 { font:120%/1.5 Verdana,Arial,Helvetica, sans-serif; font-weight:700; width:100%; margin: 0px 0px 5px 0px; } .cell_recommend_3 ul { padding:0; margin:0; } .cell_recommend_3 li { float:left; width:100%; list-style:none; } .cell_recommend_3 img { float:left; width:150px; height:60px; padding:3px; background:#F4F8F9; border: 1px solid #CAD3DA; margin-right: 15px!important } .cell_recommend_3 p { margin: 5px 0px 0px 0px; } .cell_recommend_3 a:link, .cell_recommend_3 a:visited { overflow:hidden; display: block; color:#555; padding: 10px 0px; border-top: 1px solid #CAD3DA; } .cell_recommend_3 a:hover { background:#F4F8F9; } Примечание: Обратите внимание, что в данных примерах я использовал системные переменные uCoz, которые выводят сокращённое название заголовка и сам контент в кратком описании материала. Код 300 ?>... и Код 35 ?>... Незабываем установить в общих настройках вашего сайта в админ панели версию библиотеки jQuery: 1.7.2 для правильной работы первого варианта информера рекомендую к прочтению. | |
| |
| |
Похожие материалы: | |
Просмотров: 2816 | Загрузок: 0 | Комментарии: 1 | |
Всего комментариев: 1 | ||
| ||