Add breadcrumbs in Blogger

Breadcrumbs are very important for any blog or website to ensure that every thing is fine in terms of On-site SEO. Basically, Breadcrumbs help search engine spiders to find out that under what category a post or page is published which helps them to categorize a post for specific keywords in search engine.

Breadcrumbs also help your users to find out that where they are standing, by using breadcrumbs they can easily move to homepage or the category page by clicking on the breadcrumb link.

Now let me tell you that how you can install breadcrumbs in your blogspot blog. First go to Blogger Dashboard>>Template>>Edit HTML, Now find this code

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

Just copy and paste the below given code just before the above given code. In some templates you will find this code two times, in such a case make sure to put the below given code just above both codes:

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

Now search for the following code:

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

And put the below given code just before the above given code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == "item"'> <span class='post-labels'> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == "true"'> » <a expr:href='data:label.url' rel='tag'><data:label.name/></a> </b:if> </b:loop> <b:else/> »Unlabelled </b:if> » <span><data:post.title/></span> </b:loop> </span> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <span class='post-labels'> <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> </span> <b:else/> <b:if cond='data:blog.pageType == "index"'> <span class='post-labels'> <b:if cond='data:blog.pageName == ""'> <a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/> <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/> </b:if> </span> </b:if> </b:if> </b:if> </b:if> </b:includable>

Now it’s time to style our breadcrumb, for that search for “</b:skin>” tag and just before it paste the below given CSS styles:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

.breadcrumbs {  padding: 4px;  background-color: rgb(219, 63, 74); margin: 0px 0px 15px 0px; line-height: 1.4em; border-bottom: 2px solid #e6e4e3; color: #fff; } .post-labels span { color: rgb(0, 0, 0); } .breadcrumbs a{ color: #fff; }

Final Words

If you guys have any further queries then please let me know in comments. You can also change the breadcrumb styles by manipulating CSS codes. If you want me to design it for you, then please let me know.