Membuat Menu Breadcumps Pada Blog

Kali ini saya akan membahas tentang cara Membuat Menu Breadcumps Pada Blog, Menu ini adalah menu navigasi yang berada di atas sebuah postingan yang berfungsi untuk memudahkan para pengunjung melihat kategori postingan

Selain itu dari segi SEO (Search Engine Optimmization) Google sudah mendukung Menu Breadcumps ini. untuk Contohnya bisa dilihat seperti menu di atas postingan ini :

Untuk Membuat Menu Breadcumps bisa mengikuti langkah-langkah di bawah ini :

1. Log In ke akun Blog agan
2. Pilih Rancangan lalu pilih Edit HTML
3. Seperti biasa Download Template Lengkap untuk berjaga-jaga bila terjadi kesalahan
4. Centang Expand Widget Template
5. Cari kode di bawah ini, untuk memudahkan pencarian bisa menggunakan Ctrl+F

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

6. Setelah ketemu Letakkan kode di bawah ini tepat di atas kode diatas. aduuh pusing nieh nulisnya. tapi ngerti kan.

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

7. Lalu cari kembali kode di bawah ini :

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

8. Apabila sudah ketemu. Letakkan kode di bawah ini tepat di atas kode di atas. he he

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

9. Untuk langkah terakhir cari kode ]]></b:skin> lalu letakkan kode css breadcumbs di bawah ini tepat di atasnya.

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

10. Tinggal Save atau Simpan Template lalu lihat hasilnya.

Catatan : Menu Navigasi Breadcumps ini hanya akan terlihat di atas sebuah postingan yang di buka, bukan Postingan yang ada pada Halaman Utama Blog.

Oke deh Sekian postingan kali ini tentang cara Membuat Menu Breadcumps Pada Blog Selamat Mencoba dan semoga berhasil.