Регистрация Забыли пароль?
 
Каталог файлов
3 варианта инфомера Будь в курсе на странице контента

Рейтинг:3.7
Категория: Скрипты для Ucoz
 


Установка:

И так давайте для начало создадим информер случайных новостей, для этого идём в Админ панель => Инструменты => Информеры => Создать информер

с параметрами:

Раздел: Новости сайта
Тип данных: Материалы
Способ сортировки: В случайном порядке
Количество материалов: 1-й и 3-й вариант = 3, а 2-й вариант = 6
Количество колонок: 1

А на страницу контента для первого и второго примера, установим следующий html каркас:

Код

Рекомендую к прочтению


$MYINF_1$
[/code]
незабываем изменить номер класса cell_recommend_1 на один из ниже приведённых примеров стилизации информера.

1 - вариант информера
Шаг 1 - Установим JS:
Для первого варианта информера случайных новостей, я использовал Caption Plugin, поэтому внизу страницы после закрывающего тега устанавливаем следующий js скрипт:

Код
[/code]
Шаг 2 - Установим HTML:
Для отображение контента в информере заходим в его шаблон, удаляем старый html код и устанавливаем следующий:

Код

<?substr($TITLE$,0,35)?><?if len($TITLE$)>35 ?>...<?endif?>

[/code]
Шаг 3 - Установим CSS:
А для данного визуально решения, пропишем следующие 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;}[/code]
2 - вариант информера
Шаг 1 - Установим HTML:
Для второго варианта информера используем следующий html код:

Код
$TITLE$$TITLE$

35 ?>...

[/code]
Шаг 3 - Установим CSS:
А для визуально решения, пропишем следующие 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;
} [/code]

#nr_2,
#nr_4,
#nr_6 {float:right;}
3 - вариант информера
Шаг 1 - Установим HTML:
Для третьего варианте информера мы будем использовать списки, поэтому в шаблон информера устанавливаем следующий html код:

Код

Рекомендую к прочтению



    $MYINF_1$

[/code]
а сам html шаблон информера будет создан из следующего кода:

Код


  • $TITLE$


    300 ?>...

    • [/code]
    Шаг 2 - Установим CSS:
    А для визуально решения, пропишем следующие 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;
    }[/code]
    Примечание:
    Обратите внимание, что в данных примерах я использовал системные переменные uCoz, которые выводят сокращённое название заголовка и сам контент в кратком описании материала.

    Код
    300 ?>...[/code]
    и

    Код
    35 ?>...[/code]
    Незабываем установить в общих настройках вашего сайта в админ панели версию библиотеки jQuery: 1.7.2 для правильной работы первого варианта информера рекомендую к прочтению.

    На этом всё, спасибо за внимание!
     
     
     
    Поделиться…
    Источник: http://www.center-dm.ru/
     
     0 комментариев •  712 просмотров •  дата: 25.04.2024 •  автор: admin •  загрузок: 46
     
     
    Советую взглянуть:
  • Шаблон uCoz GameBox
  • Шаблон BitLive
  • Последние комментарии ucoz
  • Рип вида материалов форума cs-doza
    •  
     
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    Регистрация | Вход

    Меню сайта

    Мини чат

    Для добавления необходима авторизация

    Последнее с форума

    Последние комментарии


    Опрос сайта

    Как вам новый дизайн сайта?
    Всего ответов: 19

    Купить ссылку здесь


    Статистика

    Кол-во зареганных: 2908 (+0)
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Сейчас на сайте:

    Нас посетили:

    Рейтинг пользователей

    Портал для вас - Uc-new.ru, На сайте Используются технологии uCoz, все материалы в свободном доступе!
    Главная | Форум | Каталог сайтов | наши баннеры | О сайте | Обратная связь
    • Тиц и pr сайта
    • count 88x31px
    • count 88x31px