Как добавить третью колонку или столбец в блог

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

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

На картинке можно посмотреть как выглядит структура блога

на примере стандартного шаблона.
Для начала сохраните ваш текущий шаблон.
Добавьте В следующий код CSS который находится после <b:skin><![CDATA[1024 пикселей, то есть вместо вашего текущего значения:

#outer-wrapper {
max-width:890px; /*<----УВЕЛИЧИВАЕМ ДО 1024px */ padding: 0 30px 50px; width:100%; width/* */:/**/auto; width: /**/auto; }

Создаём новый столбец

Размер и расположение нового столбца определяем в CSS следующим кодом:

#rightsidebar-wrapper {
width:32%;
float:right;
word-wrap: break-word;
overflow: hidden;
}
#rightsidebar {
margin:0;
padding-top:100px;
}

Обращу ваше внимание на то, что выравниваться колонка-столбец, будет выравниваться по правому краю, для этого нам нужно создать большой столбец, который будет в себя включать левый столбец и центральный - главный ( с постами ), который будет выравниваться по левому краю. А в нём левый столбец будет выравниваться влево, а поле с постами вправо. Для этого создаём столбец twcol:

#twocol {
width:67%;
float:left;
word-wrap: break-word;
overflow: hidden;
sidebar float
}

Так как правый столбец занимает 32% то этот мы определили как 67%.

Добавляем код в HTML

Найдите в коде вот эту строчку <div id='main-wrapper'>
И добавьте перед ней

<div id='rightsidebar-wrapper'>
<div id="rightsidebar">
</div></div>
<div id="twocol">

Будьте внимательны, правый столбец был добавлен перед main-wrapper
и twocol был открыт но не был закрыт!
Чтобы его закрыть - иначе никак - найдите такую строку <div id='footer-wrapper'> и перед ней вставьте </div>
Сохраните шаблон.

Мы добавили третий столбец - но он пуст, чтобы вселить в него жизнь нужно сделать последний шаг, добавьте следующие строчки кода
<b:section class='sidebar' id='rightsidebar' preferred='yes'>
</b:section>

вместо ХХХХХХХХХХ
в коде
<div id='rightsidebar'>
XXXXXXXXXX
</div>

Всё, сохраняемся и заполняем высвободившееся свободное пространство!