Как вставить программный код на Blogger?

Хотел оптимизировать блог в google, но вставить JS код в шаблон Blogger не так то просто, решил погуглить данный вопрос и наткнулся на оригинальное решение, немного изменив его я получил следующий результат.

Нужно добавить теги в css шаблона, для того, что бы код красиво смотрелся на странице:

pre {
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}

И всего лишь пропустить весь вставляемый JS/HTML... через волшебную формочку postable:
После чего можно получившийся код вставлять себе в статью, обрамив его тегами <pre>

Элементы страниц в Blogger

Как изменить или добавить новый элемент в layout Bloggera?

Все совсем просто!
Итак начнем.

Элемент body в макете шаблона Bloggera состоит главным образом из секций и виджетов.

Секции обрамляют области вашей страницы, такие как боковая панель, колонтитул, футер и т.д.

Виджеты же, в свою очередь, являются индивидуальными элементами страницы, например картинка в верхнем правом углу или еще что-то.

Каждая секция имеет свой открывающий и закрывающий тег, что-то вроде этого:

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
</b:section>

Тег секции может иметь следующие атрибуты:

• ID - (обязателен) уникальный идентификатор;
• class - (опционален) navbar, header, main, sidebar, footer, ajax, polova... Если вы смените шаблон, имя класса поможет Blogger определить, что делать с секцией;
• maxwidgets - (опционально) максимальное количество виджетов в данном разделе;
• showaddelement - (опционально) может быть "да" или "нет" по умолчанию "да". Этот параметр определяет будет ли на вкладке "Элементы страницы" показана ссылка "Add a Page Element" для данной секции;
• growth - (опционально) аттрибут может иметь значение "горизонтально" или "вертикально" по умолчанию "вертикально". Он определяет разположение виджетов в секции;

Секция может содержать только виджеты, но не другие разделы. Если необходимо вставить кусок кода между виджетами, то тогда надо поделить секцию на несколько секций и добавить в каждую секцию по виджету.

Некоторые примеры виджетов (по одному для заголовка страницы и один для списка):

<b:widget id="header" type='HeaderView' locked="yes"/>
<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>

Виджет может иметь следующие атрибуты:

• ID - (обязателен) уникальный идентификатор. Идентификатор виджета не может быть изменен без удаления самого виджета;
• type - (обязателен) тип виджета;
• locked - (опционально) "да" или "нет" по умолчанию "нет". Заблокированый виджет, не может быть перемещен или удален на вкладке "Элементы страницы";
• title - (опционально) отображает название виджета;
• pageType - (опционально) может быть 'all,' 'archive,' 'main,' или 'item,' по умолчанию "all". Данный виджет будет отображаться только на страницах согласно типу. Все виджеты отображаются на вкладке "Элементы страницы", независимо от их pageType;

Типы виджетов:

• BlogArchive
• Blog
• Feed
• Header
• HTML
• SingleImage
• LinkList
• List
• Logo
• BlogProfile
• Navbar
• VideoBar
• NewsBar

Примечание: В блоге, все <b:section></b:section> и <b:widget></b:widget> метки будут заменены на <div> теги, которые будут иметь указанный ID. Таким образом, вы можете обратиться к ним, например, div#header или div#myList в CSS, если хотите.

Как видите все довольно просто, главное немного поднапрячься.