Как показать ярлыки в новой теме Blogger

Эта статья стартует цикл тем, касающихся изменений новых тем Blogger (2017). Я уже опробовала новую тему Emporio в одном из моих блогов. Осталась довольна, но как всегда любую тему необходимо подгонять под себя и дополнительно оптимизировать так, чтобы она нравилась и посетителям, и поисковым системам.
Одно из неудобств – это закрытые списки ярлыков в блоге, что неизбежно снижает поведенческие факторы. Ярлыки можно же использовать для навигации в вашем блоге.
Выглядят Ярлыки так в обычном (закрытом состоянии):

После клика по области ярлыков, они раскрываются, но нам не виден полный список. Мы видим лишь часть и ссылку “Показать больше”. Читателю приходится кликать снова. Это слишком сложные действия, которые скорее приведут к отказам.


Согласитесь, что не каждый будет нажимать на какой-либо элемент дизайна, чтобы посмотреть, что там внутри. Не каждый даже догадается, что под спойлером скрыто что-то полезное. Поэтому мы изменим список на раскрытый, а читатель вашего блога сможет его закрыть при желании.

Итак, как показать ярлыки на Blogspot

Для начала нам нужно добавить гаджет “Ярлыки” в качестве элемента дизайна нашего блога:

• Перейдите во вкладку “Дизайн” Blogger,
• добавьте гаджет “ярлыки”. Выберите оформление ярлыков – настройте их в виде списка или облака, выберите те, которые следует показывать в вашем блоге или покажите все.
• При желании, задайте свой заголовок для гаджета “Ярлыки”.
• Сохраните изменения.

Переходим к изменениям в шаблоне:

• Перейдите во вкладку “Тема”,
• Сделайте бекап темы,
• Нажмите на кнопку “Изменить HTML”,
• В верхней части окна кода нажмите на "кнопку “Список виджетов” –> Label1:
  
• Найдите отрезок кода:
  

  <b:widget id='Label1' locked='false' title='Ярлыки' type='Label' visible='true'>

• В  коде гаджета “Ярлыки” найдите отрезок кода со значениями "Main" или "collapsible extendable”:
  

  <b:includable id='main' var='this'>
  <details class='collapsible extendable'>

  Нажмите на них для раскрытия кода, как показано ниже:
  

• В раскрывшемся коде найдите <b:attr cond='data:view.isLabelSearch' name='open' value='open'/>
• Удалите из этой строчки код: cond='data:view.isLabelSearch':
  
• Сохраните изменения.

После редактирования ваши первые ярлыки будут показаны в раскрытом состоянии. Чтобы раскрыть полный список, нужно будет кликнуть по ссылке “Показать больше”: