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

Как сделать третью колонку в шаблоне Blogger

Трехколоночный шаблон блога Blogspot
Скриншот | Демо

Простая и подробная инструкция.

В теории добавление 3-й, дополнительной колонки можно представить так:

• Уменьшить основной блок;


• сузить боковую панель;


• добавить еще одну боковую панель.

На практике все ненамного сложнее.

1. Найди в редакторе HTML шаблона следующий код. Коды могут отличаться в зависимости от используемого шаблона, но не существенно.
   

   <!-- Блок основного содержания -->
   <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. Добавь код для 3-й колонки после блока боковой панели:
   

   <!-- Блок основного содержания -->
   <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>

   
   

   Блоки «обертки» (wrapper) и секции (section) дожны иметь уникальные идентификаторы. «Уникальные» – не значит «оригинальные», поэтому я задал им id sidebar2-wrapper и sidebar2 соответственно.



3. Задай стили CSS для 3-й колонки. И не забудь уменьшить секцию основного раздела и боковой панели.
   

   #main-wrapper {
     width: 530px;
     float: left;
     word-wrap: break-word;
     overflow: hidden;
   }
   
   #sidebar-wrapper {
     width: 220px;
     float: right;
     word-wrap: break-word;
     overflow: hidden;
   }
   
   #sidebar2-wrapper {
     width: 170px;
     float: right;
     word-wrap: break-word;
     overflow: hidden;
   }



4. Сохрани изменения.

Страница «Изменить дизайн» должна выглядеть примерно так:

Добавить и упорядочить элементы страницы

Можешь добавлять гаджеты Blogger в дополнительную, третью колонку.

Рекомендую по теме:

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


• Сайдбар в шаблоне Blogger


• Футер Blogger в три колонки