пятница, 27 ноября 2009 г.

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

Blogger logo Sidebar

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


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


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


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


Блоки Main и Sidebar в шаблоне BloggerБлоки 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. Сохранить шаблон.

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


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


1 Комментариев :

Святослав комментирует...

А как его сделать в любом месте шаблона? чтоб потом можно было видеть в элементах страницы где он находится.

Отправить комментарий

Жги!