Breadcrumbs - хлебные крошки

Элемент интерфейса Breadcrumbs или Breadcrumb Trail – «хлебные крошки» еще часто называют «навигационной строкой», «уровнями иерархии» или «цепочкой ссылок». Этот элемент навигации позволяет посетителю легче ориентироваться на сайте. Особенно на больших сайтах со сложной «ветвистой» структурой. И хотя блоги на платформе Blogger, как и на любой другой, не имеют особо сложной структуры, никто не запрещает тебе использовать breadcrumbs. С другой стороны, меню для блога ты уже, поди, создал? ;)

Само название «хлебные крошки» взято то ли из сказки «Гензель и Гретель», то ли из «Мальчик-с-пальчик». По мне, так эти сказки неотличимы друг от друга как два конька Евгения Плющенко. Если забыл, суть там была в том, что родители / мачеха / судебные приставы отвели детей в лес дабы там «невзначай потерять». И разом избавиться от лишних ртов / свидетелей / квартиросъемщиков. А дети, не будь полными бездарями, чтобы не заблудиться, всю дорогу украдкой раскидывали хлебные крошки. В сказке, конечно, им это нихрена не помогло, потому что крошки собрала Красная Шапочка дабы напарить их подслеповатой бабушке под видом пирожков, стресканых с волком под портвешок...

1. Перво-наперво сделай резервную копию своего шаблона Blogger
2. Там же, на странице Макет - Изменить HTML отметь «Расширить шаблоны виджета»
3. Найди includable – включение для виджета Blog



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

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

    <data:adStart/>



4. Отключи столь любимое всеми статусное сообщение «Показаны сообщения с ярлыком...» – просто закомментируй строку <b:include data='top' name='status-message'/>



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



5. Добавь директиву: использовать включение 'breadcrumb'



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



6. Непосредственно перед этим 'main' includable вставь код 'breadcrumb' includable:



<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 == "item"'> 
       <div class='breadcrumbs'> 
         <a expr:href='data:blog.homepageUrl' rel='tag'>Главная</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 == "true"'> &#187;
                 <a expr:href='data:label.url' rel='tag'><data:label.name/></a> 
               </b:if> 
             </b:loop> 
           </b:if>
           &#187; <span><data:post.title/></span> 
         </b:loop>
       </div> 
    <b:else/> 
      <b:if cond='data:blog.pageType == "archive"'> 
        <div class='breadcrumbs'> 
          <a expr:href='data:blog.homepageUrl'>Главная</a> &#187; Архивы за <data:blog.pageName/> 
        </div> 
      <b:else/> 
        <b:if cond='data:blog.pageType == "index"'> 
          <div class='breadcrumbs'>
          <b:if cond='data:blog.pageName == "search"'>
            <a expr:href='data:blog.homepageUrl'>Главная</a> &#187; Все сообщения
          <b:else/>
            <a expr:href='data:blog.homepageUrl'>Главная</a> &#187; тег : <data:blog.pageName/> 
          </b:if>
          </div> 
        </b:if> 
      </b:if>
    </b:if>
  </b:if>
</b:includable>



7. Добавь стили CSS для “breadcrumbs”



.breadcrumbs {
  float: left;
  width: 590px;
  font-size: 11px;
  margin: 0px 10px 25px 0px;
  padding: 0px 0px 3px 0px;
}



8. Сохрани шаблон

На главной странице блога Breadcrumbs отображаться не будут, поскольку это и есть «Дом». А на вложенных страницах – очень даже :).

Описание этого способа я нашел здесь: Breadcrumbs for Blogger