Cara Membuat Breadcrumb di Blog

Pada awalnya saya bingung, apa yang disebut dengan breadcrumb. Saya tahu tulisan breadcrum itu dari membaca di blog orang dalam tutorialnya. Melihat judul tersebut saya penasaran dan dengan hati yang penuh tanda tanya akhirnya saya ikuti tutorialnya. Dan, hasilnya sangat saya suka.

Sebab sebenarnya saya sudah lama ingin blog saya ini berpenampilan seperti itu, walaupun saya tidak tahu apa pengaruhnya dan apa manfaatnya buat pembaca. Mengapa saya bingung? Karena dalam tutorial itu tidak ada ilustrasinya (gambar). Oleh karena pengalaman itu, agar sobat yang masih blogger pemula tidak bingung, maka dalam tutorial ini saya cantumkan gambarnya. Banyak blogger pemula yang ingin membuat tampilan breadcrumb tapi nyari di googlenya bingung harus ngetik apa.

Katanya sih, navigasi breadcrumb adalah bagian dari blog yang keberadaannya dapat menunjang blog kita di mata search engine"!.

Navigasi breadcrumb sendiri adalah sebuah navigasi atau penunjuk halaman yang umumnya berfungsi untuk membantu memberikan informasi kepada  si pembaca tentang di artikel mana dan di menu apa si pembaca berada. Bagi sobat yang tertarik untuk memasang navigasi breadcrumb di blog sobat, silahkan ikuti tutorial berikut.

1. Login ke akun blog sobat.
2. Klik Rancangan---> Edit HTML --> Klik Download template lengkap atau klik expan
3. Letakkan kode berikut di atas kode ]]></b:skin> (tekan Ctrl + F untuk memudahkan pencarian)

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;
font-size: 90%;
line-height:1.4em;
border-bottom:1px solid black;
}

  4. Kemudian cari kode seperti di bawah ini. 

<b:includable id='post' var='post'>

 5. Pastekan kode berikut tepat di bawahnya

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

6. Klik simpan template

Sekian saja sob, semoga berhasil. Salam hangat ! Jangan lupa komentarnya, jika bermasalah.