Cara Memasang Breadcrumb - Navigasi Link di Atas Judul Tulisan

Baca Juga

Tips blogging kali ini tentang cara memasang breadcrumb, yaitu navigasi link di atas judul tulisan. Contohnya ada di atas judul posting ini, atau seperti dalam gambar ini:

Breadcrumbs adalah navigasi atau petunjuk yang berisi keterangan tentang halaman yang sedang dibuka. Breadcrumb biasanya terdiri dari tautan ke halaman depan (home, beranda), halaman label, dan judul tulisan.

Fitur ini penting untuk memudahkan pengunjung mengeksplorasi konten blog. Navigasi seperti ini  membuat blog jadi ramah pengguna (user friendly) sekaligus meningkatkan SEO --minimal menjadi internal link yang dianjurkan Google.

Menurut blogger ternama, Maskolis, search engine selalu membaca label atau tags setiap postingan blog, karena Google sudah tidah menggunakan meta tag keywords lagi untuk mengindeks blog. Maka yang jadi perhitungan Google saat ini adalah meta description dan label (kategori).

Cara Memasang Breadcrumb di Blog

Berikut ini cara memasang breadcrumb versi Maskolis. Simple dan mudah dipasang. Kodenya sudah saya modifikasi menjadi lebih simple lagi.

1. Klik Tema > Edit HTML.
2. Copas kode berikut ini tepat sebelum kode ]]></b:skin>

.breadcrumbs{padding:0 0 10px 0;margin:0;font-size:95%;line-height:normal;border-bottom:1px solid #eee}

3. Copas kode berikut ini di bawah kode <div class='post hentry'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
<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>

4. Simpan Template!

Demikian Cara Memasang Breadcrumb di Blog.