blogger template: Виджет для улучшения навигации в блоге

Перевод статьи Hecto Hoctro's Place: Adding a Breadcrumb Trail to your Blogger Post

Привет!
Вы когда-либо испытывали трудности при навигации по блогу, теряясь в страницах и забывая что Вы действительно ищете? Я терялся так много раз. Данный виджет для блоггера покажет: "Какую новость вы читаете и где в пределах иерархии страниц вы находитесь," читатель нуждается в своего рода "понимании того, где данная страница - относительно остальной части сайта."

Этот виджет вверху поста обеспечивает хорошее решение этой проблемы. В нем, Вы можете всегда нажать на ярлык/категорию, или кликнуть на ссылку Home, чтобы возвратиться к первой полосе. Что еще более важно пользователь знает, где он в данных момент находится, что другие навигационные виджеты, не в состоянии сделать.

Вот скриншот этого виджета.

нажмите что бы увеличить

Ниже - два простых шага, чтобы установить виджет на ваш blog.

Шаг1:
Макет->Редактировать HTML-> поставьте галочку около Расширить шаблоны виджета
Далее ищите виджет Blog1
<b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog">
затем определите местонахождение главного includable
Поместите код прямо перед выделенным текстом (выделенную строку оставте) :

нажмите что бы увеличить

<b:includable id='breadcrumbs' var='post'>

<b:if cond='data:blog.pageType == "item"'>


<b:if cond='data:post.labels'>
You are here:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> >
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
> <data:post.title/>
</b:if>
</b:if>


</b:if>

</b:includable>

Затем добавьте этот код:
<b:include data='post' name='breadcrumbs'/>

прямо перед <b:if cond='data:post.dateHeader'>

нажмите что бы увеличить

Шаг 2: Добавьте CSS код

Добавьте этот код в конце вашего CSS (см. картину),

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}