How To Add Breadcrumbs to Blogger

How To Add Breadcrumbs to Blogger: Breadcrumb is the navigation trail which tells about location on our site or blog to visitors. It tells readers, where (on which page) they actually are on our blog. it help to clear the structure of website to user also user can understand now where is he/she.
Breadcrumb navigation is used to create a user friendly website. Using it, readers can easily navigate to your blog by just clicking a link or few. Like in the below image, if you are on Step 3 (like: Social Media > Google Plus > Traffic) then you can easily come back to Social Media category by simply clicking on Step 1 shown on the breadcrumbs.
It also helps to increase your site’s ranking in search engines by adding keywords into your blog posts.

Adding Breadcrumb Navigation in Blogger

Note: You must backup your blog template first before adding breadcrumb navigation in your blog.

Now follow below steps to Add Breadcrumb in blogger:

• Go to Blogger Dashboard > Template > Edit HTML
• Now press Ctrl+ F and Search for below code.

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

You can see the line in below code.

Replace this line code with the below one.

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

• Now find this code in your blog template.

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

• Replace it with the below code.

<b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'>
  <b:else/>
  <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:else/>
  <b:if cond='data:blog.pageType == "archive"'>
  <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>
<!–Breadcrumbs by http://www.twoTricks.blogger.com/–>

• Find ]]></b:skin> and paste the below code just above/before it.

/* Breadcrumbs by http://www.twoTricks.com/ */

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

• Now your code is ready. Replace your entire template code with your Notepad file code.

Click on save template button.
You are Done!

How To Add Breadcrumbs in Blogger Summary:

This is all about adding breadcrumb navigation trail in blogger. Add it into your blog and improve user experience. The easier you will make your blog to navigate, the more audience will love to read it again and again. You might be struggling to increase your blog’s traffic and pageviews. If it is so, then I must say, adding breadcrumb navigation is the smart tactic to get more pageviews and Organic traffic. If you are interested to get more traffic to your blog, you must read these Traffic generating ideas on our main blog.