Cara membuat Navigasi Browse atau breadcrumbs

Cara membuat Navigasi Breadcrumbs - banyak sekali tutorial seputar navigasi blog pengertian defenisi juga manfaat pembuatan navigasi breadrumbs diblog, pasang navigasi breadcrumbs di blog selain mempercantik melengkapi juga menginformasikan posisi letak artikel tersimpan berdasarkan label artikel.

Informasi yang didapatkan ketika megetikan keyword cara membuat navigasi breadcrumbs disitus blog termasuk bagian dari tips optimasi SEO.

Posisi Letak Navigasi Breadcrumbs
Sejujurnya saya sendiri tidak tahu pasti definisi breadcrumbs tersebut apa, biasanya breadcrumbs dipasang secara horizontal tampil pada halaman posting persis dibawah atau diatas judul posting, saat kita membuka suatu artikel maka pada navigasi tersebut akan terlihat urutan posisi postingan yang disertai dengan category label artikel tersebut, sama halnya saat kita membuka explorer dikomputer maka di posisi adress akan terlihat file tersebut disimpan didalam folder apa contoh :

Browse >> Home >> Label >> Judul Posting

Dari contoh simple diatas, terlihat home, label dan judul posting diberi warna merah, karena menu navigasi breadcrumbs tersebut bukan hanya menampilkan semata, melainkan juga terdapat link, lebih jelasnya silahkan lihat navigasi breadcrumbs diatas judul postingan ini. Sebenarnya dari istilah navigasi bisa diambil kesimpulan saat kita mengklik link tersebut maka kita akan pindah kehalaman lain misalnya saat kita klik home maka kita akan kembali kehalaman utama dari web blog tersebut.

Apa Manfaat memasang Menu Navigasi Breadcumbs
Awalnya saya mengira dengan memasang menu navigasi ini hanya untuk mempercantik tampilan atau sebagai pelengkap saja alias tidak ada pengaruhnya, ternyata tidak dengan memasang breadcrumb akan mengurangi bounce rate, dengan adanya link yang mengarah pada artikel posting akan membantu google untuk melakukan index pada judul artikel, lalu bagaimana cara memasang menu navigasi breadcrumb tersebut, berikut cara mudah memasangnya diblog :

Langkah Pertama.
Login ke dasbor blog sobat, masuk kedasbor kemudian pilih edit html, backup template sobat untuk antisipasi, hal ini berguna jika pada saat melakukan perubahan html terjadi kesalahan kita bisa mengembalikannya kekeadaan semula, selanjutnya kembali keedit html dan centang expand widgetnya.

Langkah Kedua
untuk membuat navigasi tersebut, ada script kode yang harus ditambahkan atau sisipkan, kedalam kode html blog kita, dibawah ini ada script yang harus ditambahkan :

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Anda berada di &#187; <a expr:href='data:blog.homepageUrl'>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 != &quot;true&quot;'> , </b:if>
          </b:loop>
        </b:if> &#187; <data:post.title/>
  </div>
</b:if>
</b:if>

Kode script diatas ada yang diberi warna merah silahkan sobat ganti sendiri, misal "anda berada di" ganti dengan "Browse", Home ganti dengan ....., apalah yang sobat ingin ganti, nah dimanakah kode tadi disisipkan atau ditempatkan ?

cari kode : <div class='post hentry uncustomized-post-template'> tempatkan scrip kode yang baru diatas tadi tepat dibawah kode <div class='post hentry uncustomized-post-template'> atau bisa juga ditempatkan di diatas kode ini : <div class='post-header-line-1'/>

Kira-kira seperti dibawah ini :

<b:includable id='post' var='post'>
  <div class='post hentry'>

    <a expr:name='data:post.id'/>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Anda berada di &#187; <a expr:href='data:blog.homepageUrl'>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 != &quot;true&quot;'> , </b:if>
          </b:loop>
        </b:if> &#187; <data:post.title/>
  </div>
</b:if>
</b:if>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

    <div class='post-header'>
    <div class='post-header-line-1'/>

Langkah Ketiga
Untuk langkah ketiga ini tidak terlalu begitu penting untuk memberikan garis jenis ukuran huruf dibawah navigasi breadcrumbs tersebut atau sebagai tambahan Personalisasi Breadcrumbs,

cari kode ]]></b:skin> dengan menekan CTR + F, paste kode css dibawah ini persis diatas kode ]]></b:skin>

.breadcrumbs {
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #C0C0C0;
}

Dengan terpasangnya navigasi breadcrumbs membantu kita mengenali artikel tersebut ditulis dalam kategori label apa, beberapa blog dihalaman depan tidak terlihat label pada masing-masing posting bahkan sengaja dihapus untuk mengurangi link internal pada halaman utama, silahkan baca postingan cara menghilangkan label atau hapus lebel posting  meskipun label dihalaman depan dihapus tapi pada navigasi breadcrumbs akan tetap tampil. Setelah langkah-langkah diatas dibuat kemudian simpan template sobat dan lihat hasilnya, selamat mencoba semoga berhasil dan sukses