Hur man lägger till ett Breadcrumb-spår (navigering)

Vill du att användaren ska se ett spår av vad han har gått igenom på din blogg kan du lägga till detta breadcrumb-trail eller brödsmulespår som det skulle heta på svenska. Nu finns det inte jättemånga vägar din besökare kan ta men det kan ändå vara en funktion som är kul att ha och ser professionell ut. Titta gärna hur jag lagt upp min för det är exakt så er kommer att se ut när den är klar så länge ni inte ändrar något i koden. Breadcrumb navigeringen är precis ovanför inläggets titel. Det är lite klurigt så läs igenom allt och var säker på att du förstår innan du sätter igång så det inte blir något fel och som vanligt spara mallen först.

Först ska du leta reda på det här kodstycket

<b:includable id='main' var='top'> 

<!-- posts --> 

<div class='blog-posts hfeed'>

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

<data:adStart/>

Nackdelen är att det troligtvis inte kommer att se ut exakt såhär i den ordningsföljden på grund av att alla kodmallar blir ju unika efter att man ändrat dem fram och tillbaka men respektive kodstyckesrad kommer att göra det och det är det två gröna raderna vi kommer att använda så fokusera på dem.




Lägg till dessa gröna rader vid det andra viktiga kodstycket

<!-- disable default status message<b:include data='top' name='status-message'/>default status message disabled -->    <b:include data='posts' name='breadcrumb'/>





Lägg sedan till denna långa rad av kod

<b:includable id='breadcrumb' var='posts'>  <b:if cond='data:blog.homepageUrl == data:blog.url'>
  <!-- No breadcrumb on front page -->  <b:else/>
    <b:if cond='data:blog.pageType == "item"'>
       <div class='breadcrumbs'>
         Browse »  <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>
             » <span><data:post.title/></span>
           </b:if>
         </b:loop>       </div>
    <b:else/>
      <b:if cond='data:blog.pageType == "archive"'>
        <div class='breadcrumbs'>
          Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
        </div>
      <b:else/>
        <b:if cond='data:blog.pageType == "index"'>
          <div class='breadcrumbs'>          <b:if cond='data:blog.pageName == ""'>            Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts          <b:else/>            Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
          </b:if>          </div>
        </b:if>
      </b:if>    </b:if>  </b:if></b:includable>




Precis ovanför det första viktiga kodstycket, alltså




<b:includable id='main' var='top'>




Nu är programmeringen klar, nästa steg är att formatera den med hjälp av CSS. Leta reda på det här kodstycket




]]></b:skin>




Och lägg in den här koden ovanför för att få en design précis som min (är du duktig med CSS så kan du naturligtvis ändra den röda koden efter sunt förnuft)

.breadcrumbs {float: left;width: 590px;font-size: 11px;margin: 5px 10px 20px 10px;padding: 0px 0px 3px 0px;border-bottom: double #EAEAEA; 

}




Nu har du ditt eget brödsmulespår på bloggen.

Lärt dig något om hur man skapar, designar och tjänar pengar på din blogg eller hemsida? Gillar du inlägget får du gärna Twittra, gilla på Facebook, posta på Pusha, länka eller kommentera inlägget.