Breaking News
Loading...
Sunday, 23 March 2014

How To Add Breadcrumbs To Blogger

the tech trackers

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)

<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'/>

■ 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

 
Toggle Footer