Архив Галактики

В помощь сайтостроителям. Используем блог в качестве новостной ленты. Часть 1

scar169 / 27.04.2012

И вновь блог по материалам проводимых курсов. Отвечая на вопросы пропустивших занятие учителей, проще один раз сделать подробный рассказ, надеюсь, материал будет полезен начинающим сайтостроителям.

Итак, рассматриваемая задача: создание новостной страницы - ленты новостей на своем сайте. Сайт может быть в вариантах как обычного вида (HTML код, выложен на хостинг), так и тот же Google сайт.
Естественно, сделать такую ленту можно разными способами, в данном случае рассматривается вариант использования в качестве такой ленты специально созданного блога на http://www.blogger.com, встроенного в виде фрейма на главную страницу сайта.

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

На всякий случай - с самого начала.

1. Создание нового блога.
У нас есть аккаунт Google. Создаем новый блог, для чего переходим в аккаунте Google на Еще - Blogger - Создать блог.
Далее дадим ему название (например, Новости) и подберем вид названия для адреса (проверяя - не занято ли).


Введем проверочный код и получим наш новый блог.

2. Настройка внешнего вида
В следующем окне выбираем начальный дизайн, для ленты новостей замечательно подходит Простой, вот его я и выбираю.


Далее можно сразу выбрать - настроить внешний вид (если проскочили и перешли в просмотр блога, то в меню справа вверху - Настроить, затем Дизайн - дизайн шаблонов).
Переходим в данном окне на Дизайн. Для нашей цели лучше всего подходит вариант в одну полосу, его и выбираем.


Далее переходим в Регулировку ширины и выставляем требуемую ширину новостной ленты (из расчета того, куда вы собираетесь ее вставлять, каков дизайн страницы назначения). Потом можно будет подогнать по ширине, так что все исправимо.
Во вкладке Фон можно подобрать фон, соответствующий вашему сайту, в Дополнительных настройках - если очень хочется - все настройки цветов, шрифтов и т.д.

После изменений не забываем нажать "Применить к блогу" в правом верхнем углу. Теперь можно и Посмотреть блог.


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

3. Добавляем/убираем гаджеты
Вновь - Настройка, вкладка Дизайн - Элементы страницы.
Сверху, над полем Сообщения, добавим поиск по новостям. Для этого жмем Добавить гаджет, и в окне выбора выбираем Окно поиска, нажимаем на плюс, и в окне гаджета на Сохранить.

Далее добавим Под окном сообщений строчку с подпиской на новости по e-mail (для желающих получать наши новости на почту).
Жмем Добавить гаджет (под окном сообщений) и выбираем Рассылку по электронной почте. Вводим придуманное название (например, "Подпишитесь на новости") и сохраняем.


Далее уберем (ну или оставим, если нравится) гаджет - Обо мне. Зачем он в новостной ленте? В поле Обо мне выбираем Изменить, а далее - удалить.


Не забываем сохранить наши изменения (Сохранить в правом верхнем углу).
Можно посмотреть, что получилось.
Но это опять же еще не все. Надо настроить содержание.

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

Переходим на вкладку Форматирование.
Здесь стоит выставить количество новостей, которые вы собираетесь показывать в развернутом виде (остальные уйдут в архив), часовой пояс и поставить Нет в "Показывать изображения в Lightbox" (то же самое, плохая работа во фрейме").

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

Ну и вкладка Разрешения, где вы будете вводить будущих авторов-редакторов новостей. Это удобно в плане перераспределения нагрузки.

Вроде все (первоначально). Можем посмотреть, что получилось.


Практически все готово для встраивания ленты в сайт, но можно еще чуть-чуть поработать над дизайном строки меню, которая висит над вашим блогом.
Можно просто подогнать цвета под ваш дизайн (Настройки - Дизайн - Элементы страницы, жмем Изменить в блоке Панель навигация и подбираем цвет меню, или делаем линию бесцветной).

Я же предпочел совсем убрать меню из своего блога - новостной ленты.
Для этого:
Идем в Настройки- Дизайн - Изменить HTML.
На всякий случай сохраняем текущий шаблон (привыкаем к этой обязательной процедуре) - Загрузить весь шаблон (указываем место на диске, сохраняем, если что - сможем тут же восстановит как было).

Далее ищем в коде страницы строчку такого вида ]]></b:skin>
и перед ней вставляем эти несколько строчек:

#navbar-iframe { /* this section hides the nav bar */
height: 0px;
visibility: hidden;
display: none;
}