Cara Membuat Breadcrumb

Breadcrumb merupakan suatu bentuk navigasi yang menunjukkan konten berada dalam suatu kategori yang mempermudah pembaca mengerti dimana letaknya dan tema persoalan artikel tersebut.

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 == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<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'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if></div></b:if></b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Selanjutnya simpan template anda dan lihat saja hasilnya