Cara memasang breadcrumb pada blog

Kali ini saya akan menulis tentang cara memasang breadcrumb di blog, atau menu navigasi di atas judul posting.breadcrumb dapat memudahkan pengunjung untuk mengetahui label atau kategori tulisan yang kita buat.
Buat anda yang belum tahu bentuk breadcrumb, bentuknya adalah seperti ini

Dan jika breadcrumb sudah terdetiksi di search engine maka, search engine google akan menampilkannya seperti berikut

Buat anda yang tertarik untuk memasang menu navigasi diatas judul posting atau breadcrumb berikut adalah caranya.
Yang pertama anda masuk dulu ke blogger kemudian edit html jangan lupa centang expand widget templates
Yang kedua anda kemudian cari kode  <b:include data='top' name='status-message'/> setelah anda menemukan kode tadi, anda paste kode berikut tepat di atas kode <b:include data='top' name='status-message'/>

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

Yang ketiga anda cari kode berikut  <b:includable id='main' var='top'> Paste kode berikut tepat 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'>
<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> 

Setelah itu cari kode ]]></b:skin> kemudaian sobat tambahkan kode berikut diatas kode ]]></b:skin>

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

Setelah itu save templatenya dan lihat hasilnya.
Semoga bermanfaat........................