3-х колоночный шаблон Blogger. Делаем своими руками

Делюсь своим первым опытом настройки блогов в blogger.
Оказалось сделать 3-х колоночный шаблон блога из стандартного шаблона проще простого.

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

Попробовал поискать в Сети, нашел неплохую подборку сайтов с шаблонами у Сетевого Оптимиста, есть очень достойные шаблоны. Остановил свой выбор на расширенных стандартных шаблонах, в частости, на Minima, demo которых есть на Blogcrowds. Однако скачать их не удалось. При попытках использования других шаблонов из Сети также возникали те или иные проблемы разной степени тяжести.

В итоге, решил попробовать изменить внешний вид шаблона самостоятельно, тем более что шаблон представляет из себя обычный XML. Рассказываю, что нужно сделать на примере шаблона Minima

1. Заходим в Макет - Выбрать новый шаблон и загружаем требуемый стандартный шаблон - в нашем случае Mimima

2. Переходим в Макет - Изменить HTML и жмем там Загрузить весь шаблон. В итоге шаблон сохраняется (!) в XML-файл на диске.

3. Дабы сохранить резервную копию шаблона, копируем этот файл с другим именем и открываем копию в своем любимом редакторе. Я использую Notepad++

4. Добавляем в шаблон новую колонку. Для этого прежде всего ищем следующие теги - <div id='main-wrapper'> и <div id='sidebar-wrapper'>. Перед тегом <div id='main-wrapper'> создаем новый по образу и подобию  sidebar-wrapper, но без наполнения содержимым. Не забываем поменять id у вновь созданных тегов.

Должно получиться что-то вроде этого: 

<div id='left-sidebar-wrapper'>
  <b:section class='sidebar' id='left-sidebar' preferred='yes'>

  </b:section>

</div>

Раздел создан, но это еще не все, так как по умолчанию новый блок встанет над блоком с постами, а нам надо, чтобы он встал слева от него.

5. Меняем положение и размер блоков. Для этого ищем строку #sidebar-wrapper и копируем оттуда все определения стилей для вновь созданного id (в нашем случае - left-sidebar-wrapper). Затем меням float: $endSide; на float: $startSide; 

Должно получиться что-то вроде этого:

#left-sidebar-wrapper {

  width: 250px;

  float: $startSide;

  word-wrap: break-word; 

  overflow: hidden;

}

Дополнительно нужно расширить размеры внешнего блока (#outer-wrapper) и, если есть желание, блоков заголовка (#header) и нижней части (#footer). Делается это также в таблице стилей путем изменения поля width

Я еще дополнительно изменил размеры блоков так, чтобы туда влазили стандартные блоки рекламы Google AdSense.

6. Осталось только загрузить новый шаблон в Blogger. Это делается в Макет - Изменить HTML путем выбора файла кнопкой Обзор и дальнейшим нажатием кнопки Загрузить

Все. Теперь можно идти в Макет - Элементы страницы и настраивать виджеты как надо.

Просто - не правда ли?