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

Совсем забыл об одном редком способе оптимизации страниц (якобы поисковики любят такую штуку, хз) под названием Breadcrumbs (оно же "хлебные крошки", пошаговый путь до тега статьи), пока не прочитал одну статью об оптимизации внутренних страниц.

Демо:

В блоггере это сделать лЯгко, нужно лишь пошагово выполнить ряд действий:

Лезем в html код шаблона и ищем такой блок:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>

    <b:include data='top' name='status-message'/>

    <data:adStart/>

В котором нужно закомментировать эту строку:

b:include data='top' name='status-message'/

После комментария добавить тег "крошек":

<b:include data='posts' name='breadcrumb'/>

Получится должно вот так:

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
  <!-- disable default status message
    <b:include data='top' name='status-message'/>
  default status message disabled -->
    <b:include data='posts' name='breadcrumb'/>
    <data:adStart/>

Теперь перед тегом (он самый верхний в предыдущем коде):

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

Вставляем такую махину:

<b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'> 
  <!-- No breadcrumb on front page -->
  <b:else/> 
    <b:if cond='data:blog.pageType == &quot;item&quot;'> 
       <div class='breadcrumbs'> 
         Browse &#187;  <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> 
         <b:loop values='data:posts' var='post'>
           <b:if cond='data:post.labels'> 
             <b:loop values='data:post.labels' var='label'> 
               <b:if cond='data:label.isLast == &quot;true&quot;'> &#187; 
                 <a expr:href='data:label.url' rel='tag'><data:label.name/></a> 
               </b:if> 
             </b:loop> 
             &#187; <span><data:post.title/></span> 
           </b:if> 
         </b:loop>
       </div> 
    <b:else/> 
      <b:if cond='data:blog.pageType == &quot;archive&quot;'> 
        <div class='breadcrumbs'> 
          Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/> 
        </div> 
      <b:else/> 
        <b:if cond='data:blog.pageType == &quot;index&quot;'> 
          <div class='breadcrumbs'>
          <b:if cond='data:blog.pageName == &quot;&quot;'>
            Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
          <b:else/>
            Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts filed under <data:blog.pageName/> 
          </b:if>
          </div> 
        </b:if> 
      </b:if>
    </b:if>
  </b:if>
</b:includable>

И не забудьте про стили, которые нужно вставить в ту часть шаблона, которая отвечает за css:

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

Сохраняем шаблон, снова открываем код и настраиваем.

С помощью поиска в браузере находим все Browse и Home и исправляем на свой русский вариант.

В стилях:

width: 590px;
  font-size: 11px;
  margin: 5px 10px 20px 10px;
  padding: 0px 0px 3px 0px;

Подкручиваем размер шрифта, отступы, можно задать цвет.

Данная заметко является переводом зарубежной статьи. Оригинал - тут.