суббота, 23 августа 2008 г.

Делаем трехколоночный "подвал" в Blogger

Спонсор поста: Материальная помошь в срочный выкуп квартир.

Вольный перевод оригинального поста.

Хотя специалисты многие специалисты по юзабилити и считают что в «подвал», засовывается всякая дрянь, потому что далеко не каждый читатель дойдет до конца страницы, нынче, мода меняется. Достаточно посмотреть блоги ведущих западных блоггеров, чтобы убедиться в том, что «подвал» играет не последнюю роль.

Даже если вы не хотите придавать веса и значения своему подвалу, все равно такая модификация будет не лишней, хотя бы для того, чтобы компактно сорганизовать кнопочки, счетчики и прочие вещи на которых вы не хотите акцентировать внимание читателя.

В Wordpress, насколько я знаю, проблема решается довольно просто, но когда я захотел себе сделать трехколоночный подвал в Blogger, пришлось серьезно потерзать Google, и решение было найдено.

Проблема решается в 4 шага:

Шаг 1. Традиционно, нужно сохранить в надежное место шаблон. Заходим во вкладку «Макет», выбираем «Изменить HTML», далее – «загрузить шаблон».

Шаг 2. Если у вас в «подвале» (footer) есть виджеты, переместите их пока на боковую панель. Это делается временно, чтобы они не удалились, потом когда шаблон будет изменен, можно опять вернуть виджеты из side-bar в «подвал».

Шаг 3. Возвращаемся во вкладку «Макет», выбираем «Изменить HTML». Внимание! Галочку «расширить шаблон виджета» ставить не нужно!
Находим следующую секцию (должна располагаться почти в самом низу кода):

div id='footer-wrapper'
b:section class='footer' id='footer'/
/div

Примечание: автор говорит о том что в зависимости от шаблона, лексика может немного отличаться, вместо 'footer-wrapper', может быть "footer-wrap" или "footer". В моем случае было последнее.

В любом случае нас интересует выделенное красным, которое следует заменить на следующий код:



Шаг 4. После того как сохранили шаблон,
возвращаемся во вкладку «Макет», выбираем «Изменить HTML»,
находим закрывающий тэг:  
</b:skin>

и вставляем перед ним следующий код:

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}


Сохраняем, шаблон – все готово! Что вышло, можно посмотреть у меня внизу, правда, я пока еще не наладил свой «подвал», но кое-что там обозначил, чтобы вам проиллюстрировать, а мудрить буду завтра -).

Новости акции «заКЛАДкоискатели»: акция движется, участников все больше, кто еще не присоединился – добро пожаловать!

Чтобы не пропускать мои «экзекуции», можно подписаться на RSS,
а если понравился пост – добавить в закладки.

Еще читать:

Как увеличить поисковый трафик на Blogger

Меняем домен blogspot на бесплатный co.cc
54 воодушевляющих и оригинальных шаблонов для Blogger
14 полезных виджетов и скриптов для сервиса Blogger




Читайте по теме



28 комментариев:

  1. Закрывающего тега невидно! Что ты имел ввиду не понять, в 4 шаге.

    ОтветитьУдалить
  2. Честно говоря, в xml/css и в скриптах имею только самые базовые знания, но всегда публикуют только то что попробовал. Не знаю, на сколько корректная лексика, мне кажется все теги закрыты (шаг 4, на сколько я понимаю CSS атрибуты), проверил на сайте оригинала, все так же, у меня вроде все работает, единственное я пока еще ничего толком в подвал не поместил, только так по мелочи.

    ОтветитьУдалить
  3. Дмитрий!
    Хочу создать у себя в блоге трех-колончатый подвал...
    Это можно будет в подвале вставлять гаджеты в три ряда?
    Я правильно поняла цель создания такого подвала?

    ОтветитьУдалить
  4. Да, Вы правильно поняли, только не 3 ряда, а 3 колонки, рядов может быть сколько угодно. У меня честно говоря, там еще нет идеально-эстетического порядка, но постепенно довожу его до ума, что-то добавляю, что-то меняю, ну и т.д. Посмотреть можно, есть опуститься в самый низ моего блога -).

    ОтветитьУдалить
  5. Рисунка, иллюстрирующего закрывающий тег на 4-м шаге - не видно. Какой тег имеется в виду?

    ОтветитьУдалить
  6. Да... я вижу, что трёхколоночный "подвал" у тебя раскрашен цветом (цвет назначен в коде)... а можно ли сделать так, чтобы не цвет был, а бекграунд шаблона? Прозрачный, значить, "подвал" чтобы...

    ОтветитьУдалить
  7. То Allpa: да, картинка исчезла, уже переделал.
    Цвет фона можно назначить любой, это определяется css стилем.

    ОтветитьУдалить
  8. Проделала операцию, получилось, но на этот мой шаблон встал криво - во-первых, "подвал" вылез за пределы основного изображения шаблона (блокнот) и расположился под ним. Во-вторых, гаджеты встали не в один ряд, а два рядом, а третий растянулся снизу. Но это как раз ничего... А вот как растянуть изображение шаблона, чтобы "подвал" попадал на него, а не на бекграунд, я не знаю...
    Короче, сия полезная фича не для всякого шаблона годится... :(

    ОтветитьУдалить
  9. >> Цвет фона можно назначить любой, это определяется css стилем <<

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

    ОтветитьУдалить
  10. To Allpa: Совершенно верно, все задается в CSS стилях, абсолютно любые параметры оформления - цвет, шрифты, ширина, высота, позиция, в общем, все. Поэтому данная фича годиться для любого шаблона, единственное для каждого отдельного может требовать настройки. Но, к сожалению это вещь о которой в комментарии не расскажешь, сам сегодня шел мимо книжного, зашел купил толмут по CSS - пригодиться для общего развития -).

    ОтветитьУдалить
  11. Дмитрий, вы уж извините, но вопрос не в тему задам, - просто нигде найти не могу ответа. У меня когда читатели оставляют комменты, то эти самые комменты не отображаются до тех пор пока я не зайду в панель инструментов и не "опубликую" их. Может подскажите как это разрешить раз и навсегда.

    ОтветитьУдалить
  12. То Holodoff: Это отключается очень просто, в настройках в закладке "комментарии", нужно выбрать публиковать комментарии без модерации.

    ОтветитьУдалить
  13. Я осваиваю новый шаблон, неймётся мне. :)
    Получилось запихнуть "подвал" - твоя инструкция чудесна, ещё раз в этом убеждаюсь. :) Спасибо огромное тебе за неё. :))
    Теперь у меня два вопроса:
    1. Можно ли между колонками подвала запихнуть так называемый сепаратор - вертикальную разделяющую линию? Для красивости, сам понимаешь. :) Вот как здесь, например (прокрути вниз, до "подвала": видишь - колонки разделены сепараторами, да-да, я знаю, что эта конкретная тема - это тема для WP, но чисто теоретически: возможны ли сепараторы в "подвале" Blogger'a?);

    2. Где менять цвет для блоков содержимого "подвала"? То есть я сделала ему такой, красный фон, а если в "подвал" запихивать гаджеты, то их содержимое - по умолчанию на белом фоне, некрасиво, сам понимаешь...
    Вот и у тебя: голубой фон с белыми квадратами... это можно поменять?

    ОтветитьУдалить
  14. То Allpa: Привет! Да конечно, настроить можно все. У меня кстати, тоже средняя колонка выглядит не фонтан, содержимое нужно выравнить по центру колонки. Но, сейчас такое количество дел навалилось, что никак не дойдут руки -). Оформление меняется в CSS. Это последний фрагмент кода, как видишь там по сути ничего нет, даже цвета. Сепараторы тоже добавить можно. Наверное лучше будет посмотреть какой-нибудь сайт по CSS где есть описание аттрибутов, сложного там ничего нет, нужно будет только добавить строку с цветом фона. Там кстати, и сепаратор есть, внизу, он в конце первого фрагмента кода, можно по аналогии с ним сделать и вертикальные. Извини что не могу помочь тебе прямо сейчас, написав фрагменты кода, я не настолько знающий в CSS человек чтобы с ходу выражаться "кусками кода" -).

    ОтветитьУдалить
  15. Рассказываю сейчас, как воспользовалась этим твоим советом, даю на тебя ссылку. Но чё хочу сказать: в окне, где лежит кусок кода, видно одно - "Сервер не найден. Firefox не может найти сервер bloggerbuster.com." - обрати внимание, плз. Может, вставить его просто как цитату? А то народ пойдёт смотреть по ссылке, а у тебя их будет ждать облом... :(

    ОтветитьУдалить
  16. То Allpa: да, я тоже заметил что bloggerbuster.com в последнее время бывает не доступен, это я экспериментировал когда-то с фреймами -). Нужно бы переделать как обычно. Спасибо за сообщение!

    ОтветитьУдалить
  17. Да, ещё одно хочу спросить: сейчас кнопка "Twit this" (и у меня в блоге, и у тебя) - не работает, идёт сообщение о том, что сервер "http://twitthis.com/.... ля-ля-ля" - не найден. Это только мой И-нет шалит, или Твиттеровский ресур вообще упал? Хотя на страницу Твиттера захожу нормально... Проверь, а?

    ОтветитьУдалить
  18. О! Код уже починился. :)
    А между прочим, подписка по "мылу" - так и не работает... я плакалЪ... :((

    ОтветитьУдалить
  19. То Allpa: Алис, у меня кнопочка работает отлично, только что попробовал, можешь посмотреть в Твиттере, этот пост появился. На счет подписки по "мылу", в пятый раз прощу прощение, это уже наверное, мое разгильдяйство. Не хорошо с моей стороны по отношению к читателям. Каюсь, и обещаю пошевелить задницей.

    ОтветитьУдалить
  20. Спасибо, Дмитрий!
    Сегодня наконец я одолела треколоночный шаблон, и у меня все получилось.
    Запостила ссылку на ваш блог в своем блоге "Эксперимент" и там же дала ссылку на свой тестовой блог, куда внедряла код для трех колонок в подвале.

    ОтветитьУдалить
  21. Ну, вот, отлично! А у меня наконец дошли руки и я починил подписку на e-mail. За ссылку спасибо, с меня причитается -).

    ОтветитьУдалить
  22. prokofevna , отличный у Вас получается шаблон - так держать! :))

    Дмитрий! Наконец-то!!! Молодец. :) Подписалась. :)

    ОтветитьУдалить
  23. Дмитрий, смотрю у вас в подвале отображается только две колонки...
    У меня правая колонка тоже убегала вниз, и ее не видно было.
    Я поменяла в коде ширину срелней колонки с 40% на 30% и все встало на свои места.


    Allpa - вы до сих пор не поменяли свою форму для комментариев.
    Я не то что не могу отправить вам комментарий, но даже напечатать его.
    Исправляйте ошибку.
    Попробуйте через - Настройки - Комментарии
    Пререйдите на другой вид комментариев. Сохраните.
    А потом можно уже делать на "Вложенное ниже!....

    ОтветитьУдалить
  24. То prokofevna: Да вроде все нормально ни кто никуда не убегал -). Какой у Вас браузер? На Mozile, Chrome и Opera у меня всегда отображается нормально, единственное нужно посмотреть как в IE...

    ОтветитьУдалить
  25. prokofevna, голубушка!!!!!! Я сделала, как Вы сказали! Попробуйте!
    Но хочу заметить: Вы единственная, кто жалуется на невозможность отправки комментария. Посмотрите: к каждому посту по несколько каментов - ни у кого, значит, нет проблем. И копать, выходит, нужно Вам...
    Blogger и мне иногда сообщает, причём, на отправку каментов в свой собственный блог, что не удалось отправить, повторите попытку...
    Попробуйте отправить камент из другого браузера, а?
    ________________________
    Дмитрий, а почему ты отказался от формы для каментов, что у тебя была? Опять, вижу, стандартная стоит...

    ОтветитьУдалить
  26. Все, ребята!
    ВСе хорошо у вас отображается...
    И спасибо за подсказку - скачала Хром, и сейчас все в порядке( это у меня IE6 глючный был)

    ОтветитьУдалить
  27. Дмитрий привет, давно искал данную тему-у меня шаблон не стандартный-подвала нет совсем, попробовал ваш скрипт подвал появился В ВЕРХУ )))... может подскажете как сделать в низу?

    ОтветитьУдалить
  28. То Fusesound: Привет! Извини что так не оперативно, сообщение о комментарии почему-то попало в спам... Может быть проблема уже решена? Хотя, если речь о fusesound.blogspot.com, заглянул там подвала нет, видимо речь была о нем -). По-скольку, проверено на многих блогах, моем в том числе, что все нормально работает, у меня вариант 2: 1) ты где-то ошибся; 2) в шаблоне другие переменные, т.е. например, подавал не footer, а как-то еще. В любом случае разберемся - напиши мне на e-mail, можно сразу в письмо скопировать код блога - посмотрим!

    ОтветитьУдалить