воскресенье, 2 ноября 2008 г.

Футер из трёх колонок для Blogger.com.

Сейчас модно всякие штуки в стиле веб 2.0.
То, из всей этой дванольщины, что касается дизайна а не функциональности, я считаю просто поветрием моды. Если мы посмотрим на эволюцию рекламных плакатов, или, к примеру, оформления сигаретных пачек, то много из того что мы увидим покажется нам забавным (или даже смешным).
Мы с удивлением смотрим на старинные одежды, в которых ходили люди пару веков назад. А я, даже, к примеру, нахожу нелепыми модную одежду и причёски женщин времён 60-х.
Точно также будут смотреть и на нынешних эмо =)
Впрочем, в 2.0 есть и довольно функциональные стороны (некоторые из этих фишек, возможно, были и раньше - просто их не называли таким модным ныне словом).
Я слышал мнения, что футер сайта (footer) т.е. его нижяя часть, разделенная на несколько частей - это заслуга веб 2.0.
Не знаю, может быть это и так. Но в любом случае, присоединяться к сообществу тех людей, которые при словосочетании "веб 2.0" блаженно замирают, я не собираюсь. Не люблю модные слова и подобные же веяния. Время отсеет лишнее, и посмотреть на вещи более трезво мы сможем лишь в ретроспективе.

Итак, на движке Blogger, если захотеть, можно сделать и трёхколоночный футер.
Т.е. добавить места ещё для трёх виджетов внизу.
Я лично пробовал это на своём персональном блоге, но, за ненадобностью и отсутствием чего-то такого, что можно было бы в это появившееся место добавить, удалил это новшество.
Должен отметить: всё-таки похоже что в некоторых дизайнах блоггера приведённый ниже способ не действует.

Итак, чтобы сделать это, как обычно, перед всеми изменениями делаем бэкап своего шаблона на тот случай чтобы можно было всё вернуть, если что-то пойдёт не так как надо (делается это в макет/изменить HTML / загрузите шаблон из файла на жестком диске - и сохраняете его себе на жёсткий диск).
После этого, если в вашем футере на данный момент уже расположен какой-либо виджет, уберите его на время (предположим переместите куда-нибудь на боковую сторону).

Затем находим в коде строки:

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

Кстати, эта секция (т.е. footer-wrapper) у вас может называться и несколько иначе - к примеру "footer-wrap" или "footer").
Затем, внимание, мы должны заменить ту строку, что выделена красным цветом, следующим кодом:

<div id='footer-column-container'>

        <div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

   <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
        </div>

        <div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
   <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
        </div>

        <div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

   <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
        </div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/>
</p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>


Затем в своём коде вы находите вот такой вот маленький фрагмент:
</b:skin>

И сразу прямо над строкой в которой он расположен вставляете это:


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

.footer-column {
padding: 10px;
}

Можете предварительно нажать "просмотр", на всякий случай, если вы где-то ошиблись.
Скорее всего ошибка, если вы её допустили, будет заметна.
Сохраняете шаблон, идёте в элементы страницы и видете места для новых трёх виджетов в вашем футере.
Затем можно заменить <hr align='center' color='#5d5d54' width='90%'/> на более удобоваримый цвет (то что выделено красным), если этот вам не подойдёт. Код можно посмотреть в таблице цветов.

Мне, кстати, не понравилось в данном коде то, что он расставляет виджеты почти по всей ширине страницы (ведь не все блоги растянуты по всей ширине страницы, некоторые расположены по её центру).
Чтобы убрать этот разброс поменяйте "90%" (то что выше выделено синим) на 80 или 70.
Всё, наслаждайтесь, придумывайте что вам запихнуть в новые футеры.

В CSS я особо не разбираюсь, и если что-то и понимаю, то только благодаря моему примитивному знанию английского языка. Поэтому этот код я придумал не сам, а взял отсюда. Не знаю, законно ли это, но никакого слова вроде "copyright" я там не нашёл, так что будем считать что автор поста разрешил себя копировать, тем более что я ссылаюсь на неё.

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

  1. Привет!
    Я так понял ты сделал этот трёхколоночный блог из стандартного 2-х колоночного. Смелая идея!

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


    Где в шаблоне описание этого поля? Я хочу этот шрифт сделать тоньше, т.е. убрать bolder или что-то в этом роде?

    ОтветитьУдалить
  2. Пока снимаю заявку! Случайно у меня получилось сделать изменения шрифта.

    ОтветитьУдалить
  3. Numerologger, это очень просто: вы заходите в макет/шрифты и цвета и там настраиваете.
    Но должен сказать, что не во всех шаблонах возможно менять там шрифты. В точно таком же шаблоне как в этом, эта функция там недоступна (возможно только поменять цвет шрифта в описании блога).
    Чтобы сделать иначе (насколько я понимаю) - надо изменить строку

    Variable name="pagetitlecolor" description="Blog Title Color"

    Точнее то, что под ней.
    Но у этой строки тока параметр цвета.
    Внизу под этой строкой находятся строки такого же вида с параметрами цвета, шрифта, толшины и размера шрифта. Можно попробовать заменить эту строку на одну из таких, которые ниже - но при этом оставить значения, которые обозначает эта строка - т.е. то что в кавычках pagetitlecolor и Blog Title Color. А там уже можно пробовать побаловаться с параметрами - заменить normal на blod и т.п.
    Я попробовал заменить строку - всё рботало, но адекватно изменить шрифт у меня не вышло, т.к. я не специалист по css.
    Возможно это выйдет у вас, если вы запасётесь терпением или прочтёте где-нибудь материалы по данной теме.

    ОтветитьУдалить
  4. Большое спасибо за статью,но наверно из-за стандартного шаблона мне вот что выдёт:
    Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
    Сообщение об ошибке в XML: The element type "div" must be terminated by the matching end-tag "

    Что с этим можно сделать?

    ОтветитьУдалить
  5. Дмитрий! Спасибо за пост.
    Сегодня наконец у меня получилось в тестовом блоге создать три добавочных колонки в подвале шаблона.
    Все прошло на ура.
    Написала пост об этом "Эксперименте" и дала ссылку на вас. Там же есть адрес тестируемого блога( за основу брала стандартный шаблон из Блоггера). ПОсмотрите пожалуйста.
    Может будут какие-нибудь замечания или советы.
    Буду благодарна....

    ОтветитьУдалить
  6. Всё,тройной подвал готов,а как сделать доп.колонка справа/слева и сдвинуть сообщения ближе к краю,а то у меня они строго по центру идут.

    ОтветитьУдалить
  7. Этот комментарий был удален автором.

    ОтветитьУдалить
  8. Делал то же, но по-своему. Намучался пока выровнял все.

    ОтветитьУдалить
  9. А если шаблон нестандартный и очень хочется хотя бы еще 1 sidebar - схема таже?

    ОтветитьУдалить
  10. далось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
    Сообщение об ошибке Написала пост об этом "Эксперименте" и дала ссылку на вас. Там же есть

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