Cara Membuat Breadcrumb pada Blog

Hallo sobat blogger, pada tau kan Breadcrumb itu apa?. Jika masih ada yang belum tau Breadcrumb itu untuk apa tujuanny, makanya tetap stay di blog ini yah. Kita akan membahasnya lebih mendalam.

Breadcrumb itu adalah ibarat sebuah tools navigasi yang mana apabila sebuah artikel yang memiliki banyak label atau katagori diklik tidak akan error. Biasanya, apabila memiliki label lebih dari satu, breadcrumbnya akan error. Nah untuk Breadcrumb yang ini lebih mantap lagi sobat blogger.

Jika sobat blogger belum mengerti juga, bisa lihat di atas judul artikel blog saya sobat blogger, atau lihat gambar di bawah ini.

Gambar Preview

Seperti itulah sobat blogger tampilan Breadcrumb yang akan kita buat pada blog kita. Nah jika sobat blogger berniat ingin membuatnya, silahkan follow langkah-langkah di bawah ini.

1. Login ke blogger dengan account anda
2. Seperti biasa, Layout ==> Edit HTML
3. Kemudian cari kode yang mirip seperti ini <div class='post hentry'> pada blog anda. dan apabila tidak ada, silahkan ketik "Hentry" pada kotak Find nya.
4. Jika sudah ketemu, silahkan letakkan kode berikut di bawah kode tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Your Are Here</span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjitOCs4UHM-UGlNWLd-ZmBe04_O9DGnVq1qSIuvaaNjsb9kwda5FeTtLgkkku0_iQabOmAQ3EDRiqPi1qUdyUiX3X2Q-mlCFtojqQbCHg8KIfXufhMXbFEL6Fe5_C4_0TlPh34O19a8Sw/s1600/kangsalman+crumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
&#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Browse</span> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
&#187; Archives for <data:blog.pageName/>
</div>
</b:if>

5. Kemudian cari kode ]]></b:skin> dan letakkan kode berikut di atasnya.

.breadcrumbs {
padding:8px 0px 10px 5px;
margin: 0px 0px 5px 0px;
font-size:88%;
border:1px double
#e6e4e3;
}

Silahkan sobat blogger edit attibutnya sesuai dengan template blog anda.
6. Setelah selesai, silahkan Simpan Template blog anda, dan lihat perubahannya.
semoga bermanfaat, dan mohon maaf jika ada salah. (Jkt/2012)