How To Solve Breadcrumb On Blogger

Breadcrumb is a navigation on a website whose purpose is to help visitors know their location when visiting the website.

Breadcrumb serves to improve navigation on a website such as homepages, tags or others. To overcome this is quite easy, you only need to change the breadcrumbs section in the blog template.

How To Solve Breadcrumb On Blogger

1. Find this code <b:defaultmarkup type='Common'>

2. Put the following parameter code below the above code.

<b:includable id='breadcrumb' var='post'> 
<b:loop values='data:posts' var='post'> 
<b:if cond='data:post.labels'> 
<div class='breadcrumbs'> 
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a class='breadhomepost' expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'><svg class='icons post-HOME' viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#768187'/></svg> Home&amp;nbsp;</span></a></span>&amp;nbsp;&#8250; 
<b:loop values='data:post.labels' var='label'> 
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != &quot;true&quot;'> &#8250; </b:if></span> 
</b:loop><span><data:post.title/></span> 
</div> 
</b:if> 
</b:loop> 
</b:includable>

3. To activated the parameter call with the following code.

<b:include data='post' name='breadcrumb'/>

If you only want to display the full post view post page and static page, the use the conditional tag <b:if cond='data:view.isSingleItem'> so it will be like this.

<b:if cond='data:view.isSingleItem'> 
<b:include data='post' name='breadcrumb'/> 
</b:if>

For number 3, the code can be placed anywhere, whether it's under <div class='post-title-container'> or <article class='post-outer-container'> or <article class='post-outer-container'> or other markup.

Until then, the installation of breadcrumbs on the new blogger HTML is complete. Just the set the style with CSS like the following above the code </style>

.breadcrumbs {font-size:90%;overflow:hidden;color:#ccc;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;display:block;position:relative;margin:0 auto 20px} 
.breadcrumbs .icons{position:absolute;top:0;left:0;width:16px;height:16px;vertical-align:center} 
.breadcrumbs .breadhomepost{position:relative;padding:0 0 0 20px;overflow:hidden} 
.breadcrumbs li{list-style-type:none;display:inline-block;float:left} 
.breadcrumbs span a {color:#777;padding:0 3px;} 
.breadcrumbs >span:last-child {width:0;color:#999;font-weight:400;padding:0 0 0 3px} 
.breadcrumbs span a:hover {color:#333;} 
.breadcrumbs a:hover {color:#333;}

If the blogger template doesn't have the code like in number 1, then all you have to do is add the following code above the </head>

<b:defaultmarkups> 
      <b:defaultmarkup type='Common'> 
//put the breadcrumbs parameter here (step 2), basically here it contains the parameter syntax that will appear on the post page and outside the post.
      </b:defaultmarkup> 
    </b:defaultmarkups>

You can put anything on the outside and inside of the post. It can even display post date, share widget, comments count widget on popular post and featured post widgets.