Безплатен блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

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

Оптимизация. 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, Хлебни трохи или Навигация Галета във вашия блог, то читателят ви няма да се заблуди и спокойно може да се върне по пътя си назад. И пътят на търсещите роботи е улеснен. Те много харесват Хлебни трохи.



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

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

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

    BGtop


    9 коментара:

    1. Полезен урок. Нагласих го горе-долу за моя блог. Обаче стрелкичките от Вашия код не ми се появиха. Утре ще погледна дали мога да ги добавя или да сложа друг символ.

      +1 от мен в BGtop!

      ПП: Погледнете кода ползван в сайта Ви. Добавили сте без да искате в последния ред ]]>

      ОтговорИзтриване
      Отговори
      1. Благодаря, копирала съм и началото на следващия ред от кода. Поправих го. Иначе, ще погледна още един път какво съм писала.

        Изтриване
      2. 'fa fa-angle-right'/> е участъкът от кода, отговарящ за стрелкичките, сочещи надясно. Моля, проверете дали сте спазили интервалите в кода. Все ми се иска всичко да става от първия път.

        Изтриване
      3. Проверих и видях, че е както Вие сте го представили. Пробвах с друг символ и пак не става. Може би причината е в моя блог. Нищо и така пак става. :)

        Изтриване
    2. Направих още един опит и в тестовия блог. Там става без грешка. А основния продължава да е без знаците. Имам нещо оплескано по темата, но нищо и така не ми пречи да го ползвам.

      Вашите кодове са БЕЗ грешки!

      ОтговорИзтриване
    3. Излъгах го по друг начин и добавих символи. Ако съм заместил правилно навсякъде няма да имам бъгове.

      Благодаря още един път за урока и се извинявам за многобройните коментари!

      ОтговорИзтриване
      Отговори
      1. Здравейте, видях, че сте добавили други символи, много добре стоят, всичко е чудесно! Нали знаете, че в някои случаи кодовете са в конфликт и нещата не се получават. Но пък прилагайки находчивост и въображение всичко се подрежда. Всеки ден съм в "Ежедневието днес"!

        Изтриване
      2. Много се радвам на нашето общуване! Пишете, много и интересни са ежедневните теми!

        Изтриване
      3. Благодаря за оценката. Винаги е приятно общуването с добри и позитивни хора като Вас!

        Изтриване