Cara Memasang Breadcrumb Navigation diblog

Yang dimaksud dengan Breadcrumb Navigation adalah menu navigasi sebagai petunjuk arah halaman yang sedang dikunjungi, berupa link horizontal diatas blog yang sudah diatur sedemikian rupa dengan label yang dipasang/diatur pada postingan, biasanya link ini terpasang berurutan mulai dari Home >> Label >> Judul Halaman yang sedang dibuka, tujuannya adalah untuk mempermudah dan memberikan informasi kepada pengunjung posisi halaman yang sedang dibuka sekarang, disamping itu akan mempermudah juga untuk kembali kehalaman Home/Beranda. Adapun Cara Memasang Breadcrumb Navigation diblog adalah sebagai berikut :

1. Login ke Blogger

2. Pilih Template

3. Lalu Klik Edit HTML

4. Cari kode ]]></b:skin>

5. Letakkan kode dibawah ini diatas kode ]]></b:skin>

.breadcrumbs { padding:5px 5px 5px 0px;margin: 5px 5px 15px 0px; font-size:95%;
 line-height: 1.4em;height: 15px border-top:2px double #ff0000;background: #ffffff;}

6. Kemudian cari kode <b:includable id="main"var="top">

7. Ganti kode <b:includable id="main"var="top"> dengan kode dibawah ini

<b:includable id='breadcrumd' 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'>&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span></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'/>

8. Simpan.

Demikian artikel SP tentang Cara Memasang Breadcrumb Navigation diblog, semoga bisa membantu dan bermanfaat. Terimakasih atas kunjungannya.