[Blogger]Soho Light用パンくずリスト

Blogger テーマ Sohoにパンくずリストを追加する の続きです

リストタグに入れました

Contempo, Emporio, Notable, Essential でもokだと思います

<h3 class='post-title entry-title'> の上に
<b:include data='posts' name='breadcrumb'/> を追加

<b:includable id='bylineByName' var='byline'> の上に以下Codeを追加

Code:

                <b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<ol class='breadcrumb' typeof='BreadcrumbList' vocab='https://schema.org/'>
<li property='itemListElement' typeof='ListItem'><a expr:href='data:blog.homepageUrl' property='item' typeof='WebPage'><span property='name'><data:messages.home/></span></a>
<meta content='1' property='position'/></li>
<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 == &quot;true&quot;' -->
<li property='itemListElement' typeof='ListItem'><a expr:href='data:label.url' property='item' typeof='WebPage'><span property='name'><data:label.name/></span></a>
<meta content='2' property='position'/></li>
<!-- /b:if -->
</b:loop>
<b:else/>
</b:if>
<li><data:post.title/></li>
</b:loop>
</ol>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<ol class='breadcrumb' typeof='BreadcrumbList' vocab='https://schema.org/'>
<li property='itemListElement' typeof='ListItem'><a expr:href='data:blog.homepageUrl' property='item' typeof='WebPage'><span property='name'><data:messages.home/></span></a>
<meta content='1' property='position'/></li>
<li><data:blog.pageName/></li>
</ol>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<ol class='breadcrumb' typeof='BreadcrumbList' vocab='https://schema.org/'>
<li property='itemListElement' typeof='ListItem'><a expr:href='data:blog.homepageUrl' property='item' typeof='WebPage'><span property='name'><data:messages.home/></span></a>
<meta content='1' property='position'/></li>
<li><data:blog.pageName/></li>
</ol>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

(ページは入れてないです)

CSS

ol.breadcrumb {
  padding: 0px 0px;
}
ol.breadcrumb li {
  display: inline;
  font-size: 14px;
}
ol.breadcrumb li+li:before {
  padding: 0px;
  content: "/¥00a0";
}

こっちの方がCSSはシンプルかなと思います

Demo > https://s-o-h-o.blogspot.com/