Cara Memasang Breadcrumb diblog

Cara Memasang Breadcrumb diblog
Cara pasang Navigasi Breadcrumb di blogspot supaya lebih SEO Friendly. Sebelumnya mari kita kenal lebih dahulu apa itu BreadCrumb? Kalau diartikan satu artinya bisa saja "remah roti" tapi bukan itu yang dimaksud, Breadcrumb disini adalah sebuah bantuan navigasi yang digunakan dalam user interface sehingga memudahkan user untuk menavigasi halaman web/blog. Istilah ini berasal dari jejak remah roti yang ditinggalkan oleh Hansel dan Gretel di dalam sebuah dongeng populer.
Lalu bagaimana cara membuat Navigasi Breadcrumb tersebut? Sebenarnya telah banyak yang membuat tutorial cara membuat navigasi breadcrumb, baik di wordpress maupun di blogspot. Kali ini tutorial cara pasang breadcrumb di blogspot agak berbeda dari yang sudah-sudah, ada sedikit sentuhan dari Blogger Bertuah, salah satunya Bang Ais, founder www.duosmith.com--Duo Smith Elios. Berikut ini adalah cara membuat breadcrumb di blogger.com/blogspot.com

1. Login ke blogger degan ID anda.
2. Klik Tata Letak / layout
3. Kemudian klik tab Edit HTML » Expand Template Widget
4. Click Download Full Template and please back up your template first. Untuk menghindari bila sewaktu-waktu ada kesalahan.
5. Beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.

6. Cari kode ]]></b:skin>
7. Copy lalu paste kode di bawah ini persis di atas kode ]]></b:skin>

    .breadcrumbs {
    padding:5px 5px 5px 0;
    margin:0;font-size:95%;
    line-height:1.4em;
    border-bottom:4px double #e2e7b4;
    }
    .breadcrumbs a {
    text-decoration:none;
    color: #000000;
    }

8. Silahkan cari kode berikut pada template anda :
<div class='post hentry'>

9. Copy lalu paste kode di bawah ini persis di bawah kode <div class='post hentry'>

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/>
<b:if cond='data:blog.pageType == "item"'> <div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Ganti Dengan Kata Kunci Utama Blog</a> »
<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 != "true"'> , </b:if> </b:loop> </b:if> »
<data:post.title/>
</div> </b:if> </b:if>

Simpan/save dan silahkan lihat hasilnya secara langsung di atas judul postingan "Cara Pasang Breadcrumb Blogspot" ini dan bisa juga di lihat pada bagian halaman posting blog kita masing-masing, maka hasilnya mirip dengan dengan gambar di bawah ini: