Делим footer blogger на 3 колонки с виджетами

В некоторых шаблонах blogger вы уже встречали оформление footer (футер, подвал, нижняя часть блога) в виде колонок. В footer вы можете добавить необходимую для вас или ваших читателей информацию, используя виджеты. Например, это может быть виджет популярные сообщения, топ комментаторов, реклама google adsense, ваша статистика и другое.  В результате ваш footer примет следующий вид:

Как разбить footer на 3 колонки:

1. Админка –> Шаблон –> изменить html
2. Находим код ]]></b:skin>
3. Вставляем перед кодом ]]></b:skin> следующий код:
   

   /* -----   LOWER SECTION   ----- */
   #lower {
          margin:auto;
          padding: 0px 0px 10px 0px;
          width: 100%;
          background:#333434; } 
   #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:#0084ce;         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;
   }
   .lowerbar li {
         margin: 0px 0px 2px 0px;
         padding: 0px 0px 1px 0px;
         border-bottom: 1px dotted #ccc;

4. Теперь находим код </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>

Вам осталось лишь перейти во вкладку Дизайн, и вы увидите в нижней части блога 3 колонки элементов страницы, в которые вы можете добавить гаджеты:

Настройка оформления footer blogger:
Вы можете легко изменить внешний вид и цвет виджетов. Разными цветами в первом коде я выделила отрезки, которые вы можете изменять.

• background:#333434; основной фон виджетов
• width: 960px;   Ширина отдельного виджета в пикселях.
• background:#fff;   и  width: 32%; это цвет фона и ширине из трех столбцов, где виджеты добавляются.
• color:#0084ce; Цвет названия рубрики
• font: bold 14px Arial, Tahoma, Verdana; Изменить для изменения размера шрифта и семьи.
• border-bottom:3px solid #0084ce; Изменение толщины, стиля и цвета линии, отделяющей заглавие от основного текста виджетов.
• border-bottom: 1px dotted #ccc; изменение размера, стиля и цвета границы, которая находится в самой нижней части виджетов под ссылками.