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

Невероятно, но факт – существуют шаблоны Blogger и вовсе без боковой панели – «сайдбара» (sidebar). Лично я подозреваю, что основным инструментом создания таких шаблонов является клавиша Del, нажатая в нужном месте. Тем не менее нельзя полностью исключить исчезновение сайдбара как результат некоего Высшего Замысла.

В данном случае речь о ситуации когда нужды пользователя идут вразрез с замыслом Его Рукоблудия – дизайнера.

Как вернуть сайдбар в Blogger

За редкими исключениями, основной блок (main) и боковая панель (sidebar) располагаются внутри блока «содержимое» (content). Причем, main – с «прилипанием» к левому краю содержимого, sidebar – к правому. Или наоборот (зависит от ВЗ).

Блоки Main и Sidebar в шаблоне Blogger

Перед внесением любых изменений в шаблон, рекомендую сделать резервную копию.

1. Перво-наперво, следует добавить HTML код сайдбара в шаблон. Внутри блока content (или content-wrapper), сразу за блоком main (main-wrapper):
   

   <div id='content-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='sidebar-wrapper'>
       <b:section class='sidebar' id='sidebar' preferred='yes'>
         <!-- Здесь будут виджеты сайдбара -->
       </b:section>
     </div>
     <!-- Конец кода сайдбара -->
   
     <!-- Следующий код убирает обтекание текста -->
     <div class='clear'> </div>
   
   </div> <!-- end content-wrapper -->



2. С помощью CSS стилей шаблона Blogger задать боковой панели выравнивание справа: float: right;


3. Важный момент (смотри картинку): Поскольку блоки main и sidebar расположены на одном уровне внутри контейнера content-wrapper, нужно доступную ширину разделить между ними. Можно попросту задать «от бадлы», а потом «доработать напильником». В общем случае будет выглядеть так:
   

   #main-wrapper {
     width: 500px;/* ширина основного блока */
     float: left;/* выравнивание по левому краю */
   }
   #sidebar-wrapper {
     width: 300px;/* ширина боковой панели */
     float: right;/* выравнивание по правому краю */
   }



4. Сохранить шаблон.

Теперь всё на своих местах; порядок и благолепие.

--
Организовать твою поклажу, – лэптоп, коммуникатор, бутерброд и два пакетика кофе, – помогут специальные средства. Например – сумки для ноутбуков или другого багажа.