Add Manageable Stylish Breadcrumb in Blogger

Saturday, November 24, 2018 | By Blak

When visiting on news site, maybe we found a breadcrumb trail of its post, showing a category of the post. We can easily add a label of each post below the title of the post, but it is not manageable, or we should call it a label category instead of a breadcrumb.

Label category shown in the post is sorted alphabetically, we can make it manageable and so-called breadcrumbs. If you see the post Create Real Breadcrumb on blogspot you can see how do we create manageable label category so it is not sorted alphabetically, we can choose which label should be positioned on the last position.

In this post, we want to add breadcrumb everywhere, if the current view is search or label page or archive page (data:view.isMultipleItems), we place the breadcrumb below the title of the post, and if current view is post or article page (data:view.isPost) we place the breadcrumb above the title of the post.

The Source Code

This code is in three part, first is the caller and the second is the inclusion, it's like a javascript function are we can call it anywhere, and the third is inline style CSS template.

The Caller

<b:include name='Blakbin-breadcrumb'/>

The Inclusion

<b:includable id='Blakbin-breadcrumb'>
<div class='breadcrumb-wrapper'>
<b:with value='["Drink","Food"]' var='mainList'>
<b:if cond='data:post.labels any (l => l.name in data:mainList)'>
<ul class='breadcrumb-list'>
<b:if cond='data:view.isPost'>
<b:attr name='itemscope' value='itemscope'/>
<b:attr name='itemtype' value='http://schema.org/BreadcrumbList'/>
<li><a href='/'>Home</a></li>
</b:if>
<b:loop values='data:post.labels where (l => l.name in data:mainList)' var='blak'>
<b:include data='{ label: data:blak.name, url: data:blak.url }' name='Blakbin-breadcrumb-list'/>
<b:switch var='data:blak.name'>
<b:case value='Drink'/>
<b:with value='["Juice","Water","Milk"]' var='subList'>
<b:loop values='data:post.labels where (l => l.name in data:subList)' var='bin'>
<b:include data='{ label: data:bin.name, url: data:bin.url }' name='Blakbin-breadcrumb-list'/>
</b:loop>
</b:with>
<b:case value='Food'/>
<b:with value='["Meat"]' var='subList'>
<b:loop values='data:post.labels where (l => l.name in data:subList)' var='bin'>
<b:include data='{ label: data:bin.name, url: data:bin.url }' name='Blakbin-breadcrumb-list'/>
<b:switch var='data:bin.name'>
<case value='Meat'/>
<b:with value='["Poultry","Red Meat"]' var='subList'>
<b:loop values='data:post.labels where (l => l.name in data:subList)' var='bin2'>
<b:include data='{ label: data:bin2.name, url: data:bin2.url }' name='Blakbin-breadcrumb-list'/>
<b:switch var='data:bin2.name'>
<case value='Poultry'/>
<b:with value='["Chicken","Turkey"]' var='subList'>
<b:loop values='data:post.labels where (l => l.name in data:subList)' var='bin3'>
<b:include data='{ label: data:bin3.name, url: data:bin3.url }' name='Blakbin-breadcrumb-list'/>
<b:switch var='data:bin3.name'>
<case value='Chicken'/>
<b:with value='["Drumstick","Wings"]' var='subList'>
<b:loop values='data:post.labels where (l => l.name in data:subList)' var='bin4'>
<b:include data='{ label: data:bin4.name, url: data:bin4.url }' name='Blakbin-breadcrumb-list'/>
</b:loop>
</b:with>
</b:switch>
</b:loop>
</b:with>
<case value='Red Meat'/>
<b:with value='["Goat","Lamb","Beef"]' var='subList'>
<b:loop values='data:post.labels where (l => l.name in data:subList)' var='bin3'>
<b:include data='{ label: data:bin3.name, url: data:bin3.url }' name='Blakbin-breadcrumb-list'/>
</b:loop>
</b:with>
</b:switch>
</b:loop>
</b:with>
</b:switch>
</b:loop>
</b:with>
</b:switch>
</b:loop>
</ul>
</b:if>
</b:with>
</div>
</b:includable>
<b:includable id='Blakbin-breadcrumb-list'>
<li class='breadcrumb-item'>
<b:if cond='data:view.isPost'>
<b:attr name='itemprop' value='itemListElement'/>
<b:attr name='itemscope' value='itemscope'/>
<b:attr name='itemtype' value='http://schema.org/ListItem'/>
<a expr:href='data:url' itemprop='item' itemtype='http://schema.org/Thing'>
<span itemprop='name'><data:label/></span>
</a>
<b:if cond='data:label == data:blak.name'>
<meta expr:content='data:i +1' itemprop='position'/>
<b:elseif cond='data:label == data:bin.name'/>
<meta expr:content='data:i +2' itemprop='position'/>
<b:elseif cond='data:label == data:bin2.name'/>
<meta expr:content='data:i +3' itemprop='position'/>
<b:elseif cond='data:label == data:bin3.name'/>
<meta expr:content='data:i +4' itemprop='position'/>
<b:elseif cond='data:label == data:bin4.name'/>
<meta expr:content='data:i +5' itemprop='position'/>
</b:if>
<b:else/>
<a expr:href='data:url'><span><data:label/></span></a>
</b:if>
</li>
</b:includable>

This is the RAW source code to create a breadcrumb trail for blogger blogspot blog. To used it we must manage our post label and change the value to our own post label.

The CSS Style

.breadcrumb-list {
margin: 0;
padding: 0;
}
.breadcrumb-wrapper {
background: white; /* background of the breadcrumb */
display:inline-block;
width:100%
}
.breadcrumb-wrapper li {
display:inline
}
.breadcrumb-wrapper ul>li:not(:first-child):before {
content:"\203a"; /* The symbol */
color: silver; /* Symbol color*/
font-size: larger; /* Symbol font size */
padding: 0 5px;
}
/* Label link */
.breadcrumb-wrapper a {
color: rgba(0,0,0,.54);
transition: color .2s;
font-size:14px;
}
/* Label link hovered */
.breadcrumb-wrapper a:hover {
color: rgba(0,0,0,.87);
}
/* set display to none if you want to make
breadcrumb dissapear on device hase screen
equal or less than 1024px */
@media screen and (max-width: 1024px) {
.breadcrumb-wrapper {
display: inline-block;
}

This is CSS to style the breadcrumb, it can be installed onto <b:skin> part or create inline style wrapped with <style> and </style>

How to use the Source Code

To create a breadcrumb from source code above, we must manage our post label then adapt to the source code. Above code have taxonomy like this

Structure

[B] Drinks
  - [B1] Juice
  - [B1] Water
  - [B1] Milk

[B] Food 
  - [B1] Meat
       - [B2] Poultry
            - [B3] Chicken
                 - [B4] Drumstick
                 - [B4] Wings
            - [B3] Turkey
       - [B2] Red Meat
            - [B3] Goat
            - [B3] Lamb
            - [B3] Beef

This is the result of the above source code. We have two main categories 'Food' and 'Drink'. The 'Juice, Water and Milk' are classified to the 'Drink' category, while in the 'Food' have 'Meat' category. Now in the 'Meat' category, we have two kinds of meat, 'Poultry' and 'Red Meat', as you can see in the 'Poultry' have another different kind.

Our job is to manage the label in Blog to be adapted to the source code above. Decide which label to be the main category and which label are classified to them.

Editing the Source Code

The code after editing can be less or longer depending on how much structure that we have. The code is basically repeated same code with little difference, it uses the blogger <switch> tag to create a node. We have two inclusion in this source code, Blakbin-breadcrumb, and Blakbin-breadcrumb-list. now, lets split the source.

The [Blakbin-breadcrumb] Inclusion.

The Main Part

<b:includable id='Blakbin-breadcrumb'>
<div class='breadcrumb-wrapper'>
<b:with value='["Drink","Food"]' var='mainList'>
    <b:if cond='data:post.labels any (l => l.name in data:mainList)'>
    <ul class='breadcrumb-list'>
    <b:if cond='data:view.isPost'>
        <b:attr name='itemscope' value='itemscope'/>
        <b:attr name='itemtype' value='http://schema.org/BreadcrumbList'/>
        <li><a href='/'>Home</a></li>
    </b:if>
        <b:loop values='data:post.labels where (l => l.name in data:mainList)' var='blak'>
            <b:include data='{ label: data:blak.name, url: data:blak.url }' name='Blakbin-breadcrumb-list'/>
        <!-- Switchs Code Drink and Food Here -->
        </b:loop>
    </ul>
    </b:if>
</b:with>
</div>
</b:includable>

This the code before we give any switch tag. In this part, just change the 'Drink' and 'Food' with our label which is decided to be the main category. In this part, you can see where we can add the switch code, it's before the loop end.

The breadcrumb code in this example has a Microdata element which is activated only if the Blog current view is a Blog Post or Article, this will create breadcrumb rich snippet in Google Search, resulting like below picture.

Switch code block of Main Part

<b:switch var='data:blak.name'>
    <b:case value='Drink'/>
        <b:with value='["Juice","Water","Milk"]' var='subList'>
        <b:loop values='data:post.labels where (l => l.name in data:subList)' var='bin'>
            <b:include data='{ label: data:bin.name, url: data:bin.url }' name='Blakbin-breadcrumb-list'/>
        </b:loop>
        </b:with>
    <b:case value='Food'/>
        <b:with value='["Meat"]' var='subList'>
        <b:loop values='data:post.labels where (l => l.name in data:subList)' var='bin'>
            <b:include data='{ label: data:bin.name, url: data:bin.url }' name='Blakbin-breadcrumb-list'/>
        <!-- Switchs code for Meat Here -->
        </b:loop>
        </b:with>
</b:switch>

In the switch, there is data:blak.name which is an alias from our mainList <b:loop> var value, this will tell the parser we want to switch this data.

As you can see between two case Drink and Food the code look same, the difference is in the value of <b:with> tag. If we have another case in the mainList, we can add more value in the <b:with> tag separated by comma and quoted e.g ["Drink","Food","Fruit"] and add the case code like below code before </b:switch> end, or if there is only one category in the mainList we can remove the other case.
This is a level 1 in the structure [B1] we give variable name 'bin' in the <b:loop> tag and in the <b:include> tag.

Case Form code block

   <case value='what case?'/>
       <b:with value='["with this","this","and this"]' var='subList'>
       <b:loop values='grab label name match with var -subList-' var='bin'>
           <b:include data='this var -bin- data label and url forward to' name='Blakbin-breadcrumb-list'/>
       <!-- statement to switch here -->
       </b:loop>
       </b:with>

Now, let us add switch code to the case 'Food'.

<b:case value='Food'/>
    <b:with value='["Meat"]' var='subList'>
    <b:loop values='data:post.labels where (l => l.name in data:subList)' var='bin'>
        <b:include data='{ label: data:bin.name, url: data:bin.url }' name='Blakbin-breadcrumb-list'/>
    <b:switch var='data:bin.name'>
        <case value='Meat'/>
            <b:with value='["Poultry","Red Meat"]' var='subList'>
            <b:loop values='data:post.labels where (l => l.name in data:subList)' var='bin2'>
                <b:include data='{ label: data:bin2.name, url: data:bin2.url }' name='Blakbin-breadcrumb-list'/>
            <!-- Switch code for Poultry and Red Meat Here -->
            </b:loop>
            </b:with>
    </b:switch>
    </b:loop>
    </b:with>

In this Food case is only have single value 'Meat', if there is more we can add the value in the <b:with> and add new case like above mainList, but with a different variable name in <b:loop>. In case this 'Meat' is level 2 or [B2] we give var='bin2' as variable name.

In the <b:switch> there is data:bin.name its an alias from variable name in <b:loop> tag which belong to 'Food' case. What we got this far, <b:switch> tag come to switch parent data to add value to its child.

The switch form

<b:switch value='which data'>
   <case value='what case?'/>
       <b:with value='["with this","this","and this"]' var='subList'>
       <b:loop values='grab label name match with var -subList-' var='bin[*]'>
           <b:include data='this var -bin[*]- data label and url forward to' name='Blakbin-breadcrumb-list'/>
       <!-- statement to switch here -->
       </b:loop>
       </b:with>
   <case value='second case!'/>
       <b:with value='["with this","and this"]' var='subList'>
       <b:loop values='grab label name match with var -subList-' var='bin[*]'>
           <b:include data='this var -bin[*]- data label and url forward to' name='Blakbin-breadcrumb-list'/>
       <!-- statement to switch here -->
       </b:loop>
       </b:with>
</b:switch>

Like the raw source code, to add switch to the case 'Meat' which have to value 'Poultry and Red Meat we can add like above switch form code. If the parent have variable name 'bin2' now in the child we give a variable name 'bin3', if 'bin3' has child, we give the child variable name 'bin4' and so on will be the same.

The [Blakbin-breadcrumb-list] Inclusion.

Second Inclusion

<b:includable id='Blakbin-breadcrumb-list'>
    <li class='breadcrumb-item'>
    <b:if cond='data:view.isPost'>
        <b:attr name='itemprop' value='itemListElement'/>
        <b:attr name='itemscope' value='itemscope'/>
        <b:attr name='itemtype' value='http://schema.org/ListItem'/>
        <a expr:href='data:url' itemprop='item' itemtype='http://schema.org/Thing'>
            <span itemprop='name'><data:label/></span>
        </a>
        <b:if cond='data:label == data:blak.name'>
            <meta expr:content='data:i +1' itemprop='position'/>
        <b:elseif cond='data:label == data:bin.name'/>
            <meta expr:content='data:i +2' itemprop='position'/>
        <b:elseif cond='data:label == data:bin2.name'/>
            <meta expr:content='data:i +3' itemprop='position'/>
        <b:elseif cond='data:label == data:bin3.name'/>
            <meta expr:content='data:i +4' itemprop='position'/>
        <b:elseif cond='data:label == data:bin4.name'/>
            <meta expr:content='data:i +5' itemprop='position'/>
        </b:if>
    <b:else/>
        <a expr:href='data:url'><span><data:label/></span></a>
    </b:if>
    </li>
</b:includable>

In this inclusion, we can see an <b:attr> tag which is give attribute to the HTML <li> tag if is in the Post article only. The attribute is used for Microdata Rich snippet breadcrumb in the Google Search Result.
In the second <b:if> tag it will give HTML meta tag which give number to each label as position required by Microdata. In the raw source code, we have 4 level in the list, if there is more we must give another condition to give another <meta> tag. For example the level 5 label we give another <b:elseif> condition before </b:if> end.

<b:elseif cond='data:label == data:bin5.name'/>
    <meta expr:content='data:i +6' itemprop='position'/>

How to add Blogger Breadcrumb

On this breadcrumb code, it designed to run in the 'post' inclusion <b:includable id='post' var='post'>. Before install, we must place the inclusion and the CSS style code.

In the Blogger Dashboard, click on 'Theme'
Click on 'Edit HTML' button.
Now Adding the CSS style part to the template. Find the line of ]]></b:skin> in the XML template and paste the CSS code above that line.
Next, add the inclusion. Click on 'Jump to Widget' and choose 'Blog1'
Add a new blank line after 'Blog1' Widget
Copy your edited Two Inclusion Code and Paste onto the new blank line.
Once collapsed, our code will look like image below.

Installing The Caller Code of Breadcrumb
To installing the breadcrumb we can paste the Caller code anywhere into the part we want to be displayed, the 'post' inclusion has multiple parts, the title of the post, the body of the post, and the footer of the post. As this example we want to place the breadcrumb above post title if the current view posts article page, and for other pages such as Homepage, Search and Label page, we place the breadcrumb below the post title.

In Blog1 widget find <b:includable id='post' var='post'>
For newer Blogger template, like Soho, Contempo, Emporio, Notable you can found on the inclusion <b:includable id='postTitle' var='post'>.
Now find where the post title or known as data:post.title is located, and make litle edit in that part.

Example Post Title Code Block of Blogger Template

<b:if cond='data:post.title'>
    <h3 class='post-title entry-title' itemprop='name'>
    <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
    <b:else/>
        <data:post.title/>
    </b:if>
    </h3>
</b:if>

Post Title part after editing

<b:if cond='data:view.isPost'>
    <b:include name='Blakbin-breadcrumb'/>
</b:if>
<b:if cond='data:post.title'>
    <h3 class='post-title entry-title' itemprop='name'>
    <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
    <b:else/>
        <data:post.title/>
    </b:if>
    </h3>
</b:if>
<b:if cond='data:view.isMultipleItems'>
    <b:include name='Blakbin-breadcrumb'/>
</b:if>

This is block post title code after editing, if we want to get different style we must delete the CSS code in the <b:skin> and place the css code with <style> paste CSS Code here <style> before Blakbin-breadcrumb include tag on each condition.

    <style>
        Paste CSS Code Here
    </style>
    <b:include name='Blakbin-breadcrumb'/>

Save template after finish editing
Now Check our Blog data Structure with Google Structured Data Testing Tools and pick 1 random Blog post URL to be check for breadcrumb validity there. If there is no Error in the breadcrumb structure and see an correct numbering on each label, then our job is done.