Cara Memasang Breadcrumb Pada Blog

Sebelum kita bahas Cara Memasang Breadcrumb Pada Blog, ada baik sobat mengetahui apa yang dimaksud dengan Breadcrumb. Breadcrumb adalah sebuah menu navigasi atau sebagai petunjuk halaman yang sedang dikunjungi yang berupa link horizontal diatas postingan. Biasanya link ini terpasang berurutan mulai dari menu Home >> Label >> Judul Halaman, tujuannya untuk mempermudah dan memberikan informasi kepada pengunjung posisi halaman yang sedang dibuka. Disamping itu, akan mempermudah juga untuk kembali ke halaman Home/Beranda. Adapun Cara Untuk Memasang Breadcrumb Pada Blog adalah sebagai berikut :

1. Masuk ke Blogger

2. Pilih Template

3. Klik Edit HTML

4. Centang tulisan Expand Widget Templates

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

6. Pasang 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;

}  

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

9. Jika sudah ketemu, ganti kode tersebut dengan kode 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, apabila sudah benar klik Simpan.

Demikian artikel HM tentang Cara Memasang Breadcrumb Pada Blog, semoga bisa membantu dan bermanfaat, Terimakasih atas kunjungannya.