Membuat Breadcrumb di Blogspot

Di samping Responsive Drop Down Menu sebagai Navigasi Utama, Blog perlu memiliki breadcrumb trail sebagai skema navigasi sekunder. Breadcrumb mengungkapkan lokasi pengguna dalam blog. Sebagaimana dongeng Hansel dan Gretel, pengunjung seperti dua anak dalam dongeng yang menelusuri remah roti sebagai jejak untuk pulang ke rumah, pengunjung web menggunakan breadcrumb untuk menelusuri jejak ke halaman Beranda Blog.

Langkah-Langkah Membuat Breadcrumb

Untuk membuat breadcrumb di blogspot, ada tiga langkah :

Mempersiapkan CSS
Menyiapkan Markups Kode
Menyisipkan kode pemanggil

Mempersiapkan CSS

Langkah Pertama adalah menyiapkan CSS. Sisipkan kode CSS dalam bagian

 <b:skin><![CDATA[
.........
]]></b:skin>

Kode CSSnya :

/* CSS untuk breadcrumb */
ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
}
ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}
ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}
/* CSS untuk breadcrumb */

Atau versi yang diminifikasi di cssminifier:

ul.breadcrumb{padding:10px 16px;list-style:none;background-color:#eee}ul.breadcrumb li{display:inline;font-size:18px}ul.breadcrumb li+li:before{padding:8px;color:#000;content:"/\00a0"}ul.breadcrumb li a{color:#0275d8;text-decoration:none}ul.breadcrumb li a:hover{color:#01447e;text-decoration:underline}

Menyisipkan kode markup breadcrumb

Sisipkan markup kode breadcrumbs diatas kode

</head>

<b:defaultmarkups>
<b:defaultmarkup type='Blog'>
 <b:includable id='breadcrumbs' var='posts'>
<ul class='breadcrumb' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
  <li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</li>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop index='num' values='data:post.labels' var='label'>
<li itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</li>
</b:loop>
<li><data:post.title/></li>
<b:else/>
<li>Tanpa Label</li>
<li><data:post.title/></li>
</b:if>
</b:loop>
<b:else/>
<b:switch var='data:blog.pageType'>
<b:case value='static_page'/>
<li><data:blog.pageName/></li>
<b:case value='archive'/>
<li>Arsip untuk <data:blog.pageName/></li>
<b:default/>
  <b:if cond='data:blog.pageName == &quot;&quot;'>
  <li>Seluruh Pos</li>
  <b:else/>
 <li>Post di dalam <data:blog.pageName/></li>
</b:if>
</b:switch>
</b:if>
</ul>
</b:includable>
</b:defaultmarkup>
</b:defaultmarkups>

Menyisipkan Kode Pemanggil Breadcrumbs

Buka barisan kode widget Blog1

<b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog' version='2' visible='true'>

Temukan baris kode :

<b:includable id='main' var='this'>

Sisipkan kode :

<b:include data='posts' name='breadcrumbs'/>

Menguji Breadcrumbs

Selain penampilan fisik breadcrumbs, uji dengan Google Rich Results Test

Jika benar google akan menampilkan pesan :

Page is eligible for rich results

Say About