Cara Mudah Membuat Breadcrumb

Halo sobat , kali ini Arsipin mau share bagaimana caranya membuat navigasi breadcrumb ala Arsipin pada platform blogger/blogspot. perlu diketahui,menurut pengertian wikipedia, breadcrumb adalah bantuan navigasi yang digunakan dalam tampilan suatu web. biasanya tampilan tersebut akan terlihat seperti : Home  > Section page > Subsection page.

Lalu apa sih kegunaan breadcrumb ini? Menurut Jacob Nielsen "... Breadcrumbs use a single line of text to show a page's location in the site hierarchy. While secondary, this navigation technique is increasingly beneficial to users..." sobat bisa membaca artikelnya disini.

Nah sekarang kita masuk ke langkah-langkah membuat breadcrumb

1. Pastinya sobat mesti login dulu ke akun blog sobat.

2. Masuk ke menu Template > edit HTML > lalu centang Expand widget. tapi jangan lupa untuk mem-back up dulu templatenya ya :)

3. Cari kode (tips: Ctrl + F) ]]></b:skin> . ketik kode dibawah ini

.breadcrumbs
{
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:2px solid #f5f5f5;
}

tepat di bagian atas kode ]]></b:skin>

4. Lalu cari kode seperti ini:  <b:include data='top' name='status-message'/> .jika terdapat dua kode  <b:include data='top' name='status-message'/>

Tulis saja  kode ini : <b:include data='posts' name='breadcrumb'/> di atas kode <b:include data='top' name='status-message'/>

5. Terakhir, cari kode <b:includable id='main' var='top'> jika sudah menemukannya, paste-kan kode berikut  di atasnya

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

• Untuk melihat preview berhasil atau tidaknya sobat membuat menu navigasi breadcrumbs ini, sobat bisa cek ke Google Rich Snippet Tools. tinggal tulis alamat blog sobat.

Nah sobat, mudah bukan untuk membuat breadcrumb pada blog kamu? semoga bermanfaat