Cara Membuat Breadcrumb Navigation di Blog

Cara Membuat Breadcrumb Navigation di Blog – Apakah anda ingin mempunyai blog yang SEO Friendly dan disukai Google ? Pastinya bukan, memiliki blog yang seo friendly pada saat ini sepertinya sudah menjadi trend dan keharusan agar blog yang kita optimasi tidak sia- sia dan bisa masuk halaman pertama pada Mesin pencarian Google. Salah satu cara agar blog itu SEO Friendly adalah dengan di pasangnya Breadcrumb Navigation pada blog kita.

Sebelum membahas cara membuat Breadcrumb Navigation pada blog sebaiknya saya menjelaskan terlebih dahulu apa dan fungsi breadcrumb tersebut, agar anda semakin mantab / yakin untuk memasangnya pada blog anda.

Breadcrumb atau remah roti adalah istilah yang sering digunakan oleh orang barat untuk hal-hal yang membantu mereka menelusuri posisi mereka dari suatu titik awal. Fungsi breadcrumb adalah untuk memudahkan Googlebot mengenali struktur blog kita lebih cepat, karena halaman-halaman yang berada pada hirarki atas akan mendapat lebih banyak aliran poin dibandingkan halaman-halaman yang lebih di bawah hirarki. Urutan navigasi breadcrumb pada blog blogspot di mulai dari Home > Label > Posting berbeda dengan wordpress yang memiliki urutan navigasi dari Home > Parental Category > Subcategory > Posting.

Diatas sudah sedikit saya jelaskan apa dan fungsi breadcrumb itu, sekarang waktunya saya memberikan tutorial cara membuat breadcrumb navigation pada blog, silahkan ikuti langkah- langkah di bawah ini.

Cara Membuat Breadcrumb Navigation di Blog

1. Masuk ke dashboard > Design/Rancangan > Edit HTML, jangan lupa centang (check) "Expand Widget Templates" di pojok kanan atas kotak edit HTML.

2. Cari (gunakan Ctrl+F) ]]></b:skin> lalu masukan kode dibawah ini tepat diatasnya:

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

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

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

4. Cari (Ctrl+F) <b:includable id='main' var='top'> lalu tambahkan script berikut TEPAT di ATAS-nya:

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl == data:blog.url'><!-- No breadcrumb on home page --><b:else/><b:if cond='data:blog.pageType == "item"'><!-- breadcrumb for the post page --><p class='breadcrumbs'><span class='post-labels'><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a><b:loop values='data:posts' var='post'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == "true"'> »<a expr:href='data:label.url' rel='tag'><data:label.name/></a></b:if></b:loop><b:else/>»Unlabelled</b:if>» <span><data:post.title/></span></b:loop></span></p><b:else/><b:if cond='data:blog.pageType == "archive"'><!-- breadcrumb for the label archive page and search pages.. --><p class='breadcrumbs'><span class='post-labels'><a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/></span></p><b:else/><b:if cond='data:blog.pageType == "index"'><p class='breadcrumbs'><span class='post-labels'><b:if cond='data:blog.pageName == ""'><a expr:href='data:blog.homepageUrl'>Home</a> » All posts<b:else/><a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/></b:if></span></p></b:if></b:if></b:if></b:if></b:includable>

5. Pastikan semua kode telah di-copy dan diletakkan dengan benar, lalu save.

setelah men-save template anda, sekarang cek apakah blog anda sudah memiliki breadcrumb pada halaman artikel. Membuatnavigasi breadcrumb ini adalah salah satu cara untuk men-seo kan template anda, masih ada tutorial- tutorial lainnya yang harus anda ketahui, Jadi terus tunggu artikel terbaru pada blog ini ya.. Happy Blogging!