Cara Pasang Navigasi Breadcumb di Blogger

Cara Pasang Navigasi Breadcumb di Blogger - Wuih. . . Udah lama juga ea gak posting, jadi lumayan kangen.. hehehe
Tadi pagi waktu gw buka blog ini, ada salah satu visitor yang nanya kayak gini di shoutmix: "mas, gimana caranya buat masang navigasi yang ada di atas judul postingan kaya yang ada di blognya mas agung?"
Sebenernya gw sempet bingung sama pertanyaan itu, tapi mungkin maksud dari pertanyaan itu adalah navigasi breadcumb.

Sebenarnya apa sih kegunaan dari navigasi breadcumb tersebut?
kalo menurut gw pribadi dengan memasang navigasi breadcumb akan dapat memudahkan pengunjung dalam mengetahui posisi suatu artikel (dimana letak artikel dan termasuk ke dalam kategori apa artikel tersebut). Selain itu, menurut para ahli SEO dengan memasang navigasi breadcumb akan lebih memudahkan search engine dalam melakukan pencarian dan mengindeks artikel-atikel yang ada di blog kita.

Untuk memasang navigasi breadcumb di blogger, berikut langkah-langkahnya:
1. Login ke dulu ke blogger.com
2. Pilh menu "Design"
3. Klik "Edit HTML"
4. Untuk berjaga-jaga bila terjadi kesalahan, back up dulu template yang digunakan
5. Beri tanda centang pada "Expand Template Widget"
6. Cari kode ]]></b:skin> dan letakkan kode di bawah ini tepat di atasnya

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

7. Cari kode <div class='post hentry uncustomized-post-template'> kemudian letakkan kode di bawah ini tepat setelah kode tersebut

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>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>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

8. Klik "Save Template"

Dikarenakan setiap template berbeda, maka mungkin aja ada template yang tidak memiliki kode <div class='post hentry uncustomized-post-template'> didalamnya. Sebagai gantinya coba cari kode <div class='post hentry'> dan ikuti langkah di nomor 7 sampai dengan selesai.

Untuk melihat navigasi breadcumb yang kita buat tadi, silahkan masuk ke halaman blog lalu klik salah satu judul postingan. Lihat dibagan atas judul, jika ada tambahan satu baris tautan seperti pada gambar di atas, maka navigasi breadcumb telah sukses dibuat.

---

Related Post on Agung X-Zeg Indraguna's World_