Blogger Blogspot Blog: How to Add a Breadcrumb
By almirah
What is a breadcrumb in blogger blog?
Breadcrumb is a tools that you can apply to your blogger blogspot blog. This tools is an assistance to your blog readers so they feel more convenient in reading you blog posts. As a blogger, one of your goals is attract as many readers as possible and build your readership. When readers feel convenient in your blog, reading one post after another, they may love your blog and even subscribe to come back at later times.
One way to make your blog readers feel convenient with your blog is to install breadcrumb. Breadcrumb is a tools that you can use to achieve the above goal. With this tools on your blog, you provide a convenient way to your blog readers on how to navigate and find your blog post easily. When the reader is on a blog post page, they can see the structure of the post they are reading. It provides to which label or category of the post they are reading is under.
Breadcrumb is usually placed on top the of the blog post, exactly above the post title. That is for a perfect navigation. See the image below about breadcrumb. It is taken from one of my blogs. You can go there to have look how breadcrumb in action. Click here.
Code #1
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
]]></b:skin>Code #2
<b:include data='top' name='status-message'/> <b:include data='posts' name='breadcrumb'/>
How to Install the Breadcrumb
Follow the following steps on how to install a breadcrumb on your Blogger blog
- Log in to your Blogger blog
- Click Design and Edit HTML
- Look for this code ]]></b:skin> in your blogger template and replace that with code #1 on the right
- Look for this code <b:include data='top' name='status-message'/> and replace with code #2 on the right
- Look for this code <b:includable id='main' var='top'> and replace with code #3 below
- Save your template and you are done! Preview now by clicking one of your blog posts.
Code #3
<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'><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'>
Blogger Blogspot Tips
- Blogger Blogspot Blog: How to Add a Floating Social Bookmark Button
Many bloggers using blogspot blogging platform recommend to use social bookmark button in our blogs. Reason for this is that social bookmark will help to increase you blog post popularity and traffic to your...
Comments
That means that your template already has a breadcrumb installed. You need to use only one, otherwise it'll conflict. Is the installed breadcrumb functional? can you point me to your blog so I can see it, please?!
jazz 7 weeks ago
Hi, admin. I'm a having problem installing this, I'm getting error in my blog like this one...
The widget with id "Blog1" contains at least two b:includable elements with the same id: "breadcrumb". All b:includable elements should have a unique id for a given widget.
Please help me. Thanks!