Внести изменения в стандартный шаблон Blogger и настроить его на свой вкус, в принципе, доступно любому пользователю. Но прежде чем начать это делать, необходимо разобраться в основах устройства стандартных шаблонов Blogger. Для этого Вам потребуются хотя бы элементарные знания HTML и CSS. Если у Вас пробелы в этой области знаний, могу Вам порекомендовать посетить сайт htmlbook.ru - написано толково и доступно.
На сегодняшний день Blogger предлагает пользователям 38 встроенных шаблонов. Все шаблоны построены с помощью блочной верстки, то есть на элементах div. Если Вы посмотрите код любого из встроенных шаблонов (да еще включив при этом флажок «Расширить шаблоны виджета»), то сначала Вы можете почувствовать себя плохо от обилия div-блоков и описания стилей CSS. Но не спешите опускать руки. Основных элементов, определяющих структуру шаблона, не так уж много. Расположение их в большинстве шаблонов (не во всех) примерно одинаково. Схематически структуру блоков можно представить следующим образом.
Outer-wrapper, header-wrapper, content-wrapper, main-wrapper, sidebar-wrapper и footer-wrapper - это идентификаторы id элементов div. Блоки, помеченные на схеме голубым цветом, содержат в себе секции <b:section>. А секции в шаблонах Blogger, как известно, являются контейнерами виджетов (гаджетов).
Теперь давайте заглянем в html-код шаблона и посмотрим, как все это выглядит в коде. Флажок "Расширить шаблоны виджета" должен быть выключен. Сначала посмотрим описание тела body шаблона (на примере встроенного шаблона Minima):
<body> <div id='outer-wrapper'><div id='wrap2'> <!-- skip links for text browsers --> <span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> | <a href='#sidebar'>skip to sidebar</a> </span> <div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Minima (заголовок)' type='Header'/> </b:section> </div> <div id='content-wrapper'> <div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol'/> </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> <div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes' /> </div> <!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'> </div> </div> <!-- end content-wrapper --> <div id='footer-wrapper'> <b:section class='footer' id='footer'/> </div> </div></div> <!-- end outer-wrapper --> </body>
А теперь выше по тексту кода посмотрим описания стилей соответствующих элементов div. Они могут быть «размазаны» по коду, но если собрать все воедино, то мы увидели бы такую картинку:
#header-wrapper {
width: 660px;
margin: 0 auto 10px;
border: 1px solid $bordercolor;
}
#outer-wrapper {
width: 660px;
margin: 0 auto;
padding: 10px;
text-align: $startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
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: 220px;
float: $endSide;
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 */
}
#footer {
width: 660px;
clear: both;
margin: 0 auto;
padding-top: 15px;
line-height: 1.6em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
}
Вот эти блоки во многом определяют внешний вид шаблона. Для того чтобы видоизменить его (расширить, добавить колонку), нам нужно будет поработать именно с этими элементами. Этим и займемся в следующий раз.
P. S. В «Дневнике» объявлена кампания по обмену ссылками, в которой участвует также «Blogger без проблем». А первая (в рамках кампании) ссылка достается «Каптерке спертого воздуха». И «Правовой комитет» Вам в помощь!
Автор:
Подобные мануалы в разы облегчают редактирование шаблонов. Наглядность тем более упрощает работу в Блоггере))
ОтветитьУдалить