30 апреля 2013 г.

Как добавить Breadcrumbs "хлебные крошки" в Blogger

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

Навигационная цепочка (Навигационное меню, «Хлебные крошки») — элемент навигации по веб-сайту, представляющий собой путь по сайту от его «корня» до текущей страницы, на которой находится пользователь.

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

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

Как добавить "хлебные крошки" в блог на 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'>Главная</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'>Главная</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'>Главная</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Главная</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'>

Примечание: если Вы нашли два кода <b:include data='top' name='status-message'/> замените оба. На этом позвольте с вами попрощаться. До новых встреч.



Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

2 коммент. :

  1. Здравствуйте!
    Отличный пост. Все получилось.
    Я бы хотел уточнить, возможно ли сделать так, чтобы breadcrumbs были показаны и на статических страницах, а не только в постах/рубриках?
    Спасибо.

    ОтветитьУдалить
    Ответы
    1. Привет,Евгений. Честно скажу,даже и не знаю.Мне кажется хлебные крошки на статических страницах не нужны(моё мнение. 8-)

      Удалить

 
Яндекс.Метрика