TutorialWebForBlogger

TW4B It's about a blog that talking about blogging widgets, blogger template tutorials, search engine optimization SEO and other useful blogging tips

Let's review a topic about how to add breadcrumbs navigation on your blog. Like this below : Breadcrumbs navigation will show you w...

How to Add Breadcrumbs Navigation in Blogger

Let's review a topic about how to add breadcrumbs navigation on your blog.

Like this below :

Breadcrumbs navigation will show you where posts located in a blog. As you can see from picture "Download and Save You Tube Videos To your PC" is located at Youtube. While "You Tube" is located at "Home".
The function of breadcrumbs navigation is to navigate your blog friendly for visitors or viewers.

How to add breadcrumbs navigation on your blog ?

First Step

1. Go to Dashboard, click Design, click Edit HTML

2. Click Expand Widget Templates

3. Find code of HTML below :

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

you can use (Ctrl+F) to find easily

4. Remove <b:include data='top' name='status-message'/> with code of HTML below :

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


Second Step

1. Find code of HTML below :

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

you can use (Ctrl+F) to find easily

2. Remove <b:includable id='main' var='top'> with code of HTML below :

<!--Breadcrumb-Navigation-BEGIN-->
<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>
<b:includable id='main' var='top'>
<!--Breadcrumb-Navigation-END-http://tutorialwebforblogger.blogspot.com-->


Third Step

1. Find code of HTML below :

]]></b:skin>

you can use (Ctrl+F) to find easily

2. Remove ]]></b:skin>with code of HTML below :

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

3. Click Save Template and Done.

Now you have already added breadcrumbs navigation on your blog.

There are no comments yet for 'How to Add Breadcrumbs Navigation in Blogger'