как стилизовать хлебные крошки в 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


4 комментария:

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

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

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

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

      Удалить

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

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