Nah, yang membedakan breadcrumb ini adalah tidak akan error apabila suatu posting atau artikel memiliki banyak label atau katagori. Biasanya, apabila memiliki label lebih dari satu, breadcrumbnya akan error, tapi tidak untuk breadcrumb kali ini. Berikut screen shootnya:
Nah bagus kan? Berapapun katagori dalam satu artikel selalu akan di pisahkan tanda koma dan itu sangat bagus untuk SEO, Tertarik?? Langsung saja ikuti tutorialnya.
1. Login dahulu blog kalian di Blogger, lalu pilih "Rancangan", terus klik Tab "Edit HTML" , Centang Kotak Expand Template Widget
2. Cari kode berikut mirip seperti <div class='post hentry'> (atau ketikkan hentry pada kotak search, tekan ctrl + F untuk membuka kotak search)
3. Copy kode berikut, dan paste tepat di bawah kode <div class='post hentry'>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Your Are Here</span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvwtaE_miMKKyIaXy8At3Ibvh0-jkCGdA0gbm-bqbDyFO8ogUxl3LYit8GHIRbzsjXg2I6cXUWJEPxnP9mSFTz7gUO-Zsj261KH1b0Vb1KYioltwED9tP95PDBbfbsS01PkTnMW8PCCDQ/s1600/kangsalman+crumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
»
<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>
»
</b:if>
<data:post.title/>
</div>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Browse</span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvwtaE_miMKKyIaXy8At3Ibvh0-jkCGdA0gbm-bqbDyFO8ogUxl3LYit8GHIRbzsjXg2I6cXUWJEPxnP9mSFTz7gUO-Zsj261KH1b0Vb1KYioltwED9tP95PDBbfbsS01PkTnMW8PCCDQ/s1600/kangsalman+crumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
» Archives for <data:blog.pageName/>
</div>
</b:if>
Jika sudah selesai, simpan template dan lihatlah hasilnya...
Jika ingin menggunakan kotak (border) dalam breadcrumb, tambahkan kode berikut ini dan pastekan tepat di atas ]]></b:skin> :
.breadcrumbs {
padding:8px 0px 10px 5px;
margin: 0px 0px 5px 0px;
font-size:88%;
border:1px double
#e6e4e3;
}
Terakhir, simpan template
Mudah bukan?? Dengan memasang breadcrumb, blog anda akan telihat lebih profesional dan selain itu blog kalian akan lebih SEO friendly