navigasi breadcrumb dan cara pemasangannya

Pada suatu blog atau website ketika kita sedang melihat atau membaca suatu artikel pasti suka ada gambar seperti ini :

Breadcrumb (yang di beri garis lingkaran)

Breadcrumb (yang di beri garis lingkaran)

Nah buat para pemula tentunya akan selalu bertanya apa sih breadcrumb itu? Disini saya akan menjelaskan sedikit ilmu yang saya tahu seputar pengertian, dan cara penggunaan breadcrumb pada suatu blog atau website. Breadcrumb sendiri bisa di artikan sebagai sebuah navigasi menu berurutan yang mempunyai fungsi untuk memudahkan pengunjung dalam melihat dan mengetahui suatu artikel yang sedang dibaca. Breadcrumb ini juga sangat berpengaruh terhadap SEO suatu blog kita, karena dapat memungkinkan dengan adanya breadcrumb ini pengunjung akan tertari untuk melihat artikel-artikel kita yang lainnya. Letak Breadcrumb ini selalu berada di atas postingan atau diatas judul postingan..rekan-rekan bisa melihat pada gambar di atas..

berikut ada sebuah cara untuk kita bisa memasang breadcrumb di blog kita..

1. Log in dulu di akun blog kita

2. kalau memakai tampilan yang lama, klik  Dashboard masuk ke "rancangan" kemudian klik "edit html" jangan lupa centrang "expand template widgets"

3. Carilah kode html <b:includable id='main' var='top'> (gunakan F3 untuk melakukan pencarian lebih cepat.

4. Setelah ketemu kode di atas.. masukkan kode html di bawah ini tepat di atasnya.

<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:<aexpr:href='data:blog.homepageUrl'rel='tag'>Home</a>  &gt;<b:loop values='data:post.labels' var='label'><b:ifcond='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></spa></p></b:if><!-- End of Breadcrums Hack --></b:includable>

5. Kemudian cari lah kode berikut : <b:if cond='data:post.dateHeader'>

6. Jika sudah ketemu letakkan kode html  dibawah ini tepat di atasnya

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

7. Nah yang terakhir kita tinggal cari kode ]]></b:skin> dan jika sudah ketemu masukkan lah kode di bawah ini tepat di atasnya

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

8. Selesai, klik simpan dan lihat hasilnya...

buat rekan-rekan jangan lupa like nya ya...