Cara Memasang Breadcrumb atau Menu Navigasi - Mungkin sudah banyak blog yang menjelaskan tentang BreadCrumb Navigation. Namun disini saya hanya share, barangkali masih ada yang belum mengetahui. BreadCrumb berfungsi sebagai penunjuk. Atau lebih mudahnya di sebut dengan menu navigasi. 

Breadcrumb atau Menu navigasi sangatlah penting. Yaitu memudahkan pengunjung untuk mengetahui dimana posisi dia sekarang.

Langkah-langkah/ cara memasang breadcrumb navigation :

1. Login ke blogger.com
2. Klik Tata Letak.
3. Pilih tab Edit HTML
4. Click Download Full Template and please back up your template first. Dengan tujuan agar mengantisipasi jika sewaktu waktu template anda eror dan dapat di pulihkan lagi.

5. Kemudian beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.

6. Silahkan cari kode ]]></b:skin>

7. Copy lalu paste kode di bawah ini persis di atas kode ]]></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;
}

8. Silahkan cari kode berikut pada template anda :
<div class='post hentry uncustomized-post-template'>

9. Copy lalu paste kode di bawah ini persis di bawah kode <div class='post hentry uncustomized-post-template'>

<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' 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 == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>

10. Kemudian Save Template.

Setelah anda mengaplikasikan langkah langkah di atas. Jika berhasil, sekarang coba anda cek di postingan anda. Apakah breadcrumb-navigation  sudah ada atau belum. Letaknya di atas judul postingan.

Jika anda menganggap artikel ini bermanfaat, silahkan tinggalkan komentar, kritik, atau saran.

Terimakasih , selamat mencoba.

Tweet