Виджеты в футере для новых тем в блоге на Blogger

В простых темах в 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 означает количество колонок. Его необходимо заменить на свое. Выделенные зеленым цвета вы также можете заменить на свои.

Этот код имеет адаптацию под мобильные устройства. При просмотре блога с компьютера вы увидите колонки. На мобильных устройствах виджеты будут располагаться один под другим.

Теперь необходимо сохранить шаблон, перейти в «Дизайн» и убедиться, что виджеты в футере появились.