Recent Posts

How to Add Breadcrumb Navigation in Blogger

Learn how to add breadcrumb navigation in Blogger.


Breadcrumbs navigation widget for Blogger will make your website more user friendly and search compatibility.
Learn how to add Breadcrumb in Blogger
Add Breadcrumb to Blogger

To add breadcrumb navigation bar apply the following steps:

1. Go to Blogger and select your blog and choose 'Template → Edit HTML'
2. Click a single on template code and 'CTRL + F' and search for
<b:include data='top' name='status-message'/> and put the following code just before.

Just below paste the following code

<!--Breadcrumb Start-->
<b:if cond='data:blog.pageType == "item"'>
<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:if>
<b:if cond='data:blog.pageType == "static_page"'>
<p class='breadcrumbs'>
  <a expr:href='data:blog.homepageUrl'>Home</a> » <data:blog.pageName/>
</p>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
    <p class='breadcrumbs'>
      <a expr:href='data:blog.homepageUrl'>Home</a> » <data:blog.pageName/>
    </p>
</b:if>
<b:if cond='data:blog.searchLabel'>
    <p class='breadcrumbs'>
      <a expr:href='data:blog.homepageUrl'>Home</a> » <data:blog.pageName/>
    </p>
</b:if>
<!--Breadcrumb End-->
*** If you don't get  <b:include data='top' name='status-message'/>, again search for
<div class='blog-posts h-feed'>  or
<div class='blog-posts hfeed'>  and put your code just below those.

Add the following CSS just before ]]></b:skin>

.breadcrumbs {
    border: 1px solid black;
    background: #fff;
    margin-top: 2%;
}

.breadcrumbs a {
    color: #b93434;
    text-decoration: none;
}

.breadcrumbs a:hover{} 

You can customize CSS with your expectation.
Recommended article:  Adding Specific Code Syntax Highlighter For Blogger.
Have got this article helpful or not working? Put your comment below.