How to Add Breadcrumbs navigation in blogger and improve seo

Breadcrumbs Navigation

Hey, folks!  Many of us have been wondering why other sites have breadcrumbs navigation system and

 we dont ? so i thought i would teach you now how to create a breadcrumbs navigation in blogger.

What are breadcrumbs anyway ??

 Breadcrumbs is a navigation trail that tell the user where exactly the user is in a web document. it helps the user to navigate through a website or blog easily. you can see the breadcrumb navigation above in the picture to see how it looks. You may have noticed that my site uses breadcrumbs as well.

It is also good for the health of your blog or website as it adds keywords in search engines database...

How to Add Breadcrumbs navigation in blogger

Note: You must backup your blog template first before adding breadcrumb navigation in your blog.

 Follow these steps to add a breadbrumbs navigation:

1. Go to Blogger Dashboard > Template > Edit HTML
2. Copy all the template code into a Notepad file
3. Now press Ctrl+ F and search for below code.

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

Replace that code with the below one.

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

Now find this code in your blog template.

<b:includable id=’main’ var=’top’>

Replace it with the below code.

<b:includable id=’breadcrumb’ var=’posts’>
<b:if cond=’data:blog.homepageUrl == data:blog.url’>
<!– No breadcrumb on home page –> <!–Breadcrumbs by http://www.funcki.cf/–>
<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>
<b:includable id=’main’ var=’top’>

Find ]]></b:skin> and paste the below code just above/before it.

/*Breadcrumbs by http://www.coursecode.tk/ */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Now your code is ready. Replace your entire template code with your Notepad file code.

Click on save template button.

You are Done!

How amazing is that ?? You have a breadcrumbs navigation in your blogger blog. Isn't that nice ?? for any queries or suggestions drop you comments or reach me at Goggle+ and Facebook

Via: Funcki
Source: Funcki