Cara Mudah Membuat Navigasi Breadcrumbs di Blogger

Cara Mudah Membuat Navigasi Breadcrumbs di Blogger-Pada kesempatan ini Cara Design Blog akan memberikan tutorial blogger cara mudahmembuat navigasi breadcrumbs pada blog.
Apa arti dan fungsi dari navigasi breadcrumbs itu?
Navigasi Breadcrumbs adalah bantuan navigasi yang digunakan dalam user interface sebuah website ataupun blog. Hal ini memungkinkan pengguna untuk melacak lokasi halaman atau dokumen dengan mudah.

Navigasi Breadcrumbs biasanya dibuat horizontal di bagian atas postingan blog maupun halaman web. Para blogger sering meletekan navigasi breadcrumbs ini di bawah bar judul atau header. Breadcrumbs yang juga di sebut Rootlink ini menyediakan link kembali ke halaman sebelumnya (beranda), setiap pengunjung menggunakan navigasi breadcrumbs ini untuk menuju ke halaman saat ini  atau di situs-hirarkis struktur-halaman induk yang sekarang.
Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri. Simbol (>) sering berfungsi sebagai pemisah hirarki. Namun banyak juga blogger yang memakai simbol (»).

Struktur dari Navigasi Breadcrumbs pada umumnya seperti ini:
Home page > Section page > Subsection page
Manfaat dari membuat navigasi breadcrumbs adalah membuat blog lebih SEO Friendly. Blog yang sudah menggunakan navigasi breadcrumbs memiliki daya untuk  SEO dan SERP di Google Search Engine dibanding blog yang tidak memakai breadcrumbs. 

Bagaimana cara membuat navigasi breadcrumbs itu?
Untuk menjawab pertanyaan ini perkenankan Cara Design Blog memberikan tutorial blogger cara mudah membuat navigasi breadcrumbs. 
Berikut ini tutorial cara mudah mudah membuat navigasi breadcrumbs :

1. Masuk Dasbor Blog Kamu
2. Template > Edit HTML > Lanjutkan > Exspand Widget Template
3. Cari: ]]></b:skin>
4. Letakan kode beikut tepat diatas ]]></b:skin>

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

5. Cari: <b:includable id='main' var='top'>
6. Letakan kode berikut di atas kode no.:5.

 <b:includable id='breadcrumb' var='posts'>
 <b:if cond='data:blog.homepageUrl == data:blog.url'>
 <!-- No breadcrumb on home page -->
 <b:else/>
 <b:if cond='data:blog.pageType == "item"'>
 <!-- breadcrumb for the post page -->
 <p class='breadcrumbs'>
 <span class='post-labels'>
 <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
 <b:loop values='data:posts' var='post'>
 <b:if cond='data:post.labels'>
 <b:loop values='data:post.labels' var='label'>
 <b:if cond='data:label.isLast == "true"'> »
 <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
 </b:if>
 </b:loop>
 <b:else/>
 »Unlabelled
 </b:if>
 » <span><data:post.title/></span>
 </b:loop>
 </span>
 </p>
 <b:else/>
 <b:if cond='data:blog.pageType == "archive"'>
 <!-- breadcrumb for the label archive page and search pages.. -->
 <p class='breadcrumbs'>
 <span class='post-labels'>
 <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
 </span>
 </p>
 <b:else/>
 <b:if cond='data:blog.pageType == "index"'>
 <p class='breadcrumbs'>
 <span class='post-labels'>
 <b:if cond='data:blog.pageName == ""'>
 <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
 <b:else/>
 <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
 </b:if>
 </span>
 </p>
 </b:if>
 </b:if>
 </b:if>
 </b:if>
 </b:includable>

6. Preview/pratinjau untuk melihata apakah ada kesalahan dalam input kode kode tersebut. Kalau tidak ada kesalahan lanjutkan langkah no.:7.

7. Save Template.
Selesai, Sekarang lihat blog kamu.