How to add a beautiful breadcrumbs navigation above your posts in blogger

Breadcrumbs navigation above your post will display the labels of that post. This is a cool widget and the readers will know what they are reading on the blog. This widget is getting trendy among bloggers and almost every new blogging template in the resent past has this widget. It will show like Home >> Widgets >> Html/CSS and so on with all the widgets above the post on your blog. the original idea was developed by HOCTRO

How to add this to your blogger:

Please follow the steps carefully:

Download a copy of your template before making any changes to it.

Part 1 - Adding CSS

Goto templates tab on your blogger and click on edit HTML and then proceed.

Now search for ']]></b:skin>'




Just above that code, paste the following code:

.breadcrumbs {
background: #F7F7F7;
float: left;
border: 1px solid #E6E6E6;
width: 575px;
font-size: 11px;
margin: 10px 10px 10px 10px;
padding: 5px 10px 5px 10px;
}

Now save the template and proceed

Part 2 - Adding the code for the widget:

Now click on expand widget template and search for '<b:include data='top' name='status-message'/>' and paste the following code just below it.

<b:include data='posts' name='breadcrumb'/>

Now search for '<b:includable id='main' var='top'>' If you find it two times on your template, then locate the second instance.

Now paste the following code just above it

<!-- Breadcrumb Navigation By http://www.coreblogging.in/ -->
<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'>
 » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
 </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>
<!-- Breadcrumb Navigation By http://www.coreblogging.in/ -->

Save the template and you are done with this :) 

 تم النشر يوم  الخميس، 5 سبتمبر 2013 ' الساعة  2:21 ص

Facebook Twitter Google+ Linkedin Digg Print