Футер Blogger в три колонки

О том, что такое футер, как его организовать и даже как разбить его в три и более колонок, запросто отыщешь в интернете. Все примеры и методики по своему хороши, но... Я расскажу как сделать футер шаблона Blogger по-настоящему Blogger-powered! Иными словами, как использовать в подвале возможности платформы Блоггер на полную.

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

Футер или подвал

Футер (англ. footer) или подвал – часть сайта, находящаяся внизу страницы. Обычно содержит данные о владельце страницы, дополнительную навигацию, справочную и контактную информацию.

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

Трехколоночный футер в шаблоне Blogger

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

Вот так теперь выглядит футер моего блога в режиме визуального редактирования.

Как нетрудно заметить, в каждой из трех частей подвала можно использовать виджеты для шаблонов Blogger. И теперь-то я расскажу, как создать такой футер самому.

1. Перейди к редактированию шаблона (Макет - Изменить HTML) и найди там такую строчку (или подобную):
   

   <b:section class='footer' id='footer'/>

2. Замени ее следующими тремя:
   

   <b:section class='footer' id='footer2'/>
   <b:section class='footer' id='footer3'/>
   <b:section class='footer' id='footer4'/>

   
   или
   

   <b:section class='footer' id='footer2'></b:section>
   <b:section class='footer' id='footer3'></b:section>
   <b:section class='footer' id='footer4'></b:section>

3. Добавь следующие правила CSS в разделе для CSS стилей шаблона:
   

   .footer{
   padding:0 24px;
   margin:0 0 1em; text-align: left;
   }
   
   #footer2 {
   width: 25%; float: left;
   }
   
   #footer3 {
   width: 33%; float: left;
   }
   
   #footer4 {
   width: 27%; float: right;
   }

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

Все! После этого на странице визуального редактирования шаблона (Макет - Элементы страницы) ты сможешь добавлять в каждую из колонок футера виджеты Blogger.