Breadcrumbs for Blogger

Breadcrumbs are navigational elements that are used to display the depth at which a user currently is in a website. Normally they are present near the top preferably just above post heading or the main heading of a page. In Blogger there are no real sub-directories for which you can show a hierarchical path so we will be using Labels as workaround. We will also be discussing how to display single or multiple Labels in Breadcrumbs and how you make them appear in Google Search Results using Microdata specification

==============
(Vụn bánh mì là yếu tố định hướng được sử dụng để hiển thị độ sâu mà tại đó một người sử dụng hiện đang trong một trang web. Thông thường họ có mặt gần đầu tốt ngay trên bài viết tiêu đề hoặc tiêu đề chính của một trang. Trong Blogger không có thực thư mục con mà bạn có thể hiển thị một con đường thứ bậc vì vậy chúng tôi sẽ sử dụng nhãn như cách giải quyết khác. Chúng tôi cũng sẽ thảo luận về cách hiển thị Nhãn một hoặc nhiều trong Breadcrumbs và làm thế nào bạn làm cho họ xuất hiện trong kết quả tìm kiếm của Google sử dụng Microdata đặc điểm kỹ thuật)

Demo

Step by Step Guide

1. Go to Template > Edit HTML and tick the Expand Widget Preview Option

2. Now search for <div class='blog-posts hfeed'> and add the following code after it

01<b:if cond='data:blog.homepageUrl != data:blog.url'> 

02  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

03    <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>

04      <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>  

05      <a expr:href='data:blog.url'> <span itemprop='title'><data:blog.pageName/></span> </a>

06    </div>

07 <b:else/>

08  <b:if cond='data:blog.pageType == &quot;item&quot;'>

09    <b:loop values='data:posts' var='post'>

10       <b:if cond='data:post.labels'>

11         <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>

12           <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a> 

13           <b:loop values='data:post.labels' var='label'>

14            <b:if cond='data:label.isLast == &quot;true&quot;'>

15             <a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a> 

16             </b:if>

17           </b:loop>

18          </div>

19         <b:else/>

20          <div class='breadcrumbs ' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>

21           <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a> 

22           <a href='#'><span> Unlabelled</span></a>

23         </div>

24       </b:if>

25     </b:loop>

26   <b:else/>

27    <b:if cond='data:blog.pageType == &quot;archive&quot;'>

28      <div class='breadcrumbs ' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>

29       <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>  

30       <a expr:href='data:blog.url'><span>Archives for <data:blog.pageName/></span></a>

31      </div>

32   <b:else/>

33    <b:if cond='data:blog.pageType == &quot;index&quot;'>

34      <b:if cond='data:blog.pageName == &quot;&quot;'>

35      <b:else/>

36       <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>

37        <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>

38        <a expr:href='data:blog.url'><span itemprop='title'>Posts filed under <data:blog.pageName/></span></a>

39       </div>

40     </b:if>

41    </b:if>

42   </b:if>

43  </b:if>

44 </b:if>

45</b:if>

You might find multiple instances of the term to be searched , add the code only under that , where you can see this code --> <b:includable id='main' var='top'>

3. Now search for ]]></b:skin> and add the following CSS just before it

01.breadcrumbs {

02list-style: none;

03margin: 0;

04}

05.breadcrumbs  a {

06color: #666;

07display: inline-block;

08font-size: 12px;

09margin-left: -15px;

10padding: 7px 17px 11px 25px;

11position: relative;

12text-decoration: none;

13vertical-align: top;

14background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNJJjbhPoev7DwmgGZsjpQ_8CdSnBNiULaQV2CG3VPs33Ynr8wU9lcxpz6LpXlKABV-XetybjkJYd_B0huUMaceO3Q5WWKLNMSEukw_9ipqcrAgYb58sQxgUfNQynkKve6azac1ZlrBdVV/s1600/hc_yarnlett_global.png');

15background-repeat: no-repeat;

16background-position: 100% 0;

17z-index: 1;

18}

19.breadcrumbs  a:hover   {

20background-position: 100% -48px;

21color: #333;

22}

23.first , .first:hover {z-index: 30 !important;}

24.first span {

25background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNJJjbhPoev7DwmgGZsjpQ_8CdSnBNiULaQV2CG3VPs33Ynr8wU9lcxpz6LpXlKABV-XetybjkJYd_B0huUMaceO3Q5WWKLNMSEukw_9ipqcrAgYb58sQxgUfNQynkKve6azac1ZlrBdVV/s1600/hc_yarnlett_global.png');

26margin-left: -26px;

27padding: 7px 6px 11px 10px;

28z-index: 12 !important;}

29.breadcrumbs a:nth-child(2) {z-index:29 !important;}

30.breadcrumbs a span:hover {

31background-position: 0 -48px;

32color: #333;

33}

4. Save Your Template and Now the Breadcrumbs are going to start appearing in your Post Pages , Label Pages , Archive Pages as well as the Static Pages

Some Options

Display Single or Multiple Labels
The above code just shows the Last assigned Label of the post as the breadcrumb, If you want to show all the Labels as Breadcrumbs then Remove the highlighted Lines in Step 2 (Number 14 and 16) and add the following CSS

breadcrumbs a:nth-child(3) {z-index:28 !important;}

breadcrumbs a:nth-child(4) {z-index:27 !important;}

breadcrumbs a:nth-child(5) {z-index:26 !important;}

breadcrumbs a:nth-child(6) {z-index:25 !important;}

breadcrumbs a:nth-child(7) {z-index:24 !important;}

breadcrumbs a:nth-child(8) {z-index:23 !important;}

breadcrumbs a:nth-child(9) {z-index:22 !important;}

breadcrumbs a:nth-child(10) {z-index:21 !important;}

breadcrumbs a:nth-child(11) {z-index:20 !important;}

breadcrumbs a:nth-child(12) {z-index:19 !important;}

breadcrumbs a:nth-child(13) {z-index:18 !important;}

In my experience displaying multiple Labels in Breadcrumbs cost me the Authorship in Google Search. So I suggest using a Single Label only . If you want to use Multiple Labels then I suggest to remove the Microdata specification from it so that there is no risk involved. I don't at all want you to lose your Google Authorship. I will be doing a detailed post about it soon.

What is responsible for making them appear in the Google

This is due to Microdata specification used in code. It uses simple HTML tags and attributes to assign descriptive names to items and properties. Google understands it ,interprets them and show them in the serch results

Design

The design this widget uses is the design being used by Google Support currently. It is simple and aesthetic. I will be sharing some more Breadcrumb designs in the days to come.

Who Wrote this Code

This code was originally written by Hoctro , then modified by BloggerPlugins to include the RDFa specification and some other improvements. I have replaced the RDFa Specification by the Microdata Specification as it more expressive and easier to understand . Also some minor changes have been done to the if-else ladder and a completely different design is used.

In case there is some problem while implementing it or using it then feel free to ask in the comments