«

»

Дек 03 2012

Распечатать Запись

“Хлебные крошки” для Blogspot/Blogger

Как-то я уже писал про хлебные крошки для WordPress, а теперь дошли руки сделать их и на blogspot. Из первой страницы гугла выудил этот вариант и этот. В чистом виде меня не устраивал ни один из них. В первом устанавливается стандартная ссылка на метку, а в моем шаблоне Blogspot применена нумерованная страничная разбивка любых списков постов, вследствие чего ссылка на метку становится более сложной. А во втором варианте нет микроразметки, поэтому его ценность меньше, чем у первого.

Хлебные крошки для Blogspot/Blogger:
Базовый вариант с микроразметкой

Пришлось включить мозг и родить вот такой код:

Особенности данного варианта описания “Хлебных крошек” для Blogspot:

  1. Включает в себя микроразметку.
  2. Немного видоизменяет URL для меток, у меня на сайте все списки постов разбиты на страницы (быть может позже напишу пост о том, как это сделано) и ссылка на первую страницу постов по метке получается из обычной ссылки добавлением ?&max-results=5 . В коде выше, если у вас не используется разбивка по страница Вам необходимо удалить этот кусок кода: + "?&max-results=5" .
  3. Перечисляются все метки/ярлыки поста через запятую.
  4. В качестве связующего звена используется стрелочка (см. на скриншоте ниже).

Сие творение вставляется (как везде и написано) перед  <b:includable id='main' var='top'>.

[notice]Впоследствии этот код может немного переместиться в коде шаблона без вашего ведома :-) Это сам Blogspot шалит и перемещает наше описание “Хлебных крошек”, но в плане функциональности это никак не влияет.[/notice]

После этого можно найти удобное местечко для “Хлебных крошек” в нашем шаблоне блога на Blogspot. Делается это размещением кода <b:include data='posts' name='breadcrumb'/>  в нужном месте шаблона. В большинстве случаев советуют поместить его перед   <b:include data='top' name='status-message'/> , хотя я бы уточнил местоположение – после <div class='blog-posts hfeed'> . И того и другого кода в шаблоне, как правило, две штуки: для обычной версии и для мобильных устройств.

У себя я так и разместил, добавив немного CSS стилей:

И вот, что получилось в итоге:

Хлебные крошки Blogspot/Blogger

Но еще раз отмечу, что вы можете посмотреть и другие варианты размещения “Хлебных крошек” в вашем шаблоне на Blogspot. Как альтернатива – поместить их после поста, но тогда имеет смысл убрать стандартную навигацию к предыдущему и следующему посту. Пробуйте, смотрите, но не забывайте резервировать рабочий вариант шаблона 😉

Усложнение кода хлебных крошек:
Смена URL/имени меток

Более сложный код родился даже раньше вышеописанного, но у себя я оставил код попроще, так как смена URL у меня однотипная, а название ярлыков менять не потребовалось. Однако, кому-то может понадобиться и потому опишу как это можно сделать. Курим вот такой фрагмент кода:

Вкурили? Хорошо.

Не вкурилим? Немного поясню :-)  В данном примере меняются URL для меток: “Кухня”, “Квартира”, “Санузел”, “Лоджия Балкон”, “Комната”. А для последнего еще и меняется его название в хлебных крошках на “Комнатушка”. Для остальных меток URL и названия остаются стандартными. Сделано все это вложенными If, так как конструкции типа Switch/Case для шаблона Blogspot не существует (или я не нашел её описания).

[notice]Кроме того, после написания и тестирования работоспособности кода под ваши называния ярлыков/меток весь код надо будет вытянуть в одну строчку, так как перевод строки в шаблоне становится пробелом на самом сайте![/notice]

А Вы уже добавили в свой блог на Blogspot/Blogger Хлебные крошки? Каким CSS вы их украсили? Как прореагировали поисковики?

А может Вам надо подсказать как модифицировать код хлебных крошек под ваш шаблон?

Спрашивайте в комментариях!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *