05 May 2011

Add Breadcrumbs to Blogger for better navigation

Advertisements

Breadcrumbs that are available for WordPress blogs are now can easily added to Blogger blogs. They are essential for easy and better navigation of posts. When you will add to your blog it will present just above the post title (not in home page) as follows

Home » Category name » Post title from that category


Add Breadcrumbs to Blogger
Step1
Go to Blogger Dashboard » Design » Edit HTML and click on Expand Widget Templates.
Now look for

<b:include data='top' name='status-message'/>

And add following code BELOW it.

<b:include data='posts' name='breadcrumb'/>

Step 2
Now look for <b:includable id='main' var='top'>
And add following code ABOVE it

<b:includable id='breadcrumb' var='posts'>
<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>

Step 3
Finally look for ]]></b:skin>
And add following code ABOVE it

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Save your template. And enjoy the breadcrumb.

Related Posts

5 comments

June 20, 2011 at 8:09 AM

Thank you
it's work on my Blog
http://megamesoft.blogspot.com

August 1, 2011 at 1:49 PM

Thanx a lot! Great tip! It' s working on mine too!

August 1, 2011 at 8:49 PM

you are welcome :)

August 26, 2011 at 9:16 AM

thnx ..its work in my blog ...

http://techadda.in

Anonymous
September 7, 2011 at 3:23 AM

Than you very mucccccccccccccch

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More