How to Add Breadcrumbs Navigation Widget in Blog of Blogger

Breadcrumb navigation helps your readers to trace their position on your blog by showing a crumb path during this approach (Home » Label Name » Post Title).This navigation seems simply on top of of the your post title and also the links square measure a path from the homepage to post title.There is additionally choice for showing the multiple labels during this navigation i.e. if any post have over one label then it'll show all of them.

Add Breadcrumbs Navigation To Blogger

• Go to Blogger Dashboard > Template
• As always download a copy of your template
• Click on Edit HTML 
• Now Press Ctrl+F and Find below code,

data='top' name='status-message'/>

• just above it copy and paste below code,

data='posts' name='breadcrumb'/>

• Now Press Ctrl+F and Find below code (if you find two occurrences of this, then locate the second one)

id='main' var='top'>

• just above it paste below code,

<!-- Breadcrumb Navigation By http://www.BlogofBlogger.com/ --> <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' rel="v:url" property="v:title">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' 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'>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> <!-- Breadcrumb Navigation By http://www.BlogofBlogger.com/ -->

* 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 red code.

• Now Press Ctrl+F and Find below code,

]]></b:skin>

add below CSS code just above it,

.breadcrumbs { background: #F7F7F7; float: left; border: 1px solid #E6E6E6; width: 575px; font-size: 11px; margin: 10px 10px 10px 10px; padding: 5px 10px 5px 10px; }

Now Save your changes and You are Done.

You Also Like:

How to Add Social Media and Newsletter Buttons for Blog of Blogger

Add Floating Follow and Dashboard Button to your Blog