How to install the breadcrumb navigation

Advanced tutorial than 15 SEO Top Secret On Page SEO This time I will share about How to install the breadcrumb navigation:

1. Log into blogger.com

2. Click Layout.

3. Select Edit HTML tab

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

5. Then check the little box next to writing Expand Widget Templates.

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

7. Copy and paste the code below This right above 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 hentry uncustomized-post-template'>

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

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

Browse &#187; <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 == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; 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. Then Save Template.

11. Wait a while until Your template is saved. Once done look at your post precisely on the title of the article to determine the success of your set-breadcrumb navigation. If successful then the breadcrumb-navigation as it will appear above the title of this post.

Good luck ..

Related Post: