Новое в блоге
Loading...
18 дек. 2011 г.

Добавляем 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'>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'/> замените оба.

Может Вам нужен виджет: последние статьи с миниатюрами для каждого ярлыка или Кнопка вверх для Blogger (scroll to top)

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

9 коммент. :

  1. Доброй ночи!
    Подскажите пожалуйста, а как сделать "хлебные крошки", но только ПОД сообщением,  а не сверху.
    Спасибо.

    ОтветитьУдалить
  2. Я под сообщением ни разу такое не видел,поэтому как помочь не могу.Чем Вас не устраивает сверху,как везде на сайтах и блогах?

    ОтветитьУдалить
  3. Всё получилось внизу поста:))) Спасибо за ответ.
    Если есть желание, то расскажу как я сделала.

    ОтветитьУдалить
  4. Можете в комментах рассказать,вдруг другим захочется так же.Можете на почту-контакт.

    ОтветитьУдалить
  5. В моем шаблоне нет двух указанных вами кода
    1. <b:include data='top' name='status-message'/>
    2. <b:includable id='main' var='top'>

    Подскажите, что делать, пожалуйста.

    ОтветитьУдалить
  6. А Вы ставили галочку-Расширить шаблоны виджета?

    ОтветитьУдалить
  7. Привет)

    ты написал :"Зайдите в Дизайн--Изменить HTML"

    может быть так должно быть : Зайдите в Шаблон--Изменить HTML ?)

    ОтветитьУдалить
  8. Здравствуйте)) Интересный момент, название конечного пункта "Цоколь" и значок "»", например: Главная » Каталог » Цоколь, написано черным цветом, в то время как остальной текст белым.
    Как решить эту проблему?))
    Блог: http://raduga-volgograd.blogspot.ru/

    ОтветитьУдалить
  9. Привет всем и автору, кто знает а как потом их добавить в снипет гугла?

    ОтветитьУдалить

 
Footer