Make Breadcrumbs Navigation At Blog

Breadcrumbs navigation is the navigation located at the top of the post and show the sequence contents of the root page (Home) to the post / article.

The menu is frequently encountered in the blog / website WordPress platform, where sequences start of navigation Home>Parental Category>Subcategory> Post. In Blogger / Blogspot, we also can do the hack with breadcrumbs navigation based on the label: Home>Labels>Post.


Breadcrumbs navigation also helps improve the SEO and the SERP, which is the mapping by the search engines and also increase the keyword density, since it lies at the top of the post. This menu will appear on post pages, label, archive, and do not appear on the homepage.

Following this, How to Make Breadcrumbs Navigation in Blogger:

• Log in to your blogger account, then go to the dashboard> Design / Design> Edit HTML, do not forget to check "Expand Widget Templates" in the top right corner of the HTML edit box.

• Search (use Ctrl + F) ]]> </ b: skin> and insert the following CSS rule in UP it:

.breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height:1.4em; border-bottom:3px double #e6e4e3;}

• Find (Ctrl + F) <b:include data='top' name='status-message'/> then add this code RIGHT BELOW / AFTER it.

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

• Find (Ctrl + F) <b:includable id='main' var='top'> then add the following script on THE RIGHT / BEFORE it:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<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>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<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>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

• Make sure all the code has been copied and placed correctly, then save.

Note: because of the many problems presented when editing, follow the instructions and understand the terms under / after and above / before, that means put the code really after or before the code that is sought. Example:

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

There is 2 tags side by side, if you need to enter the tag / new code under / after <b:include data='top' name='status-message'/>, it means you have to put really after, so <data:adStart/> have shifted its position, or the code / new tag inserted between the two, would:

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
<data:adStart/>

Good Luck..... :)