Привет, друзья. Не все шаблоны Блоггер дают возможность настроить внешний вид подвала (футера). А ещё есть и некоторые сторонние шаблоны, где футер вообще не предусмотрен. У меня в предыдущей версии шаблона такое было. А ведь этот элемент макета может содержать много информации и помочь разгрузить сайдбар. Можно добавить счётчики статистики или форму связи. Всё что угодно.
Так что сегодня создадим футер из трёх колонок для размещения в них дополнительных гаджетов и зададим подходящие для вашего дизайна стили.
Вот так выглядит обычный футер в шаблонах Блоггер. Скучно, одиноко и не красиво.

Будем исправлять ситуацию и сделаем его выразительнее и интереснее. Как - то так

Как сделать футер в 3 колонки
Шаг 1. Заходим в админпанель блога - вкладка тема - изменить HTML. Находим закрывающийся тег </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>
Шаг 2. Там же, во вкладке тема нужно найти строку ]]></b:skin> и так же над ней добавляем этот код
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#00868B;
}
#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:#53868B;
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;
}
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#00868B;
}
#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:#53868B;
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;
}
Этим мы задали стили для футера. И давайте сразу смотреть что можно поменять под дизайн вашего блога.
background:#00868B;общий фон футера
жёлтым цветом отмечены границы, фон и ширина поля гаджетов
color:#53868B; цвет заголовков гаджетов и размер шрифта

Вместо background:#00868B; вставила фоновую картинку - background:url(адрес картинки).
Добавила рамку и закругление углов
border:5px solid #DEDEDE;
border-radius: 50px 50px 0px 0px;
Творите, что хотите.
В конечном результате у нас появится поле с тремя дополнительными колонками для гаджетов. Даже если у вас уже есть сам по себе футер в макете и в нём размещена какая - то информация, можно просто переместить виджеты (гаджеты) в новый. Или убрать и установить снова, во вновь созданный.
Каким вы хотите видеть подвал блога, решать вам и только вам. Коды готовые есть, а остальное дело вкуса.
Получайте новые сообщения с блога прямо на почту
Очень красиво! Мне нравится! Но думаю, что футор не буду делать красивым! Пусть будет такой, какой есть!
ОтветитьУдалитьИрина, рада, что понравилось. Но тут не только красота, а дизайн и функциональность.
УдалитьСпасибо за полезную фишку ))
ОтветитьУдалить