Just to increase pageviews, a blog must be designed in such a way to keep visitors busy, letting them explore parts of your site that might remain undiscovered without a design based on easy navigation. Just like the related post widget and numbered page navigation, adding breadcrumb navigation ( also called link tree) is just another way to keep your visitors engaged and stay longer on your blog. In case you don’t know what link tree means, it’s those links that shows where you are in a site and in blogger, it trails from the homepage down to label page and lastly, the post page you’re presently viewing. You can see it right at the top of this blog post and if you can’t, below is the screenshot of just how it should look.
To add this to your blog, follow these simpple steps:
1. Log in to your blogger account and click on Design ( hey, I’m still using the old interface )
2. Click on Edit HTML and check Expand Widget Template box
3. Press CTRL and F on your keyboard and search for this code:
4. Right below that, paste this:
There may be two occurrences of <b:include data='top' name='status-message'> in your template, you should do the same thing if there’s a second one.
5. Now search for this code:
6. Just above it, paste this code:
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!– No breadcrumb on home page –>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!– breadcrumb for the post page –>
<p class='breadcrumbs'>
<span class='post-labels'>
<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>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!– breadcrumb for the label archive page and search pages.. –>
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
7. Now here comes the last part where you have to apply some skinning to the link tree. You can use the default one below or change it if you know a bit of css.
Search for this code:
In the line immediately above it, paste this:
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:90%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
font-weight:bold;
}
Now save your template, view a blog post and you should see the breadcrumb navigation links right above your blog posts.
Further Explanation
On step 6, you need to do some editing if you’re using numbered page navigation. It’s not important though but I guess you might not want to see that label page get rather too long with up to 20 posts showing up. I repeat, this is only useful if you’ve done the numbered page navigation tweak.
Simply change 'data:label.url' to 'data:label.url + "?&max-results=5"'
You should change 5 to the number of posts you set to display on a page.
Yes boss, just like coding wapka, but seriously where do you learn this stuffs from?
Thank you for sharing..
You’re welcome and thatnks for dopping by!
Two of your suggested modifications to Blogger say to put the code in front of: ]]>
I only have this: ]]>
(on two lines as above)
is this the same thing? I can’t find exactly what you describe.
Also, if one wants two of your modifications and both say to put the code directly in front of the same line of code – can you do both and does it matter which order they are placed?
Thanks!!
The order which they are placed doesn’t really matter so far they’re still directly in front of the specified code.
Oh wow. So that didn’t work. The code that I copied and pasted did not show up. Great.
Well let me try this; your code is ]]> (without the breaks)
Mine is ]]>
(without the breaks)
Let’s see if that worked.
Nope. *sigh*
Ok… let me try this; mine has “template-” between : and skin.
Have you been able to add the first two previous codes? First save your template with the two previously added codes. The last part you’re now trying to add is the styling part and the breadcrumb links may even appear without it.
I was trying to add Link Tree / Breadcrumb Navigation Above my Blog Posts but I couldn't find "<b:include data=’top’ name=’status-message’/>" & "<b:includable id=’main’ var=’top’>" in the Edit HTML. What can I do again. Thanks
Did you remember to check expand widget template?
Twitter: daayur
says:
this is great and useful
hello!
thanks for the code
but i have a problem because i usen’t the same variables
can you help for adding this code to my site http://www.sc-ing.com/
please.
MNR recently posted..Introduction sur la thermographie infrarouge
You can try searching again. just did some editing on the post. If you’re still having problems with it, please et me know.
Don Caprio recently posted..Downloading / Saving Youtube Videos on your Mobile Phone (Android, Symbian, Opera Mini)
Can you tell me how to put it below the post title? I like this widget!
Aditya Sam recently posted..Identifying My Sources of Stress and Dealing With Them
I’ve never actually tried that but maybe I’ll see if it’s possible.
Twitter: xlimderek
says:
Im getting This error
Error parsing XML, line 1830, column 3: The content of elements must consist of well-formed character data or markup.
Derek recently posted..Microsoft Office Goes Symbian!
Twitter: askanalyst
says:
No doubt the bread crumbs navigation will help to increase the page views and one will have lesser bounce rate.
Nse recently posted..NSE Share Tips – 100% Return with Free Stock Tips : 18 May
Twitter: xlimderek
says:
Bro U still didn’t reply me
Derek recently posted..LiveScore Lite 2.20: View Live Football Scores On Your Phone
Twitter: xlimderek
says:
i’m kinda still expecting a reply bro
Derek recently posted..LiveScore Lite 2.20: View Live Football Scores On Your Phone
Sorry I missed this. You can check the updated version of this here – http://www.doncaprio.com/2012/05/displaying-breadcrumbs-in-google-search-result-for-blogger-wordpress.html
It does works. Thank you, Don! It is amazingly easy to implement.