Если посмотреть на код шаблона Blogger (это можно сделать на странице «Дизайн» > «Изменить HTML» панели инструментов Blogger), то нетрудно заметить, что он очень похож на код обычной HTML страницы. Но кроме обычных HTML тегов в шаблоне Blogger присутствуют специальные теги. О них сегодня и пойдет речь.
Раздел <body> макета Blogger состоит из секций и виджетов (или гаджетов, что, в принципе, одно и то же). Секции определяют области страницы, такие как, боковая панель, нижний колонтитул и т. д. Виджеты - это отдельные интерфейсные элементы страницы, например, картинка, список и т. д. Список всех доступных виджетов можно увидеть и добавить в шаблон на странице «Дизайн» > «Элементы страниц». Вне секций шаблон Blogger может содержать любой HTML код.
Каждая секция в Вашем шаблоне имеет открывающий и закрывающий теги. Выглядят они примерно так:
<b:section id='header' class='header' maxwidgets="1" showaddelement="no"> </b:section>
Тег <b:section> имеет следующие параметры:
- id - (обязательный) уникальный идентификатор, состоящий только из букв и цифр.
- class - (необязательный) имя класса; общепринятые имена классов в шаблонах - 'navbar', 'header', 'main', 'sidebar' и 'footer'. Если Вы когда-нибудь решите перейти на другой шаблон, эти имена помогут Blogger определить, как правильно перенести содержимое секций в новый шаблон. Однако при желании Вы можете использовать и другие имена.
- maxwidgets - (необязательный) максимальное количество виджетов, разрешенное в данной секции. Если параметр опущен, то количество виджетов не ограничено.
- showaddelement - (необязательный) этот параметр определяет, будет или нет показываться ссылка «Добавить гаджет» для данной секции в режиме визуального редактирования шаблона (на вкладке «Дизайн» > «Элементы страницы» в панели инструментов Blogger). Параметр может иметь значения 'yes' (да, будет показываться ссылка «Добавить гаджет») или 'no' (нет). Значение по умолчанию - 'yes'.
- growth - (необязательный) этот параметр определяет, в каком направлении будут выстраиваться виджеты внутри секции. Параметр может иметь значения 'horizontal' (горизонтальный) или 'vertical' (вертикальный). Значение по умолчанию - 'vertical'.
В секцию можно включать только виджеты; секция не может содержать в себе другие секции и любой другой код. Если Вы все же хотите вставить какой-то дополнительный код между виджетами, Вам придется разбить секцию на две или несколько секций.
В простейшей форме код виджета можно представить в виде одиночного тега, который, в сущности, лишь обозначает место для заполнения и указывает, каким образом данный элемент будет обрабатываться в режиме визуального редактирования шаблона (вкладка «Дизайн» > «Элементы страницы» в панели инструментов Blogger). Реальные данные для любого установленного виджета хранятся в базе данных Blogger, доступ к которым происходит в момент отображения виджета. Вот парочка примеров виджетов (первый виджет- заголовок страницы, второй - список):
<b:widget id="header" type='HeaderView' locked="yes"/> <b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>
Виджет может иметь следующие параметры:
- id - (обязательный) идентификатор виджета. Идентификатор может состоять только из буквенно-цифровых символов. Каждый идентификатор виджета должен быть уникальным в пределах шаблона. ID может быть изменен только посредством удаления данного виджета и создания нового.
- type - (обязательный) определяет тип виджета. Возможные значения типов виджетов перечислены ниже.
- locked - (необязательный) определяет, является ли данный виджет заблокированным. Параметр может иметь значения 'yes' или 'no'; значение по умолчанию - 'no'. Заблокированный виджет нельзя переместить или удалить в режиме визуального редактироваия шаблона (вкладка «Дизайн» > «Элементы страницы» в панели инструментов Blogger).
- title - (необязательный) отображаемый заголовок виджета. Если параметр опущен, будет использовано значение по умолчанию, например 'List1' для списка.
- pageType - (необязательный) тип страницы. Параметр может иметь значения 'all' (все), 'archive' (архивная), 'main' (главная) или 'item' (сообщение); значение по умолчанию - 'all'. Виджет будет отображаться только на тех страницах Вашего блога, тип которых определен данным параметром. Однако в режиме визуального редактирования шаблона отображаются все виджеты, не взирая на их параметры pageType.
Типы виджетов могут быть следующие:
BlogArchive Blog Feed Header HTML SingleImage LinkList List Logo BlogProfile Navbar VideoBar NewsBar
Впрочем, в настоящее время список доступных виджетов весьма широк. Перечень их можно увидеть на вкладке «Дизайн» > «Элементы страницы» панели инструментов Blogger, если щелкнуть по ссылке «Добавить гаджет».
Код любого виджета может быть также записан в расширенной форме с полной детализацией разметки и содержимого данного виджета. Если вы посмотрите, к примеру, шаблон Вашего блога на вкладке «Дизайн» > «Изменить HTML» панели инструментов Blogger, то Вы увидите код виджетов именно в таком виде. Но обычно в такой форме записи нет нужды, поскольку гораздо проще вносить изменения в содержимое виджетов в режиме визуального редактирования на вкладке «Элементы страницы». Если же Вы хотите узнать больше о виджетах, им будет посвящен следующий пост.
Небольшое замечание: В опубликованных страницах блога все теги <b:section> и <b:widget> будут замещены тегами <div> с соответствующими идентификаторами ID. Поэтому Вы можете смело ссылаться, например, на div#header или div#myList в Ваших таблицах стилей, если есть такая необходимость.
Источник: Page Elements Tags for Layouts.
Спасибо! Интересная статья.
ОтветитьУдалитьсобственно передо мной стоит задача, которую я никак не могу решить. в свой блог (http://www.nidaapartamentai.blogspot.com/)между шапкой и всем остальным я хочу вставить виджет, состоящий из 5 картинок расположенных горизонтально, которые, в свою очередь, должны выполнять роль навигационной панели. прочитала у вас все статьи по этой теме, попробовала изменить html-код шаблона, но ничего из этого не получилось. помогите решить проблему!
ОтветитьУдалитьВ том же Minima есть секция crosscol-wrapper между шапкой и контентом. Код ее обычно выглядит так (без виджетов):
ОтветитьУдалить<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
</div>
Если в Вашем шаблоне ее нет, добавьте такой код. Потом уже можно добавлять виджеты на закладке "Элементы страницы".
да, такая секция есть. единственное отличие в наличии параметра showaddelement='no'
ОтветитьУдалитья изменила содержание параметров. они стали выглядеть так:
но в элементах страницы виджеты добавляются не горизонтально, как мне нужно, а вертикально :(
Попробуйте добавить для секции параметр growth со значением horizontal, вот так:
ОтветитьУдалить<div id='crosscol-wrapper' style='text-align:center' growth='horizontal'>
<b:section class='crosscol' id='crosscol'/>
</div>
картинки все равно вертикально выстраиваются.
ОтветитьУдалитьicq - 129860486
Параметр growth определяет, в каком направлении будут выстраиваться виджеты внутри секции, горизонтальном или вертикальном. Если картинки выстраиваются строго вертикально в пределах виджета, то дело в нем, в виджете. То есть виджет вертикально-ориентированный.
ОтветитьУдалитьспасибо за ответ.
ОтветитьУдалитьно тут не совсем понятно. "параметр growth определяет, в каком направлении будут выстраиваться виджеты внутри секции". в моем случае виджет - картинка. по вашим словам получается, что все дело в картинке. то есть картинки у меня вертикально ориентирована. ???????
возможно ли с вами пообщаться иным способом? не хочется сводить в комментариях все к одной теме.
icq - 129860486
leoneeds@gmail.com
Я хотел сказать, что, возможно, все картинки у Вас в одном виджете, и он их выстраивает вертикально.
ОтветитьУдалитьхорошо написано, подскажите, как можно увеличить(растянуть) основную часть блога на весь экран, чтобы слева и справа не было темных полос?
ОтветитьУдалитьадрес http://hour-for-bytime.blogspot.com/
Привет, впервые тут и на первый взгляд очень интересно. Появился вопрос, возможно он уже рассматривался, в этом случае прошу ткнуть меня :) буду только рад.
ОтветитьУдалитьТак вот, вопрос следующий:
- в моем блоге появилась потребность разнести информацию на страницы. Добавил виджет "Список страниц", а вот как на второй и последующих страницах размещать необходимую мне информацию и скажем добавить те или иные виджеты именно на эти страницы - вопрос открытый!
Буду очень благодарен за совет бывалых!!
Вопрос. Вверху "Название сайта" и "Описание сайта" нужно поместить в одну таблицу, чтобы справа по центру написать адрес сайта, чтобы было красиво. С таблицей проблем нет, как найти "Название сайта" и "Описание сайта"?
ОтветитьУдалитьАдрес http://oftheday.msk.ru
Очень полезная статья. Огромное спасибо!
ОтветитьУдалитьНужный пост! Спасибо! Подскажите где можно найти полный код стандартного шаблона, включая настройки тела сообщения, комментарии и прочее?
ОтветитьУдалитьподскажите пожалуйста, почему при переходе в панель инструментов BLOGGER выходит белый лист? Связанно ли это как-то с поисковиком гугл-хром? Установила его, потом пришлось удалить...
ОтветитьУдалить