Добавляем третью колонку в стандартный шаблон Blogger (часть 2)

Часть 2. Как добавить колонку в «резиновый» шаблон

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

Найдите в коде шаблона описание стиля элемента main-wrapper (контейнер для сообщений блога) и установите значение его атрибута width (ширина) 52%:

#main-wrapper {
  margin-$startSide: 2%;
  width: 52%;
  float: $startSide;
  display: inline;       /* fix for doubling margin in IE */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
  }

Добавляем третью колонку в стандартный шаблон Blogger (часть 1)

Часть 1. Как добавить колонку в фиксированный шаблон

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

Давайте сначала схематично представим варианты расположения в макете дополнительной боковой колонки. Пожалуй, чаще всего используется схема расположения «боковая колонка - сообщения блога - боковая колонка». Это выглядит так:

Каркас стандартного шаблона Blogger

Внести изменения в стандартный шаблон Blogger и настроить его на свой вкус, в принципе, доступно любому пользователю. Но прежде чем начать это делать, необходимо разобраться в основах устройства стандартных шаблонов Blogger. Для этого Вам потребуются хотя бы элементарные знания HTML и CSS. Если у Вас пробелы в этой области знаний, могу Вам порекомендовать посетить сайт htmlbook.ru - написано толково и доступно.

На сегодняшний день Blogger предлагает пользователям 38 встроенных шаблонов. Все шаблоны построены с помощью блочной верстки, то есть на элементах div. Если Вы посмотрите код любого из встроенных шаблонов (да еще включив при этом флажок «Расширить шаблоны виджета»), то сначала Вы можете почувствовать себя плохо от обилия div-блоков и описания стилей CSS. Но не спешите опускать руки. Основных элементов, определяющих структуру шаблона, не так уж много. Расположение их в большинстве шаблонов (не во всех) примерно одинаково. Схематически структуру блоков можно представить следующим образом.

Эффективный способ создания шаблонов для Blogger

Справочно-практическое руководство по разработке шаблонов для Blogger, опубликованное в предыдущем посте, содержит практический урок по созданию шаблона для Blogger с «нуля». По условию задачи обычная веб-страничка должна превратиться в шаблон для Blogger. Решая ее, я вставляю в код странички теги секций и виджетов Blogger. С точки зрения изучения предмета это достаточно наглядный пример. Он не перегружен лишней информацией и очень доступно демонстрирует особенности устройства шаблонов Blogger. Но от простейшего шаблона, рассмотренного в руководстве, до профессионального - как до Китая пешком. И такая схема разработки шаблона далеко не самая эффективная.

Когда я готовил «Blogger без проблем» к выходу в свет, я поставил себе задачу прежде, чем начать публикацию в новом блоге, подобрать для него новый дизайн. Всем известно мнение, что главное в блоге содержание, а не внешний вид. И тому есть множество примеров. Я считаю, что в блоге, как и в человеке, должно быть все прекрасно. К тому же, многое определяет тематика блога. Иногда дизайн может сказать читателю не меньше, чем контент. Согласитесь, статьи об устройстве шаблонов для Blogger выглядели бы не очень убедительно, если бы на самом блоге был установлен стандартный Minima или Denim.

Как устроены шаблоны для Blogger

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

Попытки раздобыть в Интернете более или менее пригодный русскоязычный эквивалент справочного руководства по разработке шаблонов для Blogger не увенчались успехом. «Раз нет готового документа, значит, его должен сделать я», - такая мысль тогда пришла мне в голову. Я вернулся к оригинальному справочному руководству и приступил к его изучению.

Результатами проделанной мной работы стали новый дизайн «Дневника провинциального программиста» и серия статей, которые, по сути, вылились в справочно-практическое руководство по созданию шаблонов: