Добавляем хлебные крошки в Blogger

Хлебный крошки - что это? И для чего они нужны?

Хлебные крошки или Breadcrumbs - это плагин навигации, помогающий пользователям свободно ориентироваться на сайте. 

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

Как добавить на сайт Blogger хлебные крошки?

Для того, чтобы установить хлебные крошки на сайт, необходимо в шаблоне найти строку:

• Для старых тем: <b:includable id='main' var='top'>
• Для новых тем: <b:includable id='main' var='this'> либо <b:include name='noContentPlaceholder'/>

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

После данной строки, вставьте код: <b:include data='posts' name='breadcrumb'/>

Затем, найдите строку: 

• Для новых тем: <b:includable id='addComments'>

• Для старых тем: <b:includable id='comment-form' var='post'>

Пояснение для старых тем: код должен быть свернут (чтобы свернуть, кликните на треугольник слева строки) и выглядеть так: <b:includable id='comment-form' var='post'>...</b:includable>. 

Ниже данной строки вставьте код:

  

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:view.isSingleItem'>

<b:loop values='data:posts' var='post'>

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

<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>

<svg class='homesvg' viewBox='0 0 24 24'>

<path d='M12,3L20,9V21H15V14H9V21H4V9L12,3Z'/>

</svg>

<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>

<a class='breadhome' expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>

<span itemprop='name'>Главная</span>

</a>

<meta content='1' itemprop='position'/>

</span>

<svg viewBox='0 0 24 24'>

<path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/>

</svg>

<b:loop index='num' values='data:post.labels' var='label'>

<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>

<a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' expr:title='data:label.name' itemprop='item'>

<span itemprop='name'>

<data:label.name/>

</span>

</a>

<meta expr:content='data:num+2' itemprop='position'/>

</span>

<svg viewBox='0 0 24 24'>

<path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/>

</svg>

</b:loop>

<span>

<data:post.title/>

</span>

</div>

</b:if>

</b:loop>

</b:if> </b:includable>

            

После чего, найдите строку: ]]></b:skin>. И выше нее вставьте код:

             

/* Breadcrumbs */

.breadcrumbs{font-size:20px;padding:10px;color:#223c88;position:relative;margin-bottom:15px;margin-right:0px;font-family:'Roboto',sans-serif;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16);background:#fff}

.breadcrumbs a span{color:#223c88;text-decoration:none;font-weight:700;padding:0 2px;font-size:13px}

.breadcrumbs a{color:#223c88;padding:5px 2px;font-size:12px}

.breadcrumbs span{font-weight:Bold;font-size:13px}

.breadcrumbs span a:hover{color:#ff0097}

.breadcrumbs svg{width:20px;height:20px;vertical-align:-5px;margin:0 -3px}

.breadcrumbs svg.homesvg{width:22px;height:22px;margin-right:0}

.breadcrumbs svg path{fill:#c8c8c8}

.breadcrumbs svg.homesvg path{fill:#223c88}

Сохраните изменения.

Если вы все сделали правильно, а у вас в блоге так и не появились хлебные крошки (Breadcrumbs), то проверьте присвоены ли у вас сообщениям ярлыки? Если нет, то прикрепить к статьям метки и все заработает. 

Рекомендуем