How To Add Breadcrumbs Navigation To Blogger

Breadcrumb sailing helps your readers to itinerary their function on your journal by showing a breadcrumb locomote in this way (Home » Post Label » Your Post title Here).This pilotage appears meet above of the your accumulation rubric and the links are a trail from the homepage to aeronaut appellation.There is also deciding for viewing the denary labels in this direction i.e. if any place tally much than one label then it leave impart

Add Breadcrumbs Navigation To Blogger

  • Go to Blogger Dashboard > Template
  • As always download a copy of your template
  • Click on Edit HTML
  • Hit Proceed
  • Now find below code,
b:include data='top' name='status-message'/>

Just above it copy and paste below code,

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



Now find below code (if you find two occurrences of this, then locate the second one)


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

just above it paste below code,





<b:includable id='breadcrumb' var='posts'>


<b:if cond='data:blog.homepageUrl != data:blog.url'>


<b:if cond='data:blog.pageType == "static_page"'>


<div class='breadcrumbs'>


 <span><a expr:href='data:blog.homepageUrl' rel='tag'>Homea>span> » <span><data:blog.pagename/>span>


div>


<b:else/>


<b:if cond='data:blog.pageType == "item"'>




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


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


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


 <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Homea>span>


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


 <b:if cond='data:label.isLast == "true"'>


 » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/>a>span>


 b:if>


 b:loop>


 » <span><data:post.title/>span>


div>


<b:else/>


<div class='breadcrumbs'>


 <span><a expr:href='data:blog.homepageUrl' rel='tag'>Homea>span> » <span>Unlabelledspan> » <span><data:post.title/>span>


div>


b:if>


b:loop>


<b:else/>


<b:if cond='data:blog.pageType == "archive"'>




<div class='breadcrumbs'>


 <span><a expr:href='data:blog.homepageUrl'>Homea>span> » <span>Archives for <data:blog.pagename/>span>


div>


<b:else/>


<b:if cond='data:blog.pageType == "index"'>


<div class='breadcrumbs'>


 <b:if cond='data:blog.pageName == ""'>


 <span><a expr:href='data:blog.homepageUrl'>Homea>span> » <span>All postsspan>


 <b:else/>


 <span><a expr:href='data:blog.homepageUrl'>Homea>span> » <span>Posts filed under <data:blog.pagename/>span>


 b:if>


div>


b:if>


b:if>


b:if>


b:if>


b:if>


b:includable>







This code will only display the last label of the post in the breadcrumb. 

If you want to display all the labels, then you will have to remove the 

code in line number 16 and 18.



Now find below code,


]]>b:skin>



add below CSS code just above it,



.breadcrumbs {


background#F7F7F7;


floatleft;


border1px solid #E6E6E6;


width575px;


font-size11px;


margin10px 10px 10px 10px;


padding5px 10px 5px 10px;


}




Now save your changes and you are done

Be sure to subscribe to the Blogger Heroe newsletter and get regular updates about awesome posts just like this one and more!

About kasper

Hey Guys I am Avinash a.k.a Kasper.I am one of the founder of this blog.I love blogging,gaming and other fitness activities.Blogging has taught me many things in my life and made me different from others.The only thing I believe is that if you ain't First your Last!

Speak Your Mind

*


*