How to Create Breadcrumb-navigation in Blogger

Home

[Sunday, January 04, 2009 | 0 comments ]

Such as navigation on the more familiar with the name "breadcrumb-navigation". With a "breadcrumb-navigation" readers can easily see the position of the articles in the search for and read the articles in one category.

What is the "breadcrumb-navigation" in pairs on the template blogger? The answer is of course can be.

If you observer Revolution theme paper brian Gardner, you may never see a row of simple navigation on the title of the articles are read in, for example screenshot like this:

With a few modifications in your template code, the "breadcrumb-navigation" you will soon have. Here is trick.

1. Please log in to blogger with your ID.

2. Click the Layout.

3. Click the Edit HTML tab

4. Click Download Full Template and please back up your template first.

5. Please check the box next to the small writing Expand Widget Templates.

6. Please find the code ]]></ b: skin>

7. Copy and paste the code below exactly in the code ]]></ b: skin>

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

8. Please find the following code in your template:
<div class='post entry uncustomized-post-template'>

9. Copy and paste the code below exactly under the code <div class='post entry uncustomized-post-template'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>

Browse » <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>
» <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>

10. Click the Save button templates.

11. Wait some time until the template you saved.

12. Open your blog page, click on the article title. Please see the results.

13. Done.

If steps are correct, then the "breadcrumb-navigation" will be like this:

Smile!