How To Add Breadcrumb Navigation To Blogger Blogs

Breadcrumbs is the name given to navigation links usually displayed above posts on blogs and at the top of pages on websites.The links are a trail from the page you are currently on back to the home page.So for example on a blog you will have the home page link, a link to a label used for the post then the post title.This will be displayed like this 'Home > Label > Post Title'.This is a very popular type of navigation on all sorts of sites and in this post i will show you how to add it to blogger.

Below you can see a screenshot and the live demo.Credit for the original breadcrumbs for Blogger goes to Hoctro with further work by Blogger Plugins.





Add Breadcrumbs Navigation To Blogger


Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click Design > Edit Html > Tick The Expand Widget Templates Box



Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)



Step 3. Now Replace it with this code




Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)



Step 5. Now Replace It With This Code




















Step 6. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - How To Find Code In Blogger Template Template)

]]>

Step 7. Now Replace It With This Code

/* Breadcrumbs Css info @ http://www.spiceupyourblog.com/ */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
]]>

Step 8. Save your template.

That's it breadcrumbs have been added to your blog.Credits again go to Hoctro and Blogger Plugins.Make sure to check out more of our Blogger Tutorials.