Blogger: строим свой блог. Оформление

первые шаги по настройке блога Blogger

Blogger позволяет изменять оформление блога в самых широких пределах

Регистрация на сервисе Blogger предельно проста. Достаточно лишь зарегистрировать аккаунт в Google, и в качестве одной из доступных служб вы получаете возможность создания набора собственных блогов.

Естественным первым желанием нового владельца блога становится индивидуализация блога с уходом от первоначального стандартного оформления. Blogger предоставляет пользователю возможности изменения внешнего вида блога в самых широких пределах.

Шаблон разделен на секции, в которых располагаются активные элементы блога — гаджеты

Внешний вид блога задается шаблоном оформления. Шаблон представляет собой доступный для редактирования блок HTML, CSS и кода JavaScript, включающий в себя специфические для Blogger теги разметки. Для первоначальных шагов по настройке шаблона достаточно знать о двух тегах:

тег <b:skin>...</b:skin>, в котором описываются переменные оформления и CSS разметки страницы;
тег <b:section>...</b:section>, описывающий секции разметки страницы блога.

В HTML-коде шаблона внутри тега <body>...</body> задается построение страницы блога путем использования стандартных средств HTML-разметки и CSS, определенного в теге <b:skin>. В тех местах шаблона, в которых предполагается вывод данных блога, вставляются теги <b:section>. В этих тегах задаются названия секций данных (id), CSS-класс секции (class), максимальное количество активных программных элементов, допустимых в секции (maxwidgets), индикатор появления метки добавления программного элемента на странице визуальной настройки шаблона (showaddelement), порядок расположения активных элементов в секции (growth). Из всех полей описания секции обязательным является только id. Остальные могут не описываться и принимают значения по умолчанию, описанные в справке Blogger.

Страница визуальной настройки элементов построения блога

После того как шаблон создан (при условии, что создан он правильно), на страницах визуальной настройки шаблона появляется возможность как менять в интерактивном режиме цвета и шрифты шаблона, так и добавлять и перемещать активные элементы блога. Активные элементы, если судить по названию поля секции maxwidgets, должны называться виджетами, но называются они в дальнейшем гаджетами. Это связано с тем, что по мере развития концепции модульного построения веб-страниц Google чисто визуальные элементы (виджеты) трансформировались в многофункциональные программные модули (гаджеты), а название поля в описании секции осталось прежним в соответствии с одним из золотых правил программирования «не трогай то, что работает».

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

Теперь на основе полученных первоначальных сведений попробуем настроить внешний вид блога.

От стандартной навигационной панели лучше избавиться, заменив ее соответствующими гаджетами

Первое, что бросается в глаза на странице блога, — это стандартная навигационная панель вверху страницы. На странице визуальной настройки можно поменять цветовую гамму навигационной панели (свойства гаджета «Панель Navbar»), но состав кнопок настройке не подлежит. В результате мы все равно получим ту же панель с двумя полезными функциями (поиска по блогу и вызова панели управления) и двумя откровенно вредными. Одна из этих вредных функций называется «Пометить блог» и представляет собой вызов функции оповещения администрации Blogger о нежелательном содержимом блога. Другая — ссылка «Следующий блог». То есть на каждой странице вашего блога на самом видном месте будет маячить ссылка, приглашающая посетителя блога уйти от вас неизвестно куда. Трудно представить себе вменяемого хозяина блога, добровольно вешающего подобные элементы на свою страничку.

К счастью, пользовательское соглашение Blogger не навязывает владельцам блогов обязательного присутствия на странице этой панели. Панель не присутствует в теле шаблона, но отображается плавающим фреймом (iframe), который можно сделать невидимым средствами CSS. Для этого перед тегом <body> шаблона на вкладке «Изменить HTML» добавляем следующие строки:

<style type="text/css"> #navbar-iframe {display: none !important;} </style>

После этого навигационная панель со страницы исчезнет. Сюда же можно добавить и другие CSS-определения для дополнительной коррекции внешнего вида блога.

Страница выбора гаджета из каталога

Теперь желательно восстановить полезные функции, исчезнувшие с удалением навигационной панели.

Поиск по блогу организуется путем добавления гаджета HTML/JavaScript. На странице настроек гаджета название меняем, например, на «Поиск в блоге», а в поле «Содержание» пишем:

<nobr><form id="searchthis" method="get" action="/search" style="display:inline;"><input id="search-box" name="q" type="text" size="20"/> <input id="search-btn" type="submit" value="Поиск"/></form></nobr>

Получается функция поиска, полностью аналогичная той, что была в навигационной панели.

Полностью эквивалентной замены полям настроек навигационной панели нет, но перейти на страницу настроек можно по ссылке на стандартном гаджете «Логотип». Для этого нужно лишь добавить гаджет в нужное место на странице и поменять в настройках его внешний вид, выбрав один из предложенных вариантов.

Дальнейшая настройка блога заключается в комплектации необходимого набора активных функциональных элементов

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

Оснащение блога дополнительной функциональностью и будет темой следующей статьи.