четверг, 12 марта 2009 г.

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

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


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


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

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

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

    <data:adStart/>

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

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

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

  8. <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/>

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

  10. <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>

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

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

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

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


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

4 Комментариев :

Den3er комментирует...

Спасибо)

Ev_geniya комментирует...

Мерси, полезно.

Ev_geniya комментирует...

Объясните пожалуйста, все делаю по инструкции, единственное, что изменила, так это размер букв в навигации. Но ссылки не кликабельные. Что не так?

Croaker комментирует...

Привет! Увы — не обнаружил ничего напоминающего строку навигации в твоем блоге. Кстати, он случайно не через «Дизайнер шаблонов» сделан?

Отправить комментарий

Жги!