Navigasi Breadcrumb adalah Navigasi Menu untuk mempermudah pengunjung website/blog melacak lokasi dalam dokumen dan kembali ke awal dengan mudah. Navigasi Breadcrumb sendiri biasanya diletakkan di atas judul artikel/postingan.

• Memperindah tampilan halaman/artikel.
• Memudahkan pengunjung dalam menelusuri website/blog.
• Mengoptimalkan halaman di search engine (mesin pencari).

1. Login ke Blogger, Masukan Username & Password.
2. Klik Rancangan >> Edit HTML.
3. Centang tulisan Expand Template Widget.
4. Cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian).

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

5. Setelah ketemu, letakkan Script dibawah ini tepat diatas nya (Script no. 4).

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

<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
  <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 Hack -->
</b:includable>

6. Kemudian Cari lagi kode berikut.

   <b:if cond='data:post.dateHeader'>

7. Setelah ketemu, letakkan Script dibawah ini tepat diatas nya (Script no. 6).

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

8. Sekarang cari kode berikut.

   ]]></b:skin>

9. Setelah ketemu, letakkan Script CSS dibawah ini tepat diatas nya (Script no. 8).

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

10. Klik Simpan Tempalate dan Selesai.