breadcrumb for Blogspot

Add breadcrumb to your blog help your visitor to track themselves that where they are standing right now. Breadcrumb creates the auto link which show the label of post as well help to navigate your readers. Breadcrumb appears just above of tour blog like this (Home » HTML » Blogger Limits). Breadcrumb is used by almost every successful Blogger. Breadcrumb has its own value show the links from home page, show the labels and ends with post title link. We create the code for you must try this at your blog.

Add breadcrumbs to your Blogger:

Go to your Blogger account and open the template tabs right of your Blogger dashboard.

Click on the edit HTML and open it. The new window appears with your template codes.

Now press Ctrl + F the new light box will appears and put the below code in to it to find the correct code.

First find the below code in your template.

<b:include data='top' name='status-message'/>

Now past the below code above the code.

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

Now you have to find this below code.

<b:includable id='main' var='top'>

Past the below code above the first code.

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:blog.pageType == "static_page"'>

<b:else/>

<b:if cond='data:blog.pageType == "item"'>

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

» <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"'>

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

<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:includable>

Now find ]]></b:skin> code in your template and past the below code above this code ]]></b:skin> . The below code is 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;
}

Now save your template and refresh. When you see your post you will get the breadcrumb above your blog post.

About Post Author:

This post is fruit of pen-clipping of Mohammad Hamza, poineer of ProFeedLinks. He likes to shear about his thought and experience with others.

Tab 1 Top Area

Game Reviews

Sunday, 25 August 2013