Cara Membuat Breadcrumbs | Navigasi Blogger

Membuat Breadcumbs pada blog adalah salah satu cara agar blog lebih seo friendly. Jadi sangat penting anda mengetahui Bagaimana cara membuat breadcumbs (navigasi atas) khususnya pada blogger/blogspot.

Sekilas tentang Breadcumbs (Navigasi Atas) Pada Blogger

Apa itu Breadcumbs ?

Breadcrumbs adalah aksesoris blogger, biasanya muncul secara horizontal di bagian atas Artikel blog anda, Lebih tepatnya ada di bawah bar judul atau header. Breadcrumbs Blogger ini menyediakan link penghubung kembali ke halaman sebelumnya setiap user menavigasi antar link untuk menuju ke halaman yang aktif atau halaman induk dari halaman yang aktif. Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri. Sebuah tanda yang lebih besar dari (>) sering berfungsi sebagai pemisah hirarki, meskipun dapat menggunakan simbol lainnya (seperti »atau>), serta beragam grafik.

Contoh Screnshoot Navigasi Breadcumbs

Seperti pada tampilan screenshoot diatas, anda mungkin bisa memahami letak dan tampilan breadcumbs pada blog.

Home > Label1 > Label2 > Label3
Home > Tips > Cara Membuat > Breadcumbs Blogger

Tutorial lengkap Membuat Navigasi Breadcumbs untuk Blogger

Setelah kita mengetahui jelas tentang navigasi breadcumbs, Langsung saja kita pelajari cara membuatnya / memasang si breadcums pada blog kita.

1. Login ke Blog kamu
2. Klik Template > Edit HTML > Lanjutkan
3. jangan lupa, Centangkan Expand Template Widget
4. Cari kode ]]></b:skin> dan simpan kode dibawah ini tepat diata diatas ]]></b:skin>:

 .breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;} 

5. Cari kode source <b:includable id='main' var='top'>, hapus dan langsung ganti dengan kode dibawah ini:

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- breadcrumb for the post page --> <b:loop values='data:posts' 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' property='v:title' rel='v:url'>Home</a></span> <b:loop values='data:post.labels' var='label'> &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> </b:loop> &#187; <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <!-- breadcrumb for the label archive page and search pages.. --> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == &quot;index&quot;'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span> <b:else/> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='top'> <b:include data='posts' name='breadcrumb'/>

6.Simpan template, coba lihat apakah breadcums terpasang dengan benar di blog?

Fungsi dari breadcrumb pada blog adalah untuk mengetahui sedang dihalaman mana pengunjung sekarang berada . Dengan Navigasi breadcrumb, maka urusan navigasi link bisa lebih mudah. Selain itu, breadcrumb juga sangat baik untuk Blog agar lebih seo friendly, karena navigasi ini memperkaya kata kunci dalam postingan artikel. Demikian saja pengenalan singkat tentang navigasi breadcumbs, Jika ada yang mau menambahkan dengan senang hati ditunggu dikotak komentar. Salam !