Blogger lacks many things one of them is Breadcrumb. Breadcrumbs is a navigation tail for your blog. It tells your readers about his location on your Blog's page. It also improve the Organic Search of your blog on search engine. So let's see here...■ Open Blog Dashboard
■ Open Template → Html Editor
■ Find (pressing Ctrl+F)
■ Find (pressing Ctrl+F)
<b:include data='top' name='status-message'/>
■ Replace it with below code
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
<b:include data='posts' name='breadcrumb'/>
■ Now find (pressing Ctrl+F)
<b:includable id=’main’ var=’top’>
■ Replace it with below code
XML
<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl == data:blog.url'> <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'>
■ Now find (pressing Ctrl+F) " ]]></b:skin> "
And copy/paste below code just above/before it.
CSS
.breadcrumbs {padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
■ Now hit the Save button.
Enjoy :)
0 comments:
Post a Comment