15 декабря 2009 г.

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

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

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

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


Структура блоков в шаблоне Blogger, вариант «боковая колонка - сообщения блога - боковая колонка»

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


Структура блоков в шаблоне Blogger, вариант «Сообщения блога - боковая колонка - боковая колонка»

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

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

В предыдущей статье мы выяснили, что структура и внешний вид шаблона, определяются всего несколькими элементами. Именно эти элементы мы и будем модифицировать. Чтобы третья колонка благополучно вписалась в шаблон, мы сделаем его чуть-чуть пошире. Для этого увеличим значения атрибута 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 с 3 колонками

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

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

Комментировать в ВКонтакте

Комментировать в Facebook

Комментировать в Blogger

8 комментариев:

  1. Доброго времени суток! Попробовала по Вашим советам вставить третью колонку в шаблон Harbor - ничего не получилось. Может, здесь какие-то особенности? Подскажите, пожалуйста. БИБЛИОТЕЧНЫЙ ФОРМАТ http://bibformat.blogspot.com/

    ОтветитьУдалить
  2. Разумеется, каждый шаблон имеет какие-то свои особенности. Описанную здесь схему действий стопроцентно можно применить для шаблона Minima. Для других шаблонов могут быть нюансы. Я бы даже сказал, что нюансы неизбежны. В частности у Harbor отличаются исходные размеры блоков и их относительное расположение. Так что, с наскоку может и не получиться. Чтобы вносить изменения в шаблон, Вам нужно сначала понять как устроен.
    Если хотите, могу вам помочь. Свяжитесь со мной по электропочте itprovince[собака]yandex[точка]ru.

    ОтветитьУдалить
  3. Спасибо огромное за статью! Теперь я могу свободно добавлять/убирать по желанию колонку в шаблон. Аригато гозаймас! Правда придётся подгонять старую картинку под новый формат))) Эх, нелегка доля чайника...

    ОтветитьУдалить
  4. А Вам спасибо за "спасибо". Вижу - все получилось!

    ОтветитьУдалить
  5. А я вчера весь день посветил,чтобы изменить мой блог http://www.savoya-sportagent.blogspot.com
    Который создан на платформе шаблона Trendy Cork?yj ничего не получилось.Как вы говорите - есть свои нюансы.

    ОтветитьУдалить
  6. Спасибо, все получилось!!!
    Создал эксперементальный блог http://wedding-psd.blogspot.com на базе шаблона Minima и все Ок с первого раза. Автору респект.

    Но у меня еще вопросик, может не по теме - Как "Вставить переход" на дополнительных страницах созданых мной. Когда захожу в пункт "Изменение сообщения", кнопочка "Вставить переход" на панели отсутствует, а хотелось бы иметь возможность редактировать статьи как на Главной странице.
    Спасибо.

    ОтветитьУдалить
  7. Странно, вродь все сделал как написано, шаблон расширился а колонки непоявилось(((( шаблон minima black подходит? а то блог худой какой то http://allaboutpspdark.blogspot.com ........

    ОтветитьУдалить
  8. Для всех тех у кого ничего не получилось
    1. Заходим http://wedding-psd.blogspot.com - смотрим результат.
    2. Если понравилось, то забываем напрочь, что написано вверху.
    3.заходим на Панель инструментов Blogger'а не по обычному адресу, а через их испытательный полигон: http://draft.blogger.com Там на вкладке "Дизайн" теперь новая опция "Дизайнер шаблонов".
    4. Если необходимо, то увеличиваем ширину блога - в коде ищем вот такой кусок b:template-skin и пальчиками вбиваем нужный размер. Тока смотрим - там первая величина дефолтная default='930px, а нам нужна value='1100px. Потом "сохранить шаблон". Вуаля.

    ОтветитьУдалить