How To Make Breadcrumb Navigation

This time i will share to bloggers friends a blog tutorial is How To Make Breadcrumb Navigation in your blog. May be, you have been known about this, because many blog have recommended when i search the trick on Google. But now i will share very different of other blog.

Cara Membuat Navigasi Breadcrumb

Why us must Make Breadcrumb Navigation On Blog. What is the breadcrumb navigation function?

1. Breadcrumb navigation will shown blog like a profesional blog.
2. Facilitate the visitor to reach out to all posts in the blog
3. Breadcrumb navigation is an elaboration of the label post, so posting will likely be a lot of labels clicked by visitors, and will bring up the interesting posts with a specific label that will increase pageviews of blog

Below an example Breadcrumb Navigation

Cara Membuat Navigasi Breadcrumb

Step to Make Breadcrumb Navigation

1. Login in to your blog. and open EDIT HTML page, ceklist Expand Widget template.
2. Find code like below.

   <div class='post hentry'>

3. Copy and paste code below, in to your EDIT HTML blog

   <b:if cond='data:blog.pageType == &quot;item&quot;'> <div align='left' style='border-bottom:1px solid #940F04;font-size:10px;'>You are here: <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='nofollow'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if> &#187; <data:blog.pageName/></div></b:if>

4. Click preview to view the navigation breadcrumb, if it is good, please click Save to save your settings

Cara Membuat Navigasi Breadcrumb

Explanation of codes

<b:if cond='data:blog.pageType == &quot;item&quot;'>

This code is used for breadcrumb navigation does not appear on the homepage, but only appeared on the page or pages ITEM postingan.selengkapnya see How to Set the Display Blog

You are here:

This is a pointer, can my friends change into other words, such as Browse, you are now in, and others, please make beautiful as possible.

&#187;

This code is simply a double-arrow as a divider between the home link, the label and the title of the open posts

That explanation of the How To Create Breadcrumb Navigation, good luck for blogger friends, may be useful.