How to Make Breadcrumb on Blogspot

Breadcrumb is a link page that opens for easy to navigate blog. These navigation links appear at the top of a single text and the search engine results page (SERP). By using the display url breadrumb post pages will look more beautiful. Here we will learn to make breadrumb on blogspot.

To make the display url on the top of the title of our paper and on the search, we need to change the html code by editing the template that we use. Given this breadcrumb navigation links display above the article title would look like this:

Home >> Blogging >> How to Make Breadcrumb on Blogspot

While the display url in search results (SERP) will look like this:

heryantony.blogspot.com >> Blogging

Quite beautiful, is not it?

How to make breadcrumb on Blogspot? Here's how we ought to do to create a breadcrumb on blogspot or blogger:

1. Steps we need to do is to make editing HTML, do this step by logging into your blog Dashboard page, then select the "Template", then select Edit HTML.
2. Then click "Proceed". So that all HTML look, then check the "Expand Widget Templates". Further search (do a search by pressing the key combination Ctrl + F on your keyboard), then look for code:<b:includable id='main' var='top'> 
3. Then replace that code with all the code below:
4. <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'>Home</a></span> » <span><data:blog.pageName/></span></div> <b:else/> <b:if cond='data:blog.pageType == "item"'> <!-- breadcrumb for the post page --> <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' property='v:title' rel='v:url'>Home</a></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' property='v:title' rel='v:url'><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'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <!-- breadcrumb for the label archive page and search pages.. --> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Home</a></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'>Home</a></span> » <span>All posts</span> <b:else/> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='top'> <b:include data='posts' name='breadcrumb'/>
5. To decorate the breadcrumb display, then we need to edit the style like this, by adding the code below and place it in the following code: ]]> </ b: skin>
6. .breadcrumbs{padding:8px 5px 5px 0;margin:10px 0 0px;font:normal 11px georgia; border-bottom:1px dashed #ccc;font-weight:normal}
7. Next, save your edits. 
   

That's the way to make breadcrumb on blogspot. Good luck, may be useful.