Виджет «Breadcrumb» (хлебные крошки)

Изменяем шаблон блога:

1. Проходим по ссылкам «Макет – Редактировать Html>, отмечаем галочку «Расширить шаблоны виджета».

2. Ищем строчку

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

и прямо НАД ней помещаем код:

<b:includable id='breadcrumbs' var='post'>
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>главная</a> &gt;
<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'>
&gt; <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>
</b:includable>

3. Ищем строчку

<b:if cond='data:post.dateHeader'>

и НАД ней помещаем код:

<b:include data='post' name='breadcrumbs'/>

4. Теперь добавим стили для наших хлебных крошек. Это можно сделать сразу после блока «Variable definitions».

К примеру, перед уже имеющимся классом body, добавим:

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

5. Сохраняем шаблон. В блоге заходим в какой-нибудь пост. Любуемся результатом.

 

Реклама