Cara Membuat Breadcrumb

Bismillah
Breadcrumb merupakan suatu bentuk navigasi yang menunjukkan konten berada dalam suatu kategori yang mempermudah pembaca mengerti dimana letaknya dan tema persoalan artikel tersebut (Definisi saya sendiri, Sumpah!).

Kemarin-kemarin saya sudah membahas membuat breadcrumb dan sudah ada 2 artikel, dan semuanya menurut saya kurang memuaskan, untuk itu saya berusaha untuk mentelaah, memahami kerja breadcrumb itu sendiri, dan dalam tutorial ini saya mempunyai persoalan, persoalan itu antara lain: persoalan pertama mengapa tidak bisa terIndex oleh google, persoalan kedua mengapa yang tampil dalam breadcrumb hanya 1 label saja padahal sudah ditempatkan dalam dua label, dan sekarang saya sudah menemui titik terang bagaimana 2 persoalan diatas bisa diatasi, saya mencoba untuk membuat tutorial ini lagi dan semoga seperti apa yang saya harapkan, gambar dibawah ini adalah hasil SERP dari postingan saya

Dapat kita lihat tulisan yang digaris bawah merah, itu merupakan hasil breadcrumb jika terindex oleh google, dan jika sobat ingin mengetahui apakah breadcrumb sobat terindex oleh google atau tidak bisa dilihat disini http://www.google.com/webmasters/tools/richsnippets

---

Cara Membuat Breadcrumb

---

Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"
Langkah 2
Letakan kode dibawah ini sebelum kode: ]]></b:skin>

.breadcrumbs{
      margin-left:10px;
      padding: 5px 0;
      border-bottom: 1px dotted;
      line-height:1.4em;
      }

Langkah 3
Kemudian cari kode <b:include data='top' name='status-message'/>
biasanya ada 2 kode yang serupa, dan masing-masing diatasnya letakkan kode berikut

<b:include data='posts' name='breadcrumb'/>

Langkah 4
Letakkan kode dibawah ini diatas kode <b:includable id='main' var='top'>

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
 &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if></div></b:if></b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Langkah 5

Semoga bermanfaat, selamat mencoba dan semoga berhasil 

http://koderator.blogspot.com/2012/04/cara-membuat-breadcrumb.html