Installing Multi Label Breadcrumb Navigation in Blog

0 Comment

Installing Multi Label Breadcrumb Navigation in Blog | Breadcrumb is a row of internal links on the top of the page that allows visitors to navigate back to previous section quickly. 


Breadcrumb is very important for bloggers, because when visitors reach our article contained a breadcrumb navigation showing the location of the post (example: Home >> SEO, Blog Tutorial >> Install Breadcrumb). And visitors can click on the post page as well as categories of posts back to the homepage.

Highly recommended by bloggers Installing Breadcrumb Navigation in the blog. But there are some breadcrumb is not readable by google. Some blogs may not be read by google, because of its PR in the blog or the blog is still new.


If you want to install breadcrumb in your blog please follow the steps:


Backup your template first if an error occurs.
Open Design => Edit HTML => Expand Widget Template.

Find code ]]></b:skin>
Copy code below just above ]]></b:skin> code
p.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:double 3px
#e6e4e3;
 }
Then find code below
<b:include data='top' name='status-message'/>
Then copy code below beneath code above.
<b:include data='posts' name='breadcrumb'/>
If there are 2 code, copy the code below both.

After that, find <b:includable id='main' var='top'>  code.
Copy code below above that code.
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p class='breadcrumbs'>
<span class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> ,
</b:if>
</b:loop>
<b:else/>
&#187; Unlabelled
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Save your template.

If an error occurs, use the template that you have previously downloaded.
Description: Installing Multi Label Breadcrumb Navigation in Blog
Rating: 5
Reviewer: FarZ
Item Reviewed: Installing Multi Label Breadcrumb Navigation in Blog


Title : Installing Multi Label Breadcrumb Navigation in Blog.
Original URL : https://farzc.blogspot.com/2012/04/installing-multi-label-breadcrumb.html
Label : |

You can share this article: Installing Multi Label Breadcrumb Navigation in Blog but do not forget to put the source link of Installing Multi Label Breadcrumb Navigation in Blog.


Enter your email address to get updates from this blog:


Share this article :

Post a Comment

Please do not SPAM or commented by stating the link
If you cannot comment in English, use Indonesian :))

 
Copyright © 2011. FarZ Collection - All Rights Reserved
Proudly powered by Blogger