» » Хлебные крошки на Blogger

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

Заметила, что на блоге я мало коснулась темы гаджета "Хлебные крошки". Можно сказать совсем о них не писала. 
Для чего они нужны? "Хлебные крошки" - дополнительная навигация на сайте. Пользователь видит в какой части сайта он находится и ему проще найти нужный материал. 
Почему гаджет называется "Хлебные крошки"? Это перевод английского термина - Breadcrumbs. Отсылка к сказке братьев Гримм "Гензель и Гретель". Её знают все — дети отправились в лес и чтобы не потеряться оставляли за собой дорожку из хлебных крошек. 
Что-то похожее мы устанавливаем для пользователя сайта, что бы ему было легко вернуться в нужное место. 
Кроме этого, виджет положительное влияет на SEO, так как виджетом создаётся перелинковка с другими страницами сайта. 
"Хлебные" крошки могут быть разными: 
Линейные — показывается путь от главной, до той, на которой находишься. 
Чаще всего Хлебные крошки состоят из трёх пунктов — Главная, Рубрика и название статьи из данной рубрики. 
Хлебные крошки на Blogger
Бывают виджеты с 4-6 пунктами. 
Система Назад - устанавливается кнопка Назад к каталогу, Назад к главной странице и т.п.  
Линейная + система Назад. Сразу два варианта.
К сожалению, в Блоггере не предусмотрена эта функция. Нужно искать код в интернете и устанавливать в шаблон самостоятельно.

Оформление "Хлебных крошек" 1

Самый простой вид оформления Хлебных крошек, но его можно поменять. Ниже будут все варианты изменений. Сперва код устанавливается для каждого вида оформления одинаково, а стили добавляются разные, в зависимости от выбранного вида гаджета. 
Оформление "Хлебных крошек" 1
Заходим в шаблон, с помощью кнопок Ctrl+F вызываем поиск и вставляем туда строку:
<b:include data='top' name='status-message'/>. 
В шаблоне высветится данный код. Его может быть два. Заменяем их оба на: 
<b: include data= ' top 'name=' status-message’/>
<b: include data= 'posts' name= ' breadcrumb’/>
Так же через строку поиска ищем:
<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: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:skin>.
.breadcrumbs {
font-size: 14px;
background: #eeeeee;
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: linear-gradient(top, #eeeeee 0%,#cccccc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
height: 25px;
line-height: 25px;
color: #454545;
border: solid 1px #cacaca;
width: 100%;
overflow: hidden; 
margin-bottom: 25px; 
padding: 0px
}
Выглядеть гаджет будет так:
Цвета градиента полосы можно менять
Цвета градиента полосы можно менять. Меняем 2 цвета. Выделила красным и синим.
Третий стиль, код добавляем так же перед ]]></b:skin>
.breadcrumbs {
 padding: 4px;
 background-color: rgb(190,136,91);
margin: 0px 0px 15px 0px;
line-height: 1.4em;
border-bottom: 2px solid #e6e4e3;
color: #fff;
} 
.post-labels span {
color: rgb(0, 0, 0);
}
.breadcrumbs a{
color: #fff;
}
крошки
Полосу можно поменять на любой цвет - в коде выделено салатовым.
Окантовку низа полосы так же меняйте на свой вкус, в коде выделено розовым.

Оформление "Хлебных крошек" 2

Другой вариант "Хлебных крошек", так же найден на иностранном сайте.
Заходим в шаблон, ищем строку <div class='blog-posts hfeed'>
Их может быть две, но нам нужна первая. Ниже неё вставляем код:
<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-mbl'>
<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-mbl {
  background: #eee;
  width:620px;
  margin-left:20px;
  border-width: 1px;
  font-family:'Oswald', Arial, Helvetica, 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-mbl  li{
  float: left;
}
#breadcrumbs-mbl  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-mbl  li:first-child a{
  padding-left: 1em;
  border-radius: 5px 0 0 5px;
}
#breadcrumbs-mbl  a:hover{
  background: #fff;
}
#breadcrumbs-mbl  a::after,
#breadcrumbs-mbl  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-mbl a::after{
  z-index: 2;
  border-left-color: #ddd;
}
#breadcrumbs-mbl  a::before{
  border-left-color: #ccc;
  right: -1.1em;
  z-index: 1;
}
#breadcrumbs-mbl  a:hover::after{
  border-left-color: #fff;
}
#breadcrumbs-mbl  .current,
#breadcrumbs-mbl  .current:hover{
  font-weight: bold;
  background: none;
}
#breadcrumbs-mbl  .current::after,
#breadcrumbs-mbl .current::before{
  content: normal;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
#breadcrumbs-mbl .current,
#breadcrumbs-mbl .current:hover{
  font-weight: normal;
  background: none;
}
#breadcrumbs-mbl .current::after,
#breadcrumbs-mbl .current::before{
  content: normal;
}
Сохраняем шаблон. Хлебные крошки выглядят так:
Хлебные крошки выглядят так
В коде можно менять шрифт, цвет фона, текста, размеры.
Красным выделила цвет полосы.
Голубым — фон стрелок.
Вот так может выглядеть гаджет немного измененный:
гаджет немного измененный

Ваши комментарии:

Комментарии со спамом удаляются.