как стилизовать хлебные крошки в BLOGGER

Не думала, что буду писать пост про "хлебные крошки" для Блоггер, потому что информации в сети про это полным - полно. Советую погуглить, чтобы понять для чего они нужны. Меня недавно спросили, как их можно стилизовать или хотя бы приукрасить немного.

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


Всё же, сначала сделаю небольшое вступление и вставлю свои 5 копеек. "Хлебные крошки" или breadcrumbs - это своеобразный элемент навигации по блогу для пользователей и поисковых систем, который ведёт от главной страницы до страницы, которую в данный момент читает посетитель.

Имеют обычно такой вид : ссылка на главную страницу > ссылка на ярлык > сама страница, на которой вы находитесь. Их устанавливают как правило над названием сообщения. Вот так они примерно выглядят.


Для их установки в блоге, нужно зайти во вкладку Тема. Если пока не совсем уверены в своих действиях, сделайте резервную копию шаблона или потренируйтесь на тестовом блоге. Сейчас, используя клавиши Ctrl+F (читаем здесь), найдите строку

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


Их может быть в шаблоне 2 и обе заменим на такие

<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'>



Теперь сами стили. В шаблоне перед строкой ]]></b:skin> устанавливаем код CSS для Breadcrumbs

.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:skin> ставим такой код

.breadcrumbs{padding:10px 20px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.breadcrumbs a {color: #fff; background: #1bbc9b; padding: 6px; position: relative; margin: 0 20px; font-size: 11px;}
.breadcrumbs a:hover{color:#fff;text-decoration:underline;background:#333}


Можно ещё помудрить и сделать рамочку, например


Код CSS такой

.breadcrumbs {max-width:95%;text-transform:capitalize;padding:3px 15px 5px 10px;margin:10px auto;font: 14px Cambria,Segoe UI,Tahoma,sans-serif;line-height: 1.5em;color:#515151;text-align: left;background:#fff;border:1px solid #ddd;border-bottom-color:#ccc;-moz-box-shadow:0 -1px 0 #fff,0 1px 1px rgba(0,0,0,0.06);-webkit-box-shadow:0 -1px 0 #fff,0 1px 1px rgba(0,0,0,0.06);box-shadow:0 -1px 0 #fff,0 1px 1px rgba(0,0,0,0.06)}
.breadcrumbs span > a {color:#515151}
.breadcrumbs span > a:hover {color:#0631DD;text-decoration:none}
.breadcrumbs > span {color:#515151;text-align:left;line-height:1.5em}


Вариант2. Установка крошек несколько другая и, на мой взгляд, проще первого варианта, а выглядит более профессионально



Находим тег

<div class='blog-posts hfeed'>


Таких тоже может быть 2, но в отличии от варианта 1 работать нужно только с первым.

Вставьте под ним этот код

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<ul id='breadcrumbs-bbeginner'>
<li><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></li>
<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 == &quot;true&quot;'>
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:if>
</b:loop>
<b:else/>
</b:if><li><a class='current'><data:post.title/></a></li>
</b:loop>
</ul>
<b:else/>
</b:if></b:if>


Над ]]></b:skin> вот такие стили для них

#breadcrumbs-bbeginner {
  background: #eee;
  width:620px;
  margin-left:20px;
  border-width: 1px;
  font-family:Verdana, sans-serif;
  margin-top:40px;
  text-transform: uppercase;
  border-style: solid;
  border-color: #f5f5f5 #e5e5e5 #ccc;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0,0,0,.2);
  overflow: hidden;
}
#breadcrumbs-bbeginner  li{
  float: left;
}
#breadcrumbs-bbeginner  a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: #ddd;
  background-image: linear-gradient(to right, #f5f5f5, #ddd);
}
#breadcrumbs-bbeginner  li:first-child a{
  padding-left: 1em;
  border-radius: 5px 0 0 5px;
}
#breadcrumbs-bbeginner  a:hover{
  background: #fff;
}
#breadcrumbs-bbeginner  a::after,
#breadcrumbs-bbeginner  a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid;
  right: -1em;
}
#breadcrumbs-bbeginner a::after{
  z-index: 2;
  border-left-color: #ddd;
}
#breadcrumbs-bbeginner  a::before{
  border-left-color: #ccc;
  right: -1.1em;
  z-index: 1;
}
#breadcrumbs-bbeginner  a:hover::after{
  border-left-color: #fff;
}
#breadcrumbs-bbeginner  .current,
#breadcrumbs-bbeginner  .current:hover{
  font-weight: bold;
  background: none;
}
#breadcrumbs-bbeginner  .current::after,
#breadcrumbs-bbeginner .current::before{
  content: normal;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
#breadcrumbs-bbeginner .current,
#breadcrumbs-bbeginner .current:hover{
  font-weight: normal;
  background: none;
}
#breadcrumbs-bbeginner .current::after,
#breadcrumbs-bbeginner .current::before{
  content: normal;
}


Все сделано! Поздравляю вас! Навигация по Breadcrumbs была успешно добавлена в ваш блог. Вы можете настроить вышеуказанный CSS в соответствии с вашими желаниями. Здесь целое поле для творчества.

Например -

Чтобы изменить ширину панели навигации для сухарей, просто найдите ширину: 620 пикселей; и измените значение на желаемое.

Если вы хотите изменить стиль шрифта, тогда найдите семейство шрифтов: Verdana, sans-serif; и замените его на нужное кодирование шрифта.

Вы также можете изменить цвет фона, изменив фон: #eee; цветовым кодом по вашему выбору.

В обеих кодах замените Home на свой вариант - главная и т.д.

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


👇
Получайте новые сообщения с блога прямо на почту

Введите Ваш email


10 комментариев:

  1. Спасибо Вам за пост! Недавно как раз хотела задать Вам такой вопрос - а тут уже и статья готова )))

    ОтветитьУдалить
    Ответы
    1. Виктория, нужно значит сделать.

      Удалить
  2. А зачем, Виктория, нужны эти хлебные крошки? А без них нельзя жить?

    ОтветитьУдалить
    Ответы
    1. Ирина, последний абзац именно об этом. Жить можно. Но навигация по сайту обязательна должна быть продумана. Кстати обрати внимание на навигацию ВФ

      Удалить
  3. Добрый день, Вика! Давно собиралась установить себе хлебные крошки... Наконец решилась, обновила свой блог и поставила... но, увы... Когда начинаю проверять, показывает очень много ошибок, я удаляла там, где стоял курсор и ошибка горела красным, пока не дошла до конца... а в конце написано, что (там у меня в конце html) файл или что то там (точно не помню) должно находиться внутри... а как это сделать не знаю... На этом всё и застопорилось. В самом начале добавляла всякую ерунду по незнанию, теперь много ошибок в коде. А новый блог заводить не хочется, здесь уже много постов, всё по новой делать не хочется... :))) Вот, целый роман написала :)))

    ОтветитьУдалить
  4. Елена, а вот тут могли бы подробнее, где и что не понятно

    я удаляла там, где стоял курсор и ошибка горела красным, пока не дошла до конца... а в конце написано, что (там у меня в конце html) файл или что то там (точно не помню) должно находиться внутри... а как это сделать не знаю...

    ОтветитьУдалить
  5. Понимаю, Вика, непонятно написала ))). У меня было при сохранении темы вот это - Ошибка при синтаксическом анализе XML (строка 3814, столбец 31): Структуры XML-документов должны начинаться и заканчиваться внутри одного объекта. (Это как?)
    Вот такой была строчка (она была самая последняя в коде) -

    И что интересно, я сейчас заходила кое что проверить, нажала на сохранить тему и мне не выдало никакой ошибки вообще, хотя их было много...
    Теперь вот думаю все-таки еще раз попробовать установить эти крошки. )))
    Спасибо, Вика, за участие! Приглашаю в гости оценить мой новый дизайн. Давно хотела это сделать, в той теме, что мне понравилась, нету всех моих гаджетов, пришлось делать подобие из того, что есть.
    -https://mirosslava55.blogspot.com/-

    ОтветитьУдалить
  6. Прошу прощения! Что то заглючило и выдало абракадбру. Жалко, что нельзя редактировать уже отправленное сообщение )))

    ОтветитьУдалить
  7. Добрый день. А как в последнем варианте изменить размер текста?

    ОтветитьУдалить
  8. Наталья, добавьте после font-family:Verdana, sans-serif; нужный размер, допустим font-size: 11px;

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

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск