Cara Membuat Breadcrumbs

Breadcrumb merupakan menu navigasi berurutan menurut label yang berfungsi agar pengunjung blog kita mudah mendapatkan kategori dari artikel yang sedang di bacanya.
Ini contoh breadcrumbs

 

Berikut langkah-langkah cara membuatnya:

1.Login ke akun blogger sobat

2.Klik Rancangan-->Edit HTML-->Centang kotak Expand Template Widget

3.Cari kode <b:includable id='main' var='top'>

jika sudah ketemu letakkan kode di bawah ini tepat diatas kode <b:includable id='main' var='top'>

<b:includable id='breadcrumbs' var='post'>

<!-- Breadcrumbs ALDI RAYFALDO PUTRA -->
  <b:if cond='data:blog.pageType == "item"'>
      <p class='breadcrumbs'>
      <span class='post-labels'>
        <b:if cond='data:post.labels'>

          Browse:
          <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  &gt;
          <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast == "true"'>
              <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
            </b:if>
          </b:loop>
          <b:if cond='data:post.title'>
&gt;  <b><data:post.title/></b>
          </b:if>

        </b:if>
      </span>
      </p>
  </b:if>
<!-- End of Breadcrums ALDI RAYFALDO PUTRA -->
</b:includable>

4. Kemudian cari lagi kode <b:if cond='data:post.dateHeader'>
Jika sudah ketemu,letakkan kode di bawah ini tepat di atas kode <b:if cond='data:post.dateHeader'>

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

5.Cari lagi kode ]]></b:skin>
kemudian copy kode di bawah ini tepat di atas kode ]]></b:skin>

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

6.Simpan dan lihat hasilnya.