Cara memasang Breadcrumb diblog

Seperti apa yang saya ketahui dan sudah saya pasang seperti blog saya ini yang dimaksud dengan Breadcrumb Navigation adalah menu navigasi ataupun sebagi petunjuk arah halaman yang sedang dikunjungi yang berisi berupa link horisontal diatas blog yang sudah diatur sedemikian rupa sesuai dengan label yang dipasang/diatur dipostingan kita sebelumnya, biasanya link ini terpasang berurutan mulai dari menu Home >> Label >> Sub Label>>Judul Halaman Yang Sedang Dibuka, tujuannya 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 diblog sebagai berikut  :

1. Sign in Ke blogger .
2. Klik Opsi lainnya
3. Klik Templete
4. klik Edit HTML
5. Centang tulisan Expand Widget Templates
6. Cari Kode ]]></b:skin> (biar lebih gampang gunakan tombol CTRL+F.)
7. Kemudian copy dan paste kode dibawah ini dan letakkan diatas kode ]]></b:skin>


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


8. Kemudian cari kode <b:includable id='main' var='top'> (biar lebih gampang gunakan tombol CTRL+F.)
9. Jika sudah ketemu, ganti code <b:includable id='main' var='top'> dengan code dibawah ini


<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'>
&#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'/>



10. Klik Pratinjau untuk melihat kesalahan dan apabila sudah tidak ada masalah klik Simpan


Demikianlah postingan saya kali ini tentang cara memasang breadcrumb diblog, semoga bermanfaat.

Baca juga artikel menarik lainnya :