How to add breadcrumbs to Google Blogger blog template


This is how to add breadcrumbs to your Google Blogger blog template. The breadcrumbs will enable you to better inform your visitors on navigating around your Blogger blog. The method here involves editing your Blogger template HTML code so make sure you have backup your template first before you proceed with the edits.

Got to edit HTML mode of your Blogger blog and follow the instructions below for the edits to add the breadcrumbs into your Blogger blog template.


1. CTRL+F to find this code:

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

2. Add the following code below or after it.

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

3. CTRL+F to find this code:

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

4. Replace the above piece of code with the code below

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

5. CTRL+F to find this code:

]]></b:skin>


6. Add the following code before or 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;
}

7. Save the template.


Comments

  1. Replies
    1. Hi, step 5 means to use the text search feature of your web browser to look for the text stated. Ctrl+F is the combination of ctrl and F buttons on your keyboard to use the text search.

      Delete
    2. Nice article! To add Breadcrumbs to your Blogger blog is so easy using my tutorial.

      http://www.blazerwap.com/2017/01/new-way-to-add-beautiful-and-stylish.html

      Delete

Post a Comment

Thank you for visiting Almost a Technocrat. Due to many spam comments, your comment will be moderated.

Popular posts from this blog