Menu Navigasi Breadcrumb

Mungkin banyak yang sudah tahu apa itu menu navigasi breadcrumb dan apa fungsi dari menu tersebut pada suatu blog. Tapi mungkin ada juga yang belum mengetahui apa itu menu navigasi breadcrumb.

Disini saya akan berbagi sedikit tips bagaimana cara mudah membuat menu navigasi breadcrumb di blogger.

Navigasi breadcrumb adalah kumpulan beberapa link/tautan yang memungkinkan anda untuk menemukan halaman dasar dari artikel yang sedang anda baca.

Link yang ditampilkan di sini adalah link dimana artikel anda berada atau bisa disebut sebagai lokasi dari artikel anda. Navigasi breadcrumb ini biasa diletakkan di atas judul artikel/postingan. Lihat contoh navigasi breadcrumb berikut.

Home »Blogger Tips » Menu Navigasi Breadcrumb

Browse: Home » bisnis » toko online » Jual Pulsa Online, atau lihat bagian atas blog ini.

Ada 3 manfaat/kegunaan dari menu navigasi breadcrumb, yaitu:

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

Yang terpenting dari 3 hal di atas tentu adalah "mengoptimalkan halaman di search engine" atau sering disebut SEO.
Breadcrumb navigation mungkin tidak sepenting keyword dalam SEO. Tapi yang jelas menu navigasi breadcrumb ini merupakan salah satu dari faktor SEO. Jadi, sedikit banyaknya juga akan mempengaruhi posisi blog anda di search engine, terutama google.


Navigasi breadcrumb di blogspot akan tampil berdasarkan label/tag dari postingan anda. Berikut tutorialnya.

   1. Masuk ke blogger.
   2. Pilih menu Tata Letak (Layout) » Edit HTML.
   3. Centang tulisan Expand Widget Templates.
   4. Cari kode berikut.

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

   5. Tambahkan kode berikut di bawahnya.

<b:if cond='data:blog.pageType == "item"'>
      <a href='http://namablog.blogspot.com/'>Home</a> &#187;
      <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
      <b:if cond='data:label.isLast != "true"'>,</b:if>
      </b:loop>
      &#187;
      </b:if>
      <data:post.title/>
      </b:if>

 jangan lupa ganti tulisan warna biru dengan nama blog anda.

   6. Simpan Template

Anda bisa menambahkan garis di bawah navigasi dengan menambahkan kode <hr/> di bawah kode <data:post.title/> di atas.

Silahkan dicoba dan semoga berhasil.
best regards,