Часть 2. Как добавить колонку в «резиновый» шаблон
В арсенале встроенных шаблонов у Blogger есть несколько «резиновых» шаблонов. Сегодня мы рассмотрим, как можно добавить третью колонку в «резиновый» шаблон на примере шаблона Minima Stretch. Вообще говоря, «резиновый» макет мало чем отличается от фиксированного макета. Разница лишь в том, что в фиксированном макете размеры блоков указываются в абсолютных единицах, а в резиновом - в относительных единицах (в процентах). Поэтому принципы внесения изменений в шаблон те же самые, а работы здесь даже меньше, чем с фиксированным шаблоном.
Найдите в коде шаблона описание стиля элемента main-wrapper (контейнер для сообщений блога) и установите значение его атрибута width (ширина) 52%:
#main-wrapper {
margin-$startSide: 2%;
width: 52%;
float: $startSide;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Для элемента sidebar-wrapper (контейнер боковой колонки) установите значение атрибута width 20%. Рядом добавьте описание стиля третьей колонки sidebar2-wrapper. Это будет выглядеть вот так:
#sidebar-wrapper {
margin-$endSide: 2%;
width: 20%;
float: $endSide;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar2-wrapper {
margin-$startSide: 2%;
width: 20%;
float: $startSide;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Теперь осталось добавить код дополнительной колонки с секцией в тело шаблона. Когда я говорю «тело шаблона», я имею в виду код, заключенный в тегах <body></body>. Итак, найдите в теле шаблона код блока main-wrapper с вложенной в него секцией и единственным виджетом «Сообщения блога». При этом будет лучше, если флажок «Расширить шаблоны виджета» в панели администратора останется выключенным - ориентироваться в коде будет значительно проще.
Если Вы хотите, чтобы колонки в шаблоне расположились по схеме «боковая колонка - сообщения блога - боковая колонка», тогда дополнительную колонку нужно добавить перед main-wrapper:
<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes' />
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>
</b:section>
</div>
Если же Вам больше по вкусу схема «сообщения блога - боковая колонка - боковая колонка», тогда дополнительную колонку нужно добавить, соответственно, после main-wrapper:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'/>
</b:section>
</div>
<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes' />
</div>
Вот, собственно, и все. Трехколоночный шаблон Minima Stretch готов.
Я надеюсь, что после эти двух уроков Вам не составит труда сделать подобные изменения в любом из встроенных шаблонов Blogger. А для тех, кто предпочитает использовать готовые шаблоны, в следующих постах будут опубликованы готовые к использованию трехколоночные варианты шаблонов Minima, Minima Stretch, Denim и Denim Stretch.
P. S. Здесь могла бы быть ссылка на Ваш сайт.
Автор:
Вопрос не в тему статьи. Как вы добавили "Одну кнопку закладок" в конец каждой статьи, у меня нестандартный шаблон - кнопка не появляется. Не смотрия на то, что вставлял код по инструкции - нулевой результат.
ОтветитьУдалитьМожет инструкция была неправильная? Давайте сделаем так: ответ на этот вопрос я дам в одном из следующих постов.
ОтветитьУдалить