В некоторых шаблонах blogger вы уже встречали оформление footer (футер, подвал, нижняя часть блога) в виде колонок. В footer вы можете добавить необходимую для вас или ваших читателей информацию, используя виджеты. Например, это может быть виджет популярные сообщения, топ комментаторов, реклама google adsense, ваша статистика и другое. В результате ваш footer примет следующий вид:
Как разбить footer на 3 колонки:
- Админка –> Шаблон –> изменить html
- Находим код ]]></b:skin>
- Вставляем перед кодом ]]></b:skin> следующий код:
/* ----- 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; - Теперь находим код </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>
Вам осталось лишь перейти во вкладку Дизайн, и вы увидите в нижней части блога 3 колонки элементов страницы, в которые вы можете добавить гаджеты:
Настройка оформления footer blogger:
Вы можете легко изменить внешний вид и цвет виджетов. Разными цветами в первом коде я выделила отрезки, которые вы можете изменять.
- background:#333434; основной фон виджетов
- width: 960px; Ширина отдельного виджета в пикселях.
- background:#fff; и width: 32%; это цвет фона и ширине из трех столбцов, где виджеты добавляются.
- color:#0084ce; Цвет названия рубрики
- font: bold 14px Arial, Tahoma, Verdana; Изменить для изменения размера шрифта и семьи.
- border-bottom:3px solid #0084ce; Изменение толщины, стиля и цвета линии, отделяющей заглавие от основного текста виджетов.
- border-bottom: 1px dotted #ccc; изменение размера, стиля и цвета границы, которая находится в самой нижней части виджетов под ссылками.
У меня все выстроилось в три линии, но не колонки...
Гмм, надо будет попробовать. В блогах на платформе WordPress неоднократно приходилось наблюдать 3 колонки, а вот в Блоггере пока не доводилось... Попробуем, Попробуем...
Ирина, если все сделаноправильно, то все должно получиться. Вы можете сохранить резервную копию блога, упаковать в архив, залить на Яндекс диск или народ и прислать мне ссылку на скачивание через обратную связь. Помогу
Спасибо большое!!!! Отлично все работает, получилось с первого раза 🙂
Будем пробовать, если все получится, то сами увидите на сайте http://ctatya.ru/