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 anda tertarik silakan dicoba....