Menu Navigasi diatas Posting (Breadcrumb) pada Blogger

Menu navigasi berurutan di atas posting atau istilahnya disebut breadcrumb, merupakan cara efektif untuk memberikan kemudahan pengunjung dalam melihat label atau kategori posting suatu blog, disamping itu dari segi SEO Google sudah support / mendukung breadcrumb ini. Membuatnya kita bisa menggunakan script ciptaan hoctro di hoctro.blogspot.com

Langkah Cara Membuat Breadcrumb Pada Blogger, silahkan ikuti langkah-langkah berikut :

• Pastikan anda sudah membuat label/kategori
• Login ke Blogger.
• Pilih Rancangan.
• Pilih Edit HTML
• Beri tanda centang pada Expand Template Widget.

Cari kode berikut ini.

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

Letakkan breadcrumb script berikut diatasnya.

<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>

Cari lagi kode berikut.

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

Letakkan kode berikut diatasnya.

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

Selanjutnya cari kode ]]></b:skin>, dan letakkan barisan kode cssbreadcrumb dibawah ini tepat diatasnya.

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

Klik tombol simpan template, selesai
Kalau sampeyan tertarik silakan dicoba....