суббота, 12 декабря 2009 г.

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

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


3 колонки в шаблоне 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. Сохрани изменения.

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

Шаблон в 3 колонки – ДизайнДобавить и упорядочить элементы страницы


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


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

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

Marina Kurvits комментирует...

Здорово! Спасибо!

БабочкаЯночка комментирует...

Я такие шаблоны во сне вижу, так мечтаю для своих блогов иметь. Света сделала мне на двух блогах третью колонку - я в восторге, но сама в коды лезть не в состоянии. А для коллективного блога "Друзья БабочкиЯночки" эта колонка просто необходима, иначе информация текущая, которую нужно иметь в поле зрения, просто теряется. Но не могу же я Свету снова напрягать, совестно уже... Может быть кто-нибудь из молодых девочек согласится сделать изменения о которых вы написали. Я для этого даже на такой шаблон с удовольствием перейду, который тут в примере дан. Он мне очень нравится. Поэтому сейчас ссылочку дам в коллективный блог с призывом о помощи. Спасибо.

Croaker комментирует...

В примере использовался стандартный шаблон Minima, который я предварительно увеличил в ширину до 960 px. Структурно очень удобный шаблон.

Люц комментирует...

Лаконично, и главное понятно что к чему. Очень даже не плохо.

НО лично мне кривизна рук не даёт жить спокойно.

а что если 2ой sidebar не отображается в "Элементах страницы", но его вполне можно узреть при просмотре блога. а так же в его div можно засунуть пару-тройку виджетов.

та же беда с footer'ом. В "Элементах..." отображается где попало, хотя на самой странице так как задумано.

если что, то могу приложить xml (совсем крохотный)

P.S.
убрал
.footer т.к. в css не очень (вначале преположил что это что-то вроде класса, но не догнав смысла и принципа действия - снёс)

a13x4ndr комментирует...

Хорошо бы еще осветить тему, как новую колонку перенести влево, вправо и в другие стороны :)

Croaker комментирует...

Люц, могу только предположить, что проблема либо с «врапперами», либо с section, либо с CSS :). Причин может быть много.
В случае если что-то не получается я обычно «откатываю» все изменения к первоначальному виду и пытаюсь повторить более внимательно.
XML шаблона можешь выложить на pastie.org и дать ссылку. Я рассказывал про использование этого сервиса здесь: Pastie подсветка синтаксиса. Постараюсь посмотреть; не обещаю, что сразу.

Croaker комментирует...

a13x4ndr, спасибо за «наводку» ;). Это не сложно; напишу дополнение в ближайшие дни.

a13x4ndr комментирует...

Рад, что помог.
Еще если можно свое мнение о внешних системах комментирования, в частности IntenseDebate. Заранее благодарен!

Croaker комментирует...

Если кратко, то не пользуюсь. Тема внешних сервисов комментариев попадалась давно, но это все-таки внешние сервисы. А чем больше узлов, тем ниже надежность.
Система комментирования в Blogger действительно недостаточно гибкая, но работы ведутся. Хотя и не такими темпами как хотелось бы. Пока лично я заметил, что добавились:
1. Аватары в стандартных и в нестандартных шаблонах Blogger;
2. Поддержка тегов strong и em;
3. Дополнительные профили комментирования.
Но этого пока недостаточно.

Что до IntenseDebate, то действительно есть сильные и весомые «плюшки» этой системы комментирования. Но какого-то особого доверия пока что нет.

Тему обдумаю; может, и протестирую в каком-нибудь блоге, «на растерзание» :).

a13x4ndr комментирует...

Ну, и на том спасибо :)
Будем ждать.

S*Елена комментирует...

Доброго времени суток. А действительно, возможно новую колонку перенести влево, чтобы основной текст и первая колонка были справа? Что-то у меня никак не получается...

Croaker комментирует...

S*Елена, да перенести можно. Эта тема как раз у меня «на заметке» – в одном из ближайших постов рассмотрю.

Croaker комментирует...

Написал как «перемещать» колонку: Колонка слева, колонка справа.

Cramer комментирует...

сделал 2 колонки как у вас только слева теперь они пчнму то прижаты почти вплотную к тексту который рядом находится(

Cramer комментирует...

а как сделать еше 1 колоку под 2 добавленными чтобы она размером была с 2 колонки (помогите пож) вот например как тут http://freshbloggertemplate.blogspot.com/
там колонка Lables Blog archive а под ними About me

Cramer комментирует...

я хотел бы разместить в этой новой колнке видео например с you tube

Croaker комментирует...

Если колонки прижаты вплотную к тексту, дело, скорей всего, либо в ширине самих wrapper-ов, либо не заданы отступы (атрибут margin).

Что до дополнительной колонки под двумя добавленными – это не так уж сложно. Была уже идея сделать подобный шаблон, но пока нет времени.
Может, на следующей неделе.

Cramer комментирует...

ок спасибо буду ждать)

Cramer комментирует...

я разобрался с проблемой и тут появилась новая даже не знаю как исправить http://neroxxx72.fileave.com/загруженное (1).png
в левой сайдбаре почему то ширина другая и все что в нем лежит отображается тоже с другой шириной(

Croaker комментирует...

Парные колонки в сайдбаре должны иметь ширину по 50- %.

Еще «навскидку» могу предположить, что какие-то теги не закрыты. Либо неправильно закрыты.

Cramer комментирует...
Этот комментарий был удален автором.
Cramer комментирует...

спасибо!!
я вместо сайдбар left написал сайдбар middle и там все из за этого полетело

Croaker комментирует...

Да, похоже на то.

Marianna комментирует...

Не могу поменять шаблон блога, (
Все делаю по инструкции, а в итоге белый лист. Только стандартный режим работает.
Хотела поставить 4 колонки. Как быть?
http://anikina-marianna.blogspot.com/

Alexey Izvalov комментирует...

Здравствуйте.
Спасибо большое за рекомендации!

Помогите, пожалуйста, ещё по одному вопросу.
Выбрал себе для блога шаблон Son of Moto. Изменил ширину
#outer-wrapper
width: 960px;

Сейчас происходит любопытный эффект. Сначала грузится outer-wrapper со старой шириной, потом текст, а затем outer-wrapper растягивается до 960 пикселей.
Вот: http://desyatbukv.blogspot.com/

Как-то можно изменить порядок загрузки элементов?

Croaker комментирует...

Здравствуйте, Алексей.

Son of Moto – имхо не самый удачный шаблон для тюнинга. Хотя я на его основе делал вот такой дизайн: Vault Tec.

На самом деле грузится не outer-wrapper со старой шириной, а вот эта картинка: Фон шаблона.

Фоновое изображение задано в стилях CSS шаблона для тега body. Можно ее удалить, а можно просто сделать шире.

Alexey Izvalov комментирует...

Спасибо большое!

Alexey Izvalov комментирует...

Скажите, пожалуйста, а есть ли возможность в блоггере ставить премодерацию только для отдельных постов, а не для блога в целом?

Croaker комментирует...

Насколько я знаю, такая возможность пока не предусмотрена. Максимум что есть – премодерация по дате поста.

Tan4ik комментирует...

СПАСИБО! Получилось :)

Alexey Izvalov комментирует...

Кликал в верхней панели Блоггера Next Blog и попал на один индийский сайт. Из него на следующий, потом - на третий, а из третьего - на первый. Как-то им удалось замкнуть 3 сайта в кольцо, чтобы пользователи не уходили. Вот эта страница:
http://geet-gunj.blogspot.com/

Скажите, пожалуйста, как такое можно сделать и как к этому относится сам Гугл?

Вова комментирует...

А как убрать 3 колонку ???

Bogdan комментирует...

Помогите, пожалуйста, добавить третью колонку. Описанная выше инструкция не подходит к моему шаблону.. я уже как не вертел, ничего не получается. Вот мой блог http://energomir.blogspot.com/. Ответьте, пожалуйста, на bogole79@gmail.com. Искренне нужна помощь...

Bogdan комментирует...

можно с Вами пообщаться в аське?
ну а пока пару слов о проблеме... блог уже создан давно и в нем 2 стандартные колонки... меняя шаблон в дизайне блоггера...добавляя 3 и 4 колонку...все колонки становятся друг под другом
вот например http://s016.radikal.ru/i334/1112/45/a4c4be8f3559.jpg
проблема скорее в этом http://i052.radikal.ru/1112/da/54455ef6a6ee.jpg как видно добавить гаджет разделился с областью самого гаджета...от этого шаблон меняется неправильно...помогите найти ошибку или уйти от проблемы...заранее спасибо

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

Жги!