Как перемещать виджеты (гаджеты) по шаблону в Blogger

Виджетами и гаджетами (что одно и тоже) в Blogger (Blogspot) называют те части шаблона, с помощью которых расширяется функционал блога. Их даже можно назвать модулями, а Blogger в какой-то мере модульной системой.
Каждый виджет (гаджет) представляет собой контейнер с данными, которые хранятся на стороне движка и вне шаблона блога. Фактически, мы, рядовые пользователи не имеем к ним прямого доступа, но можем изменять их содержимое и редактировать из админки.

Далее я буду называть гаджеты Blogger только виджетами, мне так привычнее.

Гаджеты-виджеты Blogger

Стандартные шаблоны блоггера (и сторонние, разрабатываемые или портированные с Wordpress интузиастами) практически всегда имеют такую или близкую к такой разметку:

Разметка шаблона Blogger

• Красная область, header, шапка сайта содержит обязательный виджет header и любые другие виджеты, которые можно установить после него
• Жёлтая область, правый sidebar, может содержать любые виджеты
• Зелёная область, footer, подвал, может содержать любые виджеты, включая Attribution

Есть ещё один виджет, который бесхозно стоит выше всех - это ужасный и всем надоевший Navbar, блоггеровская панелька, её лучше сразу удалить после создания блога.

Середину блоггеровской разметки в шаблоне занимает область сообщений - самая информативная часть вашего блога.

Конечно виджеты могут быть расположены по-другому. На скриншоте представлена двухколоночная модель разметки шаблона. А в "Дизайнере шаблонов" можно настроить макет блога по собственному вкусу:

Дизайнер шаблонов в Blogger

Технические моменты ↓
Каждый виджет в шаблоне кратко идентифицируется вот так (на примере html/javascript виджета):

<b:widget id='HTML6' locked='false' title='' type='HTML'/>

Где id="HTML6" - это идентификатор виджета, а цифра 6 означает, что это шестой html/javascript виджет по счёту в блогу.
Опция locked='false' говорит о том, что виджет не закреплён и его можно переносить по макету, куда вздумается.

А в развёрнутом, полном виде (если поставить галку "Расширить шаблоны виджета") виджет имеет такую структуру (на примере того же html/javascript виджета):

<b:widget id='HTML6' locked='false' title='' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

С любым подобным виджетом нам, рядовым пользователям, разрешается:

• изменить тег заголовка виджета - h
• удалить ссылку на быстрое редактирование - <b:include name='quickedit'/>
• создать специальное правило отображения виджета на чётко заданных страницах
• перемещать в рамках макета
• удалить

С удалением виджета, думаю, понятно. Перемещение тоже ясно. Админка Blogger допускает визуальное drag'n drop, т.е. перетаскивание виджетов из одной части в другую, но не во всех случаях. Например, виджет заголовка блога, header, закреплён намертво и до него нельзя просто так поставить ни один виджет.

Вчера мне пришло интересное письмо от Юрия:

"У меня блог на Blogspot. Как сделать, чтобы в шапке блога отрисовывались разные картинки при каждом обновлении страницы?"

Это хороший вопрос. Сначала возникла быстрая идея сделать шапку по аналогии с рандомно меняющимся подзаголовком шапки блога (описанием).

Потом я подумал, что будет проще html/javascript виджет отправить на самый верх, т.е. на место виджета header (заголовка блога).

Для этого я создал новый html/javascript виджет, определил в шаблоне по ключевому слову в поиске браузера "HTML", какой из этих виджетов последний.
Далее в редакторе шаблона снял галку "Расширить шаблоны виджета", и вырезал и вставил виджет <b:widget id='HTML6' locked='false' title='' type='HTML'/> прямо перед виджетом заголовка блога <b:widget id='Header1' locked='true' title='Тестовый блог2 (заголовок)' type='Header'/>.
Разработчики Blogger специально придумали такой укороченный вид редактора, чтобы не таскать огромные хвосты кода, а оперировать с только с короткими строками.

Виджет заголовка, кстати, сначала вполне допускает своё удаление (надо лишь в коде виджета изменить locked='true' на locked='false', чтобы разблокировать виджет):

Удаление виджета в Blogger

Но потом всё равно возвращается в шаблон. Если это происходит, и очень приспичило всё-таки удалить, то единственное решение - изменить элемент <div class='region-inner header-inner'> (внутри которого находится виджет) на <div class='region-inner header-inner1'>

После того, как мы html/javascript виджет "перетащили" наверх, изменился визуальный макет шаблона:

Перемещение виджетов в Blogger

Теперь у нас в шапке тот виджет, в который можно вставлять любой javascript.
Например, скрипт случайной выдачи картинок:

<script language="JavaScript">
function random_imglink(){
  var myimages=new Array()
  //specify random images below. You can have as many as you wish
  myimages[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCbX8HCOwssiXX_jjD9bQk9QvDb-UyrWNS-K0hkNSEEyUB2alg0LVQeS00IPT8BJM35TL99KwzdL6wT4u3YLRmfDPg-fLrusARdQMnx0pCZ44bMqRiqBi0X82OlTPtkRKGZoydonZhLzE/s1600/273-16664.jpg"
  myimages[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvh3ybzm_G5yrl7bZFnLi_5fG5vAZfewIB7_emumoTQGHwbuJKTnME13QyVJGUEyxbsRTN0HIqi6xzn9FLgCNtxf-vf29CGuthDVtDpwpWKVYq3iM2MFVujBACYKFHHl0rAYmwnov-s5Y/s1600/1590-39152.jpg"
  myimages[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihyphenhyphenigFoE0v9P9rw7ZtVcZp6qbQkag25DQawT3Wk6cUB7rwQU3cCb3t2lNzSh_g6Le6ROdST_ML9e-jCr4Q0OI37TIp6izPyPgHbfCobPl1Jfr75iwE504M5sKpK8kWMSFfx6hMZzpfASk/s1600/881-2916.jpg"
  myimages[4]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq5J-dB9JK1MeJB5gwkYDGYdrYeO_yBJgZeXtgWgTS7bL_m0TS2_X3PD_P376YDCQPNRsMiACgDJEl2V3hGOpeH6gnIeTXPYAO7xYpSKaE_EeSoDa7OR9bRB77KDY5E2xC12T1CYk7rgE/s1600/698-52147.jpg"

  //specify corresponding links below
  var imagelinks=new Array()
  imagelinks[1]="ссылка"
  imagelinks[2]="ссылка"
  imagelinks[3]="ссылка"
  imagelinks[4]="ссылка"

  var ry=Math.floor(Math.random()*myimages.length)

  if (ry==0)
     ry=1
     document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')
}

  random_imglink()
</script>

Или какой-либо другой скрипт рандомайзер.