Три колонки в подвале блога

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

Выполните следующие действия,

1. Заходим в Blogger.com = > Шаблон => Изменить HTML
2. Делаем резервное копирование шаблона
3. Находим в коде строчку

]]></b:skin>

4. Перед закрывающимся добавляем код CSS

/* -----   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;}

5. Находим в шаблоне с помощью клавиш Ctrl+F тег

 </body>

6. Добавляем код

<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>

6.Нажимаем - сохранить шаблон. Готово!

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