Cara Membuat Breadcrumbs

Untuk tema kali ini saya akan coba membuat yang namanya breadcrumbs.Pada saat saya memulai mengenal blog dan mungkin bukan saya saja yang tidak tau tapi semua blogger yang baru memulai terjun menggeluti blog pasti pertama kali mendengar breadcrumbs akan merasa asing,apa itu breadcrumbs.

Setelah saya coba jalan-jalan didunia maya tentunya untuk mencari tahu informasi tentang breadcrumbs ternyata menurut saya breadcrumbs itu adalah untuk menampilkan atau menginformasikan suatu artikel yang dibuat dimana /masuk di katagori mana artikel tersebut berada.
Ini yang dmaksud breadcrumbs

Jadi apabila suatu blog isi artikelnya mempunyai banyak label/katagori,disini peran breadcrumbs akan menginformasikan artikel kita yang dibaca berada pada katagori apa.Sebagai contoh kita lihat pada gambar diatas bahwa artikel yang sekarang dibaca berada pada katagori Blogspot,jadi bisa juga tujuannya untuk memudahkan para pembaca untuk mengetahui atau mencari semua isi artikel dari katagori blogspot suatu blog yang mana isinya pembahasan seputar blogspot.

Cara pembuatan Breadcrumbs 

Dengan sedikit penjelasan dari saya diatas mengenai breadcrumbs semoga teman-teman yang baru memulai terjun menggeluti blog bisa mengerti apa itu breadcrumbs.

Breadcrumbs biasanya berada dibawah menutab seperti pada contoh gambar diatas,langkah pertama untuk membuatnya masuk ke Edit HTML kemudian cari kode

]]></b:skin>

Setelah ketemu kode diatas coba tambahkan kode dibawah ini diatas kode ]]></b:skin>

.breadcrumbs {
padding:0 5px 5px 0;
margin:0 0 5px;
font-size:11px;
border-bottom:1px dotted #ccc;
font-weight:normal;
}

Kemudian coba cari kode 

<b:includable id='main' var='top'>

Dan coba 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'/>

Setelah itu disave,dan cobalah test dengan membuka salah satu artikel apakah sudah muncul breadcrumbs tersebut.Demikian lah dari saya tutorial cara membuat breadcrumbs,semoga bermanfaat bagi  semua khususnya buat pemula yang memulai menggeluti blog.

Oke salam Blogger.