How to Add Breadcrumb Navigation Trail Below the Post Title?

Filed Under : ,

Hi bloggy readers
Breadcrumb Trail Navigation has been one of the most utilized elements that practically marches every label that has a relevance with article you are currently reading. So, by adding this breadcrumb navigation trail (under the blogger post title), will not only show the readers what all the labels that have been set to that article, but also will make it easier for them in finding the similar posts that have relevancy with the article they're currently reading.

In my previous post about - Adding a Breadcrumb Navigation Trail under the Post Title - i already showed you the method in applying the breadcrumb navigation trail on the top position of article or below the post title. But maybe some of you faced a problem and hadn't succeed in installing that breadcrumb navigation trail in your blog. That's why, i consider to give you another method that maybe can work on your template. These are the steps you need to follow to begin installing the breadcrumb navigation trail in your blog:

1. Log in to Blogger
Log in to your Blogger account to start this tutorial.

2. Go to Edit HTML
In Dashboard, press the Layout/Design button of your chosen blog. After landing to the Page Element, switch the sub-tab to Edit HTML

Anyway, it's important to save the current template if later, you did a terrible mistake in your blog template and want to revert the template back to normal again.
save blogs templates
3. Give a tick at the Expand Template widget box.
At the small box called Expand widget templates, now give a check mark.

4. Find the code
Try to locate the code below in your blog template. Just press Ctrl + F at the same time to find this code below:
<div class='post hentry uncustomized-post-template'>

5. Copy the Code
Now block the widget code below and then press copy. After that, paste it after the code section <div class='post hentry uncustomized-post-template'> (on number 5)
<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.homepa
geUrl' 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/></sp
an>
</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.homepa
geUrl'>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>

6. Save the Change
Now by pressing the Save Template button, you can save the current change you've just made in your blog template. As you can see in your blog article, if on the top position of your post, there is a line of labels related to that article, it means that the breadcrumb navigation trail has been successfully installed in your blog template.

Hope this method to add breadcrumb navigation trail works perfectly on your blog. Anyway, feel free to leave your comment if you have something to ask to me.

Good luck bloggy!

You might also like to read :


Share This Article to Other People Across the World !
Thanks!
Get the fresh update from Whatmakesblog.com!
To get updates from this blog, just enter your email address in the below subscription form and then click Subscribe.
Your email address will not be shared to any third party
Delivered by FeedBurner
edit post

0 comments:

Post a Comment

Browse Daniel's Designs

Revoluzine Template

Revoluzine Template
Designed by Daniel Likin

Subscribe Now To Get Update!

Want to Get The Update From Whatmakesblog.com to Your Email Inbox? Just Type Your Email Address Below and Press Subscribe...
Your email address will not be shared..
Delivered by FeedBurner

Last Posts

Site Info