Cara Membuat Navigasi Breadcrumb di Blog

Jika menggunakan navigasi breadcrumb, maka pada blog akan muncul menu tambahan di bagian atas. Menu tersebut akan ditampilkan dengan format : Home/Beranda >> [Nama Label] >> Judul Postingan. Misalnya sebagai berikut :

Selain memudahkan navigasi, breadcrumb juga dipercaya memudahkan search engine untuk mengindeks posting.

Langkah-langkah memasang breadcrumb sebagai berikut :

  • Buka pada bagian Blogger Home lalu klik tab Template > Edit HTML
  • Cari bagian ]] >< /b:skin >. Tambahkan kode di atas kode tersebut.

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

  • Kemudian cari bagian <div class='post hentry'> atau <div class='post hentry uncostumized-post-template'>. Tambahkan kode berikut di atasnya. 


<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<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 != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>


  • Simpan template dan perhatikan hasilnya.