Колонка слева, колонка справа

Не так давно я рассказывал как быстро и просто создать в шаблоне Blogger дополнительную, третью колонку. В примере колонка размещалась между основным блоком и боковой панелью. В этот раз расскажу как тем же способом добавить третью колонку слева и справа.

Сам метод создания 3-колоночного шаблона для Blogger приведен в этой статье: Третья колонка в шаблоне. Из него и буду исходить.

Колонка между основным и боковым блоками

Фактически это пример из исходной статьи (ссылка выше).

Третья колонка между основным блоком и сайдбаром
Демо

Фрагмент кода шаблона с дополнительным блоком

<!-- Блок основного содержания -->
<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='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
    <!-- Виджеты боковой панели у всех разные -->
  </b:section>
</div>

<!-- Блок дополнительной боковой панели -->
<div id='sidebar2-wrapper'>
  <b:section class='sidebar' id='sidebar2' preferred='yes'>
  </b:section>
</div>

<div class='clear'>&#160;</div>

Стили CSS дополнительного блока

#sidebar2-wrapper {
  width: 170px;
  float: right;
  word-wrap: break-word;
  overflow: hidden;
}

Третья колонка слева

Третья колонка в шаблоне слева
Демо

Для того, чтобы третья (дополнительная) колонка располагалась в шаблоне слева, нужно:

1. Вставить код дополнительного блока перед блоком основного содержания:
   

   Фрагмент кода шаблона с дополнительным блоком слева

   
   

   <!-- Блок дополнительной боковой панели -->
   <div id='sidebar2-wrapper'>
     <b:section class='sidebar' id='sidebar2' preferred='yes'>
     </b:section>
   </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>
   
   <!-- Блок боковой панели -->
   <div id='sidebar-wrapper'>
     <b:section class='sidebar' id='sidebar' preferred='yes'>
       <!-- Виджеты боковой панели у всех разные -->
     </b:section>
   </div>
   
   <div class='clear'>&#160;</div>

   
   


2. В свойствах стилей дополнительного блока задать выравнивание по левому краю.
   

   Стили CSS дополнительного блока. Положение слева.

   
   

   #sidebar2-wrapper {
     width: 170px;
     float: left;
     word-wrap: break-word;
     overflow: hidden;
   }

Третья колонка справа

Третья колонка в шаблоне справа
Демо

Чтобы разместить третью колонку в шаблоне справа:

1. Вставь код дополнительного блока после блока основного содержания, перед блоком боковой панели:
   

   Фрагмент кода шаблона с дополнительным блоком справа

   
   

   <!-- Блок основного содержания -->
   <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'>
     </b:section>
   </div>
   
   <!-- Блок боковой панели -->
   <div id='sidebar-wrapper'>
     <b:section class='sidebar' id='sidebar' preferred='yes'>
       <!-- Виджеты боковой панели у всех разные -->
     </b:section>
   </div>
   
   <div class='clear'>&#160;</div>

   
   


2. В свойствах стилей дополнительного блока задать выравнивание по правому краю.
   

   Стили CSS дополнительного блока. Положение справа.

   
   

   #sidebar2-wrapper {
     width: 170px;
     float: right;
     word-wrap: break-word;
     overflow: hidden;
   }

Таким образом дополнительную, третью колонку в шаблоне Blogger можно размещать где угодно на странице.

P.S. Спасибо Александру и Елене за вопрос.

© 2010 dotrb.blogspot.com