Установка и настройка RSS на сайте uCoz - Форум веб маcтера uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Пятница, 09.12.2016
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]




Русские шрифты



Страница 1 из 11
Модератор форума: IZOTOP 
Форум веб маcтера uCoz » uCoz » Добавление и установка на сайте uCoz » Установка и настройка RSS на сайте uCoz (Как добавить и настроить RSS на сайте юКоз)
Установка и настройка RSS на сайте uCoz
IZOTOP Дата: Понедельник, 13.01.2014, 02:21 | Сообщение # 1
Группа: Администратор
Сообщений: 55
Статус: Offline

Установка на страницах своего сайта RSS ленты бывает не столько желаемым действием сколько необходимым. Хочется детальнее рассмотреть возможности настройки RSS канала и способах настройки дизайна шаблона RSS транслятора. Не хочется углубляться в предназначение RSS - Really Simple Syndication - Реальной ленты новостей, поэтому сразу хочу перейти к основным действиям по установке и настройке.

Установка RSS транслятора

Перед началом установки заходим на свой сайт в качестве администратора введя в адресной строке адрес входа (delaisait.ucoz.ru/admin), подтверждаем вход паролем и попадаем на главную страницу "Пульта управления" она же (ПУ), на которой находим надпись - "RSS импорт" и жмём на неё.

Установка RSS на uCoz

Откроется страница на которой нужно создать новый "RSS транслятор", для этого жмём на кнопку создания транслятора.

Установка RSS на uCoz

Нажав на кнопку "Создать новый RSS транслятор" появляется форма для введения основных данных RSS канала.

Установка RSS на uCoz

Нужно выбрать RSS канал, для этого, на подходящей странице интересующей темы находим ссылку на RSS или значёк наподобии этого и жмём на него.

Установка RSS на uCoz

Открывается страница RSS на ней нужно взять ссылку на ленту новостей.

Установка RSS на uCoz

Полученную ссылку нужно вставить в поле, напротив надписи "Адрес RSS ленты", определиться с количеством новых материалов которые будут отображаться ну и соответственно колонок, далее жмём "Создать".

Установка RSS на uCoz

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

Установка RSS на uCoz

Настройка RSS транслятора

Чтобы понять как правильно настроить RSS транслятор, нужно знать не только HTML и CSS, но и его настройки "По умолчанию", тоесть те, которые уже есть на момент создания.
Начну с самого главного, на том месте где Вами будет добавлен код RSS транслятора, например:



$RSSIT_1$


Появится скрипт вот такого вида (для примера). В этом скрипте будет находиться вся информация для загрузки RSS транслятора.



<script type="text/javascript" src="http://delaisait.ucoz.ru/rssi/1"></script>


В создаваемом RSS трансляторе имеется имеется шаблон в котором находятся данные для отображения, для просмотра и изменения данных шаблона нажмите на кнопку "Управление шаблоном", откроется Ajax окно в котором будет находится код дизайна "По умолчанию".

Установка RSS на uCoz

Код дизайна "По умолчанию" выглядит следующим образом.



<div style="margin-bottom:3px;padding:3px;border:1px solid #CCCCCC"><a href="$LINK$" target="_blank"><b>$TITLE$</b></a><br>$DESCRIPTION$</div>


При этом сам код находящийся выше находится внутри таблицы и в переводе я языка JS в полном объёме, с используемыми селекторами выглядит так.



<table align="center" border="0" cellspacing="0" cellpadding="0" width="100%" class="RssITable">
<tr>
<td class="RssITd" width="100%">
<div style="margin-bottom:3px;padding:3px;border:1px solid #CCCCCC"><a href="$LINK$" target="_blank"><b>$TITLE$</b></a><br>$DESCRIPTION$</div>
</td>
</tr>
</table>


Условные операторы отображают данные:
$LINK$ - Ссылка на материал
$TITLE$ - Название материала
$DESCRIPTION$ - Краткое описание материала


Изменение настроек RSS транслятора

Мне кажется будет актуальнее предоставить готовые варианты возможных дизайнов отображаемой ленты RSS канала, сопровождающие комментарии должны натолкнуть начинающего вебмастера на возможность в выборе дизайна подходящего для его сайта


Установить фиксированную ширину блока для RSS транслятора

По умолчанию блок с RSS транслятором займёт 100% свободной ширины, чтобы установить именно ту которая необходима, нужно код транслятора поместить в блок с точными значениями ширины. Советую на всякий случай ограничивать размеры ширины изначально, будете спокойнее за блок с RSS данными, которые своим содержимым не растянут блок по ширине. Например блок в котором будет находиться траслятор будет иметь ширину, равную 200px, выглядеть это будет так:



<div style="min-width:200px;width:200px;max-width:200px;">$RSSIT_1$</div>


Изменить размер и цвет заголовка новости RSS ленты

Заголовок новости вложен внутри ссылки, сама ссылка находится внутри таблицы, а точнее внутри селектора class="RssITd" тега <td>, поэтому для сокращения кода лучше вынести стили отдельно. Поместите в "Управление шаблоном" транслятора код:



<style>
.RssITd a {
font-size:16px;/* - Размер шрифта заголовка - */
color:red;/* - Цвет шрифта заголовка - */
}
</style>
<a href="$LINK$" target="_blank"><b>$TITLE$</b></a><br>$DESCRIPTION$


Изменить цвет и размер краткого описания

Про отображение краткого описания отдельная тема, в таком описании может находится не только текст но и другие элементы. Но предположим что в кратком описании просто текст, тогда изменяем его так:



<style>
.RssITd {
font-size:16px;/* - Размер шрифта описания - */
color:red;/* - Цвет шрифта описания - */
}
.RssITd a {
font-size:16px;/* - Размер шрифта заголовка - */
color:red;/* - Цвет шрифта заголовка - */
}
</style>
<a href="$LINK$" target="_blank"><b>$TITLE$</b></a><br>$DESCRIPTION$


Добавить внешний отступ для блока RSS

Внешний отступ это расстояние в виде пустоты от блока к соседним границам соседних элементов, нужен для отделения блока от соседей по вёрстке и его добавление выглядит так:



<style>
.RssITable {
margin:10px;/* - Внешний отступ - */
}
.RssITd {
font-size:16px;/* - Размер шрифта описания - */
color:red;/* - Цвет шрифта описания - */
}
.RssITd a {
font-size:16px;/* - Размер шрифта заголовка - */
color:red;/* - Цвет шрифта заголовка - */
}
</style>
<a href="$LINK$" target="_blank"><b>$TITLE$</b></a><br>$DESCRIPTION$


Добавить внутренний отступ для блока RSS

Внутренний отступ это расстояние в виде пустоты от границ блока к находящемуся внутри контенту, нужен для отделения контента от границ блока и его добавление выглядит так:



<style>
.RssITable {
margin:10px;/* - Внешний отступ - */
}
.RssITd {
padding:5px;/* - Внутренний отступ - */
}
.RssITd {
font-size:16px;/* - Размер шрифта описания - */
color:red;/* - Цвет шрифта описания - */
}
.RssITd a {
font-size:16px;/* - Размер шрифта заголовка - */
color:red;/* - Цвет шрифта заголовка - */
}
</style>
<a href="$LINK$" target="_blank"><b>$TITLE$</b></a><br>$DESCRIPTION$



Добавить границу для блока RSS

Под границей подразумевается добавление тонкой каёмки установленного типа и цвета, а выглядит так:



<style>
.RssITable {
margin:10px;/* - Внешний отступ - */
}
.RssITable {
border:1px solid #999;/* - Граница блока - */
}
.RssITd {
padding:5px;/* - Внутренний отступ - */
}
.RssITd {
font-size:16px;/* - Размер шрифта описания - */
color:red;/* - Цвет шрифта описания - */
}
.RssITd a {
font-size:16px;/* - Размер шрифта заголовка - */
color:red;/* - Цвет шрифта заголовка - */
}
</style>
<a href="$LINK$" target="_blank"><b>$TITLE$</b></a><br>$DESCRIPTION$



Выводим только название материалов RSS канала

Объясню почему иногда лучше не прибегать к отображению в RSS ленте краткого описания, дело в том что верстаться материал может по разному, например когда описание выводится в параграфе или иметь элемент который внушительных размеров, та-же картинка большого размера. Разумеется что можно изначально прописать максимально допустимые значения для элементов краткого описания, обрезать лишнее, выходящее за пределы требуемых размеров. Во всяком случае, если Вы поняли что описание выводить не надо, тогда используйте дизайн без его участия, вот так:



<style>
.RssITable {
margin:10px;/* - Внешний отступ - */
}
.RssITable {
border:1px solid #999;/* - Граница блока - */
}
.RssITd {
padding:5px;/* - Внутренний отступ - */
}
.RssITd a {
font-size:16px;/* - Размер шрифта заголовка - */
color:red;/* - Цвет шрифта заголовка - */
}
</style>
<a href="$LINK$" target="_blank"><b>$TITLE$</b></a><br>


Результат изменений

К сожалению предоставленное выше является минимализмом возможностей которые можно исчерпать при владении знаниями. С другой стороны невозможно взять и научиться всему сразу, надеюсь кому нибудь информация, на создание которой я потратил время поможет хоть как то понять то к чему он стремится сделать. В любом случае можно рассмотреть индивидуальные решения для отдельно взятых случаев, при наличии таковых излагайте о них в этой теме. Не затрудните себя поправить меня если я что то не правильно предоставил или не верно истолковал...


 
Chelentano Дата: Четверг, 03.07.2014, 15:59 | Сообщение # 2
Группа: Вебмастер
Сообщений: 1
Статус: Offline
Очень полезный материал. Спасибо
 
Форум веб маcтера uCoz » uCoz » Добавление и установка на сайте uCoz » Установка и настройка RSS на сайте uCoz (Как добавить и настроить RSS на сайте юКоз)
Страница 1 из 11
Поиск:



Русские шрифты