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

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

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

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

Но можно встретить и альтернативный вариант компоновки блоков - «сообщения блога - боковая колонка - боковая колонка»:

С точки зрения реализации, разница между этими вариантами несущественная. Поэтому мы рассмотрим оба варианта шаблона, а Вы выбирайте себе вариант по вкусу.

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

В предыдущей статье мы выяснили, что структура и внешний вид шаблона, определяются всего несколькими элементами. Именно эти элементы мы и будем модифицировать. Чтобы третья колонка благополучно вписалась в шаблон, мы сделаем его чуть-чуть пошире. Для этого увеличим значения атрибута width (ширина) элементов outer-wrapper, header-wrapper и footer. Ширину main-wrapper также немного увеличим, а sidebar-wrapper, напротив, придется немного уменьшить. Впрочем, приведенные в примере значения ширины элементов - не догма, Вы можете подобрать любые другие значения. Но при этом помните, что суммарная ширина двух боковых колонок и блока main-wrapper со всеми отступами и полями не должна превышать ширину элемента outer-wrapper.

Найдите в коде шаблона описание стиля блока заголовка header-wrapper и установите значение его атрибута width 860 px. Теперь описание стиля должно выглядеть так:

#header-wrapper {
  width:860px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
}

Далее пролистайте до описания стиля элемента outer-wrapper и установите для него ширину 860 px:

#outer-wrapper {
  width: 860px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
}

Следом за outer-wrapper идет описание стиля элемента main-wrapper. Установите для него ширину 460 px и добавьте атрибут margin-$startSide, если Вы решили расположить колонки по схеме «боковая колонка - сообщения блога - боковая колонка», или margin-$endSide для схемы «сообщения блога - боковая колонка - боковая колонка». Значение атрибута и в том, и в другом случае - 10 px. Должно получиться так:

#main-wrapper {
  width: 460px;
  margin-$startSide: 10px;
  float: $startSide;
  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 */
}

или так:

#main-wrapper {
  width: 460px;
  margin-$endSide: 10px;
  float: $startSide;
  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 */
}

Для боковой колонки sidebar-wrapper установите ширину 180 px. Следом добавьте описание дополнительной колонки sidebar2-wrapper:

#sidebar-wrapper {
  width: 180px;
  float: $endSide;
  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 */
}

#sidebar2-wrapper {
  width: 180px;
  float: $startSide;
  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 */
}

В самом конце таблицы стилей найдите описание секции нижнего колонтитула footer и также установите для него ширину 860 px:

#footer {
  width:860px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

Завершающая операция - добавление кода дополнительной колонки с секцией в тело шаблона. Флажок «Расширить шаблоны виджета» лучше оставить выключенным - так будет проще ориентироваться в коде. Ориентир для вставки боковой колонки - код блока main-wrapper с вложенной в него секцией и виджетом «Сообщения блога»:

<div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>
    </b:section>
</div>

Если Вы выбрали схему расположения колонок «боковая колонка - сообщения блога - боковая колонка», тогда дополнительную колонку нужно добавить перед main-wrapper, вот так:

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

<div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>
    </b:section>
</div>

При расположении колонок по схеме «сообщения блога - боковая колонка - боковая колонка» дополнительную колонку, соответственно, нужно добавить после main-wrapper, вот так:

<div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>
    </b:section>
</div>

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

Теперь можно переключиться на закладку «Элементы страницы» и добавлять виджеты в новую колонку.

В следующий раз проделаем то же самое с «резиновым» шаблоном Minima Stretch.

P. S. Heromant поделился опытом подлива трафика на сайт.
О том, как обменяться со мной ссылками, можно узнать здесь.