Оптимизация. Breadcrumbs - Навигация Галета за блог

Във връзка с неизбежното развитие на уеб дизайна в сайтовете и блоговете започват да се появяват все повече и повече нови елементи, които значително опростяват взаимодействието на потребителите с уеб ресурса и подобряват неговата вътрешна оптимизация.

Един такъв елемент е Breadcrumbs, който е известен на уеб администраторите и като Навигация Галета или Хлебни трохи.
Как да направите Breadcrumbs, Навигация Галета или Хлебни трохи в блог на Blogger? Нека първо да разберем какво е това.

Какво е Breadcrumbs, Навигация Галета или Хлебни трохи в блог?

Наименованието "хлебни трохи" произлязло по аналогия от приказката на Братя Грим "Хензел и Гретел". В нея децата, които вървели в гората, хвърляли хлебни трохи на земята, за да намерят пътя, по който да се върнат обратно.
Може би се чудите, какво правят приказката на деца и хлебните трохи в такъв сериозен въпрос като оптимизацията на един блог?
Всъщност, аналогията е много точна. Често посетителят на блога, движейки се от страница на страница в един блог, забравя пътя си и не може да се върне в началото му, макар и да е забелязал там нещо важно и интересно.
Това всъщност представлява едно неудобство. Но знаем, че основната ни задача е да създадем най-удобния блог за нашите читатели. Също толкова важно е да се улесни пътят към всяка страница за търсещите роботи. Именно за да се реши този проблем бил измислен методът Хлебни трохи или Навигация Галета. Той показва като верига движенията на посетителите през блога от главната му страница до дадена негова публикация. На страницата с публикации изглежда така:

Виждате над отворената публикация появилата се верига от хипервръзки, започваща от главната страница, минаваща през съответния етикет и стигаща до публикацията, която е отворил читателят на блога:

Главна страница ➔ Название на етикета ➔ Заглавие на публикацията

Хлебните трохи ( или Галетата ) не само създават удобство на нашите читатели, но и значително подобряват вътрешната оптимизация на блога.

Как да го направим?

За да създадем такава верига от Хлебни трохи или Галета в своя блог е необходимо да предприемем следните действия:

➤От админ панела избираме Тема ➔ Редактиране на HTML кода;

➤Създаваме резервно копие на кода на темата. Тъй като ни предстои промяна в нейния код запазваме копието в компютъра си за всеки случай, ако допуснем грешка;

➤Търсим с помощта на клавишите CTRL+F в кода фрагмента ]]></b:skin>;

➤Точно над него вписваме следния код;

.breadcrumbs {
padding:5px 10px;
margin: 0px 0px 15px 0px;
line-height: 1.4em;
border-bottom:1px solid #e6e4e3;
}
.breadcrumbs a {
text-decoration:underline;
}

В Блог за блогове този код е:

.breadcrumbs{background:#F5F5F5;color:#000;overflow:hidden;white-space:nowrap;text-overflow:Roboto Condensed;font-size:14px;padding:20px;font-weight:700;}

.breadcrumbs a{color:#238cb9;margin:0 2px;line-height:normal;}

.breadcrumbs .breadhome a{margin:0 5px 0 0}

.breadcrumbs .breadlabel:last-child{margin:0 0 0 4px}

.breadcrumbs a:hover{color:#1C5973;}

И двата варианта водят до един и същ резултат, но в различен стил.

➤Продължаваме нататък. Търсим по познатия начин ето този фрагмент от кода на темата:

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

➤Точно над него вписваме

<b:include data='posts' name='breadcrumb'/>

Бъдете внимателни, защото в някои теми има два еднакви фрагмента <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'>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<div class='breadcrumbs'><span class='breadhome'><a expr:href='data:blog.homepageUrl' rel='tag'>Начало</a> <i class='fa fa-angle-right'/></span><span class='breadlabel'><data:blog.pageName/></span></div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- breadcrumb for the post page -->

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<div class='ripplelink breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>

<span class='breadhome' typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Начало</a> <i class='fa fa-angle-right'/></span>

<b:loop values='data:post.labels' var='label'>

<span class='breadlabel' typeof='v:Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;amp;max-results=8&quot;' property='v:title' rel='v:url'><data:label.name/></a> <i class='fa fa-angle-right'/></span>

</b:loop>

<span class='breadlabel'><data:post.title/></span>

</div>

<b:else/>

<div class='breadcrumbs'><span class='breadhome'><a expr:href='data:blog.homepageUrl' rel='tag'>Начало</a> <i class='fa fa-angle-right'/></span><span class='breadlabel'>Unlabelled</span> <span class='breadlabel'><data:post.title/></span></div>

</b:if>

</b:loop>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<!-- breadcrumb for the label archive page and search pages.. -->

<div class='breadcrumbs'>

<span class='breadhome'><a expr:href='data:blog.homepageUrl'>Начало</a> <i class='fa fa-angle-right'/></span><span>Archives for <data:blog.pageName/></span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<div class='breadcrumbs'>

<b:if cond='data:blog.pageName == &quot;&quot;'>

<span class='breadhome'><a expr:href='data:blog.homepageUrl'>Начало</a> <i class='fa fa-angle-right'/></span><span class='breadlabel'>All posts </span>

<b:else/>

<span class='breadhome'> <a expr:href='data:blog.homepageUrl'>Начало</a> <i class='fa fa-angle-right'/></span><span class='breadlabel'><data:blog.pageName/></span>

</b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

➤Запазваме направените промени в кода на темата;

И сега, когато отворите която и да е ваша публикация, ще видите над нея ето такава верига от хипервръзки, показваща пътя от главната страница до самата публикация.

Начало --> Оптимизация --> Икони към външните хипервръзки в Blogger

Ако при вас тази верига от хипервръзки не се появява, значи някъде сте сбъркали.

➤Възстановете кода на темата си с направеното преди малко резервно копие и внимателно започнете всичко отначало.

Щом вече имате Breadcrumbs, Хлебни трохи или Навигация Галета във вашия блог, то читателят ви няма да се заблуди и спокойно може да се върне по пътя си назад. И пътят на търсещите роботи е улеснен. Те много харесват Хлебни трохи.

Успех на всички ни в оптимизацията на блога!

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: