воскресенье, 12 декабря 2010 г.

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

Идём рыться в шаблон,ставим галочку на "расширить шаблоны виджета",ищем этот или похожий код:
<b:section class='footer' id='footer'/>
Меняем на эти:
<b:section class='footer' id='footer2'/>
<b:section class='footer' id='footer3'/>
<b:section class='footer' id='footer4'/>


В 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;
}
Сохраняем шаблон.

Или другой способ,который у меня на всех других моих блогах применён:


Ищем примерно такую строчку : <b:section class='footer' id='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;
}


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

Вроде бы отсюда один код ,а второй не помню где взял.

3 комментария:

  1. align='center' color='#5d5d54' width='90%'/>
    этот код не нужен он полосу делает

    ОтветитьУдалить
  2. Я в курсе,этот код от автора,поэтому менять и убирать ничего не стал.

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