Навигация для Blogger «Хлебные крошки»

Здравствуйте, дорогие читатели!
Вы уже могли познакомиться с несколькими постами, посвящёнными теме навигации. Это материалы: «Постраничная навигация Blogger«, «Все статьи — новое оглавление для блога» и др.

Правильно настроенная навигация позволяет посетителям легко ориентироваться на страницах блога, переходя от одного материала к другому.

Не менее важна хорошая навигация для более полной индексации страниц поисковыми роботами. Здесь есть необходимость иерархии — когда частное логично вытекает из общего. И наоборот — когда отдельные тематические статьи объединены в одну рубрику, а совокупность таких рубрик составляет единое целое — содержание блога.

Именно для этих целей автор блога NewBloggingTipz и создал виджет навигации для Blogger «Хлебные крошки«.

Так получилось, что у меня не сразу получилось установить этот виджет и я рискнул обратиться к разработчику этого простого и красивого решения — программисту и блогеру из Индии Мукунду. Это очень доброжелательный человек и очень грамотный, профессиональный веб-мастер. Большое ему спасибо!

Посмотрите на скриншот: над названием статьи этот виджет показывает логическую цепочку, улучшая SEO всего блога.

Убедиться в работоспособности этого полезного дополнения, можно над заголовком любой статьи моего блога — всё происходит в автоматическом режиме.

Устанавливаем навигацию для Blogger «Хлебные крошки»
1. Заходим в Панель инструментов — Дизайн — Изменить HTML

2. Сохраняем на жёсткий диск резервную копию шаблона (безопасность!)

3. Используем комбинацию Ctrl + F для поиска строки:

]]></b:skin>

4. Прямо над этой строкой вставляем код:

.breadcrumbs
{
float: left;
width: 500px;
font-size: 12px;
margin: 5px 10px 20px 10px;
padding: 0px 0px 3px 0px;
border-bottom: double #EAEAEA;
}

(В этом коде мы можем изменить такие параметры виджета: ширина, размер шрифта и цвет линий)

5. Сохраняем шаблон

6. Активируем флажок «Расширить шаблоны виджета»

7. Ctrl + F помогает нам найти отрывок:

<b:includable id=’main’ var=’top’>

8. Выделяем такой фрагмент кода:

<b:includable id=’main’ var=’top’>
<!— posts —>
<div class=’blog-posts hfeed’>
<b:include data=’top’ name=’status-message’/>
<data:adStart/>

9. Этот фрагмент мы заменяем кодом, который скачиваем по ссылке

10. Сохраняем шаблон

Через некоторое время вы сможете убедиться, что этот навигационный виджет способствует более долгому сёрфингу читателей по материалам блога и качественной индексации страниц поисковыми «пауками».

Хорошего продвижения и доброй охоты всем нам!

Ваш Retliff