как сделать футер BLOGGER в 3 колонки

Привет, друзья. Не все шаблоны Блоггер дают возможность настроить внешний вид подвала (футера). А ещё есть и некоторые сторонние шаблоны, где футер вообще не предусмотрен. У меня в предыдущей версии шаблона такое было. А ведь этот элемент макета может содержать много информации и помочь разгрузить сайдбар. Можно добавить счётчики статистики или  форму связи. Всё что угодно.

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

Вот так выглядит обычный футер  в шаблонах Блоггер. Скучно, одиноко и не красиво.

Будем исправлять ситуацию и сделаем его выразительнее и интереснее. Как - то так

Демонстрация 

Как сделать футер в 3 колонки

Шаг 1. Заходим в админпанель блога - вкладка тема - изменить HTML. Находим закрывающийся тег </body> и над ним вставляем следующий код

<div id='lower'>  <div id='lower-wrapper'>  <div id='lowerbar-wrapper'>  <b:section class='lowerbar' id='lowerbar1' preferred='yes'>  </b:section>  </div>  <div id='lowerbar-wrapper'>  <b:section class='lowerbar' id='lowerbar2' preferred='yes'>  </b:section>  </div>  <div id='lowerbar-wrapper'>  <b:section class='lowerbar' id='lowerbar3' preferred='yes'>  </b:section>  </div>  <div style='clear: both;'/>  </div> </div>

Шаг 2. Там же, во вкладке тема нужно найти строку ]]></b:skin> и так же над ней добавляем этот код 

#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#00868B;
}
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;

}

#lowerbar-wrapper {
     border:1px solid #DEDEDE; 
       background:#fff; 
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%; 
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word;
       overflow: hidden;
}

       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}

.lowerbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
      color:#53868B; 
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}

.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

Этим мы задали стили для футера. И давайте сразу смотреть что можно поменять под дизайн вашего блога. 

  background:#00868B;общий фон футера

 жёлтым цветом отмечены границы, фон и ширина поля гаджетов

 color:#53868B; цвет заголовков гаджетов и размер шрифта

Если ещё пофантазировать и добавить некоторые стили можно получить примерно такой вариант.

Вместо   background:#00868B; вставила фоновую картинку - background:url(адрес картинки).

Добавила рамку и закругление углов

border:5px solid #DEDEDE;
border-radius: 50px 50px 0px 0px;

Творите, что хотите.

В конечном результате у нас появится поле с тремя дополнительными колонками для гаджетов. Даже если у вас уже есть сам по себе футер в макете и в нём размещена какая - то информация, можно просто переместить виджеты (гаджеты) в новый. Или убрать и установить снова, во вновь созданный.

Каким вы хотите видеть подвал блога, решать вам и только вам. Коды готовые есть, а остальное дело вкуса.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email