Tuesday, June 5
Breadcrumb Reader navigation In Blogger (blogspot Blogs)
Breadcrumbs or breadcrumb Is for showing navigation Path .
It Helps Visiters to keep track of their Current location And
They Can Browse entire Topics Of their Interest using Breadcrumbs .
It provides The way :: like" Home » Topic » Post Name"
are the breadcrumbs. .
I think now you are introduced to Breadcrumb,
Now I'll explain how to add this to your blogger Blog..
As In word-press there Are some Plug-ins Available
They This job easily for you. But In blogger we have to Do this Manually..!!
Now Here Are steps That you should Follw::
A. Go to Template(If still using old interface this can be found In design) > Edit HTML
and Expand the Widget Templates.
B. Now in your template HTML , Find using Ctrl+F
<b:include data='top' name='status-message'/>
and immediately above that, paste this line.
<b:include data='posts' name='breadcrumb'/>
C. Now find Again press Ctrl+F and search for
<b:includable id='main' var='top'>
If you find two results for tHat search Query ,
then Go To the second one
and immediately above that paste 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>
This code will only display the last label of the post in the breadcrumb.
If you want to display all the labels, then you will have to remove those 2 green lines of code.
D. Now Save Your Edited Template Template..!!
E. Now Go To Template Designer >Advanced > Add CSS OR insert css code INto your template's Html
.breadcrumbs {
padding:4px 4px 4px 0px;
margin: 1px 1px 13px 1px;
font-size:95%;
line-height: 1.4em;
border-bottom:2.5px double #e6e6e9;
}
..........Thats All…
This post was written by:+ Tasleem Ahmad
Tasleem Ahmad is a Not professional blogger,But He loves To blog For Fun.
He Is An Accountant by profession, web designer and Back end web developer and modifier .
Follow him on Twitter
Facebook
Subscribe to:
Post Comments (Atom)
0 Responses to “Breadcrumb Reader navigation In Blogger (blogspot Blogs)”
Post a Comment
Your views Are very Important for Us,
so Please Let us know using Comments...!!