SocialBlogr

Some SEO experts said that breadcrumb is good for SEO, to increasing the keywords density. In other side, breadcrumbs helps your visitors to explore more pages in your blog. If you are using WordPress of course it wouldn’t be big problem, but what about Blogger/Blogspot users? Ok, let’s make it so easy to install on your blog.

Go to your Blogger admin, I suggest http://draft.blogger.com/
Open your Layout–>Edit HTML
Ok, don’t forget to check Expand Widget Templates

Ready to edit your template now?
Search for :

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

Replace with :

<b:include data="top" name="status-message"><b:include data="posts" name="breadcrumb">

Then, search for :

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

Replace with :

<b:includable id=’breadcrumb’ var=’posts’><b:if cond=’data:blog.homepageUrl == data:blog.url’><!– No breadcrumb on home page –><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’></a></b:if></b:loop><b:else/>»Unlabelled</b:if>» </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 » Archives for </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 » All posts<b:else/><a expr:href=’data:blog.homepageUrl’>Home » Posts filed under </b:if></span></p></b:if></b:if></b:if></b:if></b:includable><b:includable id=’main’ var=’top’>

Ok, you need add a CSS style for your breadcrumb now..
Search for :

]]></b:skin>

Add CSS code above it

.breadcrumbs {padding:5px 5px 5px 0px;margin: 0px 0px 15px 0px;font-size:95%;line-height: 1.4em;border-bottom:3px double #e6e4e3;}

Finish! You can save your template and see the result. It should be a breadcrumb on top of your single post now.

So many thanks to Melodanta.com for this trick.

Incoming search terms for the article:

Do you like this post? Subscribe to our RSS now!