В простых темах в Blogger есть возможность добавить виджеты в футер. В новых темах место для виджетов под записями почему-то не предсмотрено. Что вообще размещают в подвале сайта? Контакты, адрес, обратную связь, кнопку подписаться, ссылки на самые важные страницы и записи, логотип с ссылкой на главную страницу, ссылки на RSS и соцсети. Такую мелкую неприятность, как отсутствие места для виджетов в футере можно устранить своими руками, добавив в HTML-код темы небольшой фрагмент.

Чтобы добавить виджеты в подвал блога на Блогспот, нужно открыть HTML код темы, для чего перейти в Тема » Изменить HTML и найти следующий фрагмент кода:
<b:section class='footer' id='footer' name='Footer' showaddelement='false' tag='footer'>
Перед этим фрагментом добавляем следующий код:
<!— Виджеты в футере —>
<div class='bottom'>
<div class='bottom-widget'>
<b:section class='footer1' id='bottom1' name='Footer1' showaddelement='true' tag='footer'/>
</div>
<div class='bottom-widget'>
<b:section class='footer2' id='bottom2' name='Footer2' showaddelement='true' tag='footer'/>
</div>
<div class='bottom-widget'>
<b:section class='footer3' id='bottom3' name='Footer3' showaddelement='true' tag='footer'/>
</div>
</div>
<!— Виджеты в футере —>
Этот вариант располагает виджеты в три колонки. Если вам нужно разместить виджеты в подвале в две колонки, добавьте в HTML-код блога такой код. Этот код рекомендуется для темы Contempo, в которой, в силу особенности расположения сайдбара, футер находится строго под сообщениями.
<!-- Виджеты в футере -->
<div class='bottom'>
<div class='bottom-widget'>
<b:section class='footer1' id='bottom1' name='Footer1' showaddelement='true' tag='footer'/>
</div>
<div class='bottom-widget'>
<b:section class='footer2' id='bottom2' name='Footer2' showaddelement='true' tag='footer'/>
</div>
</div>
<!-- Виджеты в футере -->
Четыре колонки? Не вопрос. В этом случае добавьте следующий код.
<!-- Виджеты в футере -->
<div class='bottom'>
<div class='bottom-widget'>
<b:section class='footer1' id='bottom1' name='Footer1' showaddelement='true' tag='footer'/>
</div>
<div class='bottom-widget'>
<b:section class='footer2' id='bottom2' name='Footer2' showaddelement='true' tag='footer'/>
</div>
<div class='bottom-widget'>
<b:section class='footer3' id='bottom3' name='Footer3' showaddelement='true' tag='footer'/>
</div>
<div class='bottom-widget'>
<b:section class='footer4' id='bottom4' name='Footer4' showaddelement='true' tag='footer'/>
</div>
</div>
<!-- Виджеты в футере -->
Теперь необходимо найти в коде фрагмент ]]></b:skin> и добавляем над ней следующий код стиля.
/* Виджеты в футере */
.bottom {
display: block;
margin: 10px 0;
padding: 0 0 10px 0;
border-bottom: 1px solid #c5c5c5;
}
.bottom-widget {
display: inline-block;
padding: 0 10px;
border: 0;
width: calc(100% / 3 - 20px);
vertical-align: top;
font-size: 12px;
}
.bottom-widget h3 {
text-align: center;
color: #000;
}
.bottom-widget li {
line-height: 24px;
padding-left: 0;
margin-left: 0;
border-bottom: 1px dashed #ddd;
}
@media screen and (max-width:$(content.width)) {
.bottom-widget {
width: 100%!important;
display: block!important;
}
}
/* Конец Виджеты в футере */
Выделенное красным число 3 означает количество колонок. Его необходимо заменить на свое. Выделенные зеленым цвета вы также можете заменить на свои.
Этот код имеет адаптацию под мобильные устройства. При просмотре блога с компьютера вы увидите колонки. На мобильных устройствах виджеты будут располагаться один под другим.
Теперь необходимо сохранить шаблон, перейти в «Дизайн» и убедиться, что виджеты в футере появились.

Добавляем нужные виджеты и любуемся полученным результатом.
