Membuat breadcrumb blogger

Breadcrumb berguna agar pembaca mengetahui mereka sedang membaca artikel kategori apa pada blog kita. Secara default sebenarnya blogger sudah menyediakan fasilitas label untuk keterangan ini, biasanya terletak di bawah posting (post-footer-line) tapi entah kenapa saya juga ikut-ikutan pengen pasang breadcumb, mungkin untuk pembelajaran saja.

Seperti biasa langsung saja caranya :
1.Login ke akun blogger >> Klik menu Rancangan >> Klik Edit HTML
2.Centang Expand Template Widget >> Cari kode  ]]></b:skin> 
3.Masukan kode CSS berikut tepat di atas kode  ]]></b:skin>

.breadcrumbs{padding:5px 0px 5px 0;margin:0;font-size:95%;line-height:2em;border-bottom:1px dashed #e1e1e1}

4.Kemudian cari kode berikut  <b:includable id='main' var='top'> agar lebih cepat gunakan Ctrl+F
5.Ganti kode tersebut dengan kode di bawah ini :

<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'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <span typeof='v:Breadcrumb'>
<a expr:href='data:label.url' property='v:title' rel='v:url'>
<data:label.name/></a></span>
</b:if>
</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>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Selamat mencoba, salam blogger .
Dari berbagai sumber.