Membuat Breadcrumb Navigation

Membuat Breadcrumb Navigation - Navigasi Breadcrumbs adalah sebaris tautan internal pada bagian atas atau bawah laman yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke laman dasar dengan cepat. Banyak breadcrumbs memiliki laman yang paling umum (biasanya laman dasar) sebagai tautan pertama dan paling kanan dan memuat bagian yang lebih spesifik keluar ke sisi kanan.

Menu ini sering ditemui di blog/website berplatform WordPress, dimana urutan navigasinya dimulai dari Home » Parental Category » Subcategory » Posting. Di Blogger/Blogspot, kita juga dapat melakukan hack navigasi breadcrumbs dengan berdasarkan pada label: Home »  Label » Posting. Menu ini akan muncul pada halaman posting, label, arsip, dan tidak muncul di bagian homepage

Langsung aja ke tutorial tkp langsung : 

1. Masuk ke blogger.com »  Pilih Tab Design »  Pilih Tab Edit HTML » Expand Widget Templates

2. Cari (gunakan Ctrl+F) ]]></b:skin> dan masukkan aturan CSS berikut di ATAS-nya:

.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}

3. Cari (Ctrl+F) <b:include data='top' name='status-message'/> kemudian tambahkan kode ini TEPAT di BAWAH/SETELAH-nya:

<b:include data='posts' name='breadcrumb'/>

4. Copas kode berikut dibawah kode <b:includable id='post' var='post'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumb'>
 You are here: » <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>

Kalau berhasil, maka di setiap judul postingan akan ada navigasi yang disebut breadcrumb. Sekedar catatan, sebaiknya download dulu template blogspot Anda sebelum melakukan pengeditan HTML, agar bila ada yang salah nantinya template bisa dikembalikan seperti semula.


Source