How to Add Breadcrumbs in Blog-spots? - Blogger


Blogger breadcrumbs are really very useful in Blog. Mainly it shows where the user navigates in the blog or website. Moreover, it helps in SEO too. To know more about Breadcrumbs Click Here.

In blogger, breadcrumbs are not available in the admin panel. I hope they'll add that in the future. So, how to breadcrumbs in templates through a piece of code.

Just follow the instructions:


Step 1: Edit in Html

Go to the Blogger Dashboard, then go to Templates > Edit Html



Step 2: Add Blogger Breadcumbs

Copy the given code, then go to html and click (Ctrl + f) then paste the first code in the search box and find the first code.

First Code:          <div class='blog-posts hfeed'>                          



You'll find this code in the blog. Then Copy the second code and paste that in the below of this text.

Second Code:
==================================================================

<!--breadcrumbs start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'> &#187;
                    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
                </b:if>
            </b:loop>
            <b:else/>
            &#187; Unlabelled
            </b:if>
            &#187; <span><data:post.title/></span>
        </b:loop>
        </span>
    </p>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<p class='breadcrumbs'>
  <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <data:blog.pageName/>
</p>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <p class='breadcrumbs'>
      <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <data:blog.pageName/>
    </p>
</b:if>
<b:if cond='data:blog.searchLabel'>
    <p class='breadcrumbs'>
      <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <data:blog.pageName/>
    </p>
</b:if>

<!--breadcrumbs end-->
================================================================


Step 3: Save the file now.

Save your file properly and refresh your page.

Congratulations! You're done. 

Post a Comment

7 Comments

  1. Hello sir, How to change breadcrumbs color.

    ReplyDelete
  2. nice info but not working with all blogger theme can you do this for me.

    ReplyDelete
  3. Replies
    1. You can send your message in our facebook page : facebook.com/bdmotiontech

      Delete
  4. Replies
    1. Thanks for your time, please try again watch the video properly. Hope it will work. Else, let us know again, we will work on it.

      Delete
  5. dear as you have not given access to copy the breadcrumbs in ur site and ctrl c not working and right copy disabled.. what a plan

    ReplyDelete