Отправляет email-рассылки с помощью сервиса Sendsay

Blogger без проблем

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Блогосфера: продвижение сайта и многое другое" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

  Декабрь 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Провинциальный программист

Статистика

127 подписчиков
0 за неделю
←   Все выпуски   →

__ISSUE__


Часть 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 */
  }

Для элемента sidebar-wrapper (контейнер боковой колонки) установите значение атрибута width 20%. Рядом добавьте описание стиля третьей колонки sidebar2-wrapper. Это будет выглядеть вот так:

#sidebar-wrapper {
  margin-$endSide: 2%;
  width: 20%;
  float: $endSide;
  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 */
}

#sidebar2-wrapper {
  margin-$startSide: 2%;
  width: 20%;
  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 */
}

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

Если Вы хотите, чтобы колонки в шаблоне расположились по схеме «боковая колонка - сообщения блога - боковая колонка», тогда дополнительную колонку нужно добавить перед 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 готов.

Я надеюсь, что после эти двух уроков Вам не составит труда сделать подобные изменения в любом из встроенных шаблонов Blogger. А для тех, кто предпочитает использовать готовые шаблоны, в следующих постах будут опубликованы готовые к использованию трехколоночные варианты шаблонов Minima, Minima Stretch, Denim и Denim Stretch.

P. S. Здесь могла бы быть ссылка на Ваш сайт.

Blogger без проблем
Copyright (C) 2009. Все права защищены.
В избранное