Breadcrumb navigation helps your readers to track their position on your blog by showing a breadcrumb trail in this way (Home » Label Name » Post Title).This navigation appears just above of the your post title and the links are a trail from the homepage to post title.There is also option for showing the multiple labels in this navigation i.e. if any post have more than one label then it will show all of them.The original breadcrumbs idea is given by the HOCTRO and Aneesh of bloggerplugins futher worked on it.

Add Breadcrumbs Navigation To Blogger

1. Go to Blogger Dashboard > Template 
2. As always download a copy of your template 
3. Click on Edit HTML 
4. Hit Proceed 
5. Now find below code:

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

just above it copy and paste below code

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

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

<b:include id='main' var='top'</div>

just above it paste below code:

<!-- Breadcrumb Navigation By http://www.digitalpincher.blogspot.com/ --></div> <div> <b:includable id='breadcrumb' var='posts'></div> <div> <b:if cond='data:blog.homepageUrl != data:blog.url'></div> <div> <b:if cond='data:blog.pageType == "static_page"'></div> <div> <div class='breadcrumbs'> </div> <div>  <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pagename/></span></div> <div> </div> </div> <div> <b:else/></div> <div> <b:if cond='data:blog.pageType == "item"'></div> <div> <!-- breadcrumb for the post page --></div> <div> <b:loop values='data:posts' var='post'></div> <div> <b:if cond='data:post.labels'></div> <div> <div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#"> </div> <div>  <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span></div> <div>  <b:loop values='data:post.labels' var='label'></div> <div>  <b:if cond='data:label.isLast == "true"'></div> <div>  » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span></div> <div>  </b:if></div> <div>  </b:loop></div> <div>  » <span><data:post.title/></span></div> <div> </div> </div> <div> <b:else/></div> <div> <div class='breadcrumbs'> </div> <div>  <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div> <div> </div> </div> <div> </b:if></div> <div> </b:loop></div> <div> <b:else/></div> <div> <b:if cond='data:blog.pageType == "archive"'></div> <div> <!-- breadcrumb for the label archive page and search pages.. --></div> <div> <div class='breadcrumbs'> </div> <div>  <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pagename/></span></div> <div> </div> </div> <div> <b:else/></div> <div> <b:if cond='data:blog.pageType == "index"'></div> <div> <div class='breadcrumbs'> </div> <div>  <b:if cond='data:blog.pageName == ""'></div> <div>  <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span></div> <div>  <b:else/></div> <div>  <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pagename/></span></div> <div>  </b:if></div> <div> </div> </div> <div> </b:if></div> <div> </b:if></div> <div> </b:if></div> <div> </b:if></div> <div> </b:if></div> <div> </b:includable></div> <div> <!-- Breadcrumb Navigation By http://www.digitalpincher.blogspot.com/ --></div>

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><br />
add below CSS code just above it

 .breadcrumbs {<br /> background: #F7F7F7;<br /> float: left;<br /> border: 1px solid #E6E6E6;<br /> width: 575px;<br /> font-size: 11px;<br /> margin: 10px 10px 10px 10px;<br /> padding: 5px 10px 5px 10px;<br /> }<br />
Save and Preview your change

<style> Add CSS Code Here </style> Add HTML Code Here

PS: This Post is an experiment and not a new one

---

While writing tutorials or asking a question, sometimes it becomes very necessary to post html and javascript codes in your blog comment forms powered by Blogger. You have seen many authors posting HTML effectively but when some of you try to do it, you get an error. This is because Blogger Comment form doesn't support direct posting of HTML and JavaScript. In order to help you to do that we will need to change/encode the same code into a text and then post it effectively without any error. The Tool below will help you to change HTML characters to simple text, which could be easily inserted in your blogger template and comment form. You can also use it to convert your adsense code into an embeddable form. It converts special characters in this way,

• '<' becomes '&lt;'
• '>' becomes '&gt;'
• '"' (double quote) becomes '&quot;'
• ''' (single quote) becomes '&#039;'
• '&' becomes '&amp;'

THE HTML ENCODER: Start Converting Now!

 

© Digital Pincher