Breadcrumb untuk Blogger

Breadcrumbs atau breadcrumb trail adalah alat bantu navigasi yang digunakan dalam antarmuka pengguna. Ini memberi pengguna cara untuk melacak lokasi mereka dalam program atau dokumen. Istilah ini berasal dari jejak remah roti yang ditinggalkan oleh Hansel dan Gretel di dongeng populer.
Jalur seperti Rumah »Label» Nama Posting adalah remah roti.
Ini adalah screenshot dari Breadcrumb Trail
Breadcrumb untuk Blogger
Sekarang setelah Anda tahu apa itu remah roti, mari kita masuk ke detail menambahkan yang sama ke Blog Blogger Anda.
1. Pergi ke Templat > Edit HTML dan centang kotak centang yang mengatakan Perluas Template Widget .
2. Sekarang di Templat, Temukan
<b: sertakan data = 'top' name = 'status-message' />
dan tepat di atas itu, tempelkan baris kode ini
<b: sertakan data = 'posting' name = 'breadcrumb' />
3. Sekarang temukan
<b: termasuk id = 'main' var = 'top'>
Jika Anda menemukan dua kemunculan ini, cari yang kedua (temukan yang satunya) dan langsung di atas yang menempelkan potongan kode ini
<b: termasuk id = 'breadcrumb' var = 'posting'>
<b: if cond = 'data: blog.homepageUrl! = data: blog.url'>
<b: if cond = 'data: blog.pageType == "static_page"'>
<div class = 'breadcrumbs'> <span> <a expr:href='data:blog.homepageUrl' rel='tag'> Beranda </a> </span> »<span> <data: blog.pageName / > </span> </div>
<b: else />
<b: if cond = 'data: blog.pageType == "item"'>
<! - remah roti untuk halaman posting ->
<b: nilai loop = 'data: posting' 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' rel="v:url" property="v:title"> Beranda </a> </span>
<b: loop values ​​= 'data: post.labels' var = 'label'>
<b: if cond = 'data: label.isLast == "true"'>
 »<Span typeof =" v: Breadcrumb "> <a expr:href='data:label.url' rel="v:url" property="v:title"> <data: label.name /> </ a > </span>
</ b: jika>
</ b: lingkaran>
 »<span><data:post.title/> </span>
</div>
<b: else />
<div class = 'breadcrumbs'> <span> <a expr:href='data:blog.homepageUrl' rel='tag'> Beranda </a> </span> »<span> Tanpa label </span>» < span> <data: post.title /> </span> </div>
</ b: jika>
</ b: lingkaran>
<b: else />
<b: if cond = 'data: blog.pageType == "archive"'>
<! - breadcrumb untuk halaman arsip label dan halaman pencarian .. ->
<div class = 'breadcrumbs'>
<span> <a expr:href='data:blog.homepageUrl'> Beranda </a> </span> »<span> Arsip untuk <data:blog.pageName/> </span>
</div>
<b: else />
<b: if cond = 'data: blog.pageType == "index"'>
<div class = 'breadcrumbs'>
<b: if cond = 'data: blog.pageName == ""'>
<span> <a expr:href='data:blog.homepageUrl'> Beranda </a> </span> »<span> Semua posting </span>
<b: else />
<span> <a expr:href='data:blog.homepageUrl'> Beranda </a> </span> »<span> Kiriman yang diajukan di bawah <data:blog.pageName/> </span>
</ b: jika>
</div>
</ b: jika>
</ b: jika>
</ b: jika>
</ b: jika>
</ b: jika>
</ b: termasuk>
Kode ini hanya akan menampilkan label terakhir dari pos di remah roti. Jika Anda ingin menampilkan semua label, maka Anda harus menghapus 2 garis kode hijau itu.
4. Simpan Templat
5. Jika Anda ingin membuat remah roti lebih kecil kemudian pergi ke Template Designer > Advanced > Tambahkan CSS dan tambahkan Cuplikan berikut di sana dan Terapkan perubahan
.remah roti {
padding: 5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
ukuran font: 95%;
garis-tinggi: 1.4em;
border-bottom: 3px double # e6e4e3;
}

Sekarang Anda harus memiliki navigasi remah roti yang berfungsi pada sistem Anda. Ide breadcrumb asli didasarkan pada Kode Hoctro dari HOCTRO breadcrumb hack . Ini telah dimodifikasi untuk mengakomodasi Halaman Pencarian, Halaman Label dan Arsip. Breadcrumb posting menggunakan Markup breadcrumb RDF untuk membantu Anda dalam menampilkan remah roti di Hasil Pencarian Google.