Breadcrumbs — хлебные крошки в Blogger

Просмотров: 541

Хлебные_крошкиДобрый вечер! Приветствую вас в моем блоге. Сейчас мы с вами будем устанавливать "хлебные крошки" для Blogger. Для удобства навигации по блогу  люди придумали так называемые "хлебные крошки" Википедия  даёт определение «Хлебные крошки» (англ. Breadcrumbs, по ироничной аналогии с немецкой сказкой «Гензель и Гретель», в которой дети, когда их завели в лес во второй раз, не смогли найти обратную дорогу, так как на этот раз вместо маленьких камешков они оставляли за собой хлебные крошки, впоследствии склеванные лесными птицами) — элемент навигации по сайту, представляющий собой путь по сайту от его «корня» до текущей страницы, на которой находится пользователь. Обычно представляет собой полосу в верхней части страницы:

Breadcrumbs
Хлебные крошки в Blogger

Именно благодаря наличию в блоге навигационной строки, поисковикам легче находить информацию и по прямой ссылке пользователю проще выйти на интересующий его материал. Если создать перелинковку на страницах сайта,то таким образом навигация облегчится и для поисковых систем. Я Вам настоятельно рекомендую поставить на свой блог “Хлебные крошки”. Вы также получите дополнительную перелинковку блога. Подкинуть эти “крошки” Яндекс, Google и т. д. очень просто.

Как установить "хлебные крошки" в Blogger/Blogspot

Заходим а панель управления. Далее Шаблон - Изменить HTML. С помощью сочетания клавиш (Ctrl+F) Вам надо найти  строку в  шаблоне: ]]></b:skin> Прямо над ней вставляем код стиля:

.breadcrumbs {
padding:5px 10px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:1px solid #e6e4e3;
}
.breadcrumbs a {
text-decoration:underline;
}

Теперь найдите в шаблоне такую строчку кода <b:include data='top' name='status-message'/> и меняем её на:

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

Далее находим <b:includable id='main' var='top'> и меняем эту строку на этот код:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<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 == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

Готово. Сохраняем шаблон. Все слова "Home" в коде можете поменять на "Главная" или на другое. Кому как нравиться. Да, чуть не забыл, если вы нашли два кода <b:include data='top' name='status-message'/> замените оба. Всем пока. До новых встреч.

Ваш Сергей


12 комментариев к “Breadcrumbs — хлебные крошки в Blogger”

  1. Здравствуйте, а вы не подскажете как эти хлебные крошки вставить в блок с сообщениями над заголовком статьи, как у вас?

    Ответить
    • Привет! А у вас куда установились? Я уже просто не помню, где они в Blogger появляются.

      Ответить
      • они у меня появились между шапкой блога и блоком с сообщениями, если хотите можете посмотреть на сайте, адрес я указал при заполнении форм.

        Ответить
        • Посмотрел, хлебные крошки там и должны быть. Над сообщениями, всё правильно и хорошо смотрится. 🙂

          Ответить
  2. Ну вот, и я справилась. Никак не удавалось найти все «Home» :).
    Благодарю, Сергей за столько полезную информацию!!!

    Ответить
  3. Может подскажете мне как побороть вот эту напасть
    http://piccy.info/view3/12408328/a51468acc722256454c1cf757cd9103a/orig/

    Там на комбинированном скрине следующее:
    я хочу разместить два слова (две ссылки) в начале и в конце строки и оставить между ними пространство. В редакторе все нормально, но в реале при просмотре второе слово упорно ставится не дальше середины. Как с этим справиться ?

    Ответить
      • Выделила правое слово, применила выравнивание, но оба слова сместились вправо с тем же промежутком.

        Ответить

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