3
Breadcrumb navigation is a row of links, internal link at the top or bottom of the page web site that allows visitors to return to the previous or to the bottom pages quickly. However, the current placement is more often used breadcrumb at the top of the page the article posting. Breadcrumb link sequence starting from home (homepage) and ends with a post title of the article being read. For example :
Browse » Home » Breadcrumb Navigation » Breadcrumb Navigation in Blogger.

Blog Screenshot



Search Engine Screenshot




If You Want Add Breadcrumb Navigation To Your Blogger Blog You May Follow These Steps::-)

Step 1 :-

  • First Login To Blogger Go To Blogger--->Design--->Edit HTML
  • And Click On Expand Widgets Tick Box
  • Now find this code : ]]></b:skin>
  • & Just Before It Paste Above CSS Code
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}


Step 2 :-

  • Now find this code : <b:include data='top' name='status-message'/> On Your Blog Templete
  • And just AFTER it, add this Code:
<b:include data='posts' name='breadcrumb'/>


Step 3 :-

  • Now find this code : <b:includable id='main' var='top'> On Your Blog Templete
  • And just BEFORE it, add this Code:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
» <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>


Finally Save Your Blog Template.. :-)

Post a Comment Blogger Disqus


Note: (Insert Item In Comments)
ATTENTION !!:-
• To Insert An Image, Use The [im]Your Image Link [/im] Tag
• To Insert An Youtube Video Use The [youtube]Youtube Video Link [/youtube] Tag
• To Insert An Smiley, Use The Smiley's Use Smiley Code

Image Emoticon

 
Top