4
comments
How to Add Breadcrumbs in Blogger to Support Easy Page Navigation
Breadcrumbs or breadcrumb is a navigation used in user interface, typically appear horizontally across the top of a web page, usually below title bars or headers in blog area.
I suggest every blogger who uses blogger as a blogging platform, should add breadcrumbs in blogger to gain SEO Advantage and to support easy page navigation to end users. The term "Breadcrumbs" comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.
Typical breadcrumbs look like this:
Home page > Section page > Subsection page or Home page >> Section page >> Subsection page.
Steps to Add Breadcrumbs in Blogger
Note: Before making any changes to your template, take a full backup of your blogger template.
#Step 1. Log in to your Blogger Dashboard and Navigate to Layout > Edit HTML.
#Step 2. Find this code:
<b:include data='top' name='status-message'/>and replace it wit this code:
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>#Step 3. Now Find this code:
<b:includable id='main' var='top'>and Replace it with this code
<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>
<b:includable id='main' var='top'>#Step 4. Now Find this code:
]]></b:skin>and Replace it with the code given below
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
]]></b:skin>#Step 5. Save template and done!.
If you are using multiple labels for one post then this breadcrumbs will show only the last label you have added, so put label at end in Labels for this post: section for which you want to show in your breadcrumb.if you have any query you can always comment here!
plz help
Download your template as an XML-file and save it onto your harddisk. If anything goes wrong, upload it again and not much harm will be done.
Step 2: Now check the checkbox to display your template's XML-code. Ready to hack? Here we go!
Step 3: We are going to modify the code of the Blog-widget. The default-widget uses a so-called "includable" (a chunk of code) to display a status-message above your posts when you have selected all posts with a certain label. We will turn off this default status message, and replace it with our breadcrumbs.