Cara Memasang Navigasi Breadcrumb di Blog

Daftar Isi

Ketika pertama kali saya memulai ngeblog, saya menemukan sebuah artikel yang menggunakan kutipan berikut: "Navigasi Breadcrumb adalah elemen pada blog yang membantu meningkatkan peringkat blog di mesin pencari." Setelah membaca kata-kata tersebut, saya langsung membuat navigasi Breadcrumb untuk blog saya. Namun, saat saya mencoba membuatnya, saya menyadari bahwa tidak semudah yang saya bayangkan.

Saya telah mencoba berbagai macam navigasi Breadcrumb untuk blog saya, tetapi semuanya mengalami masalah, terutama ketika saya mencoba menggabungkan dua atau lebih kategori dalam satu artikel. Dari situ, saya menyadari bahwa masalahnya terletak pada perbedaan kode di setiap template. Nah, pada artikel ini saya akab memberikan tutorial Cara Memasang Navigasi Breadcrumb di Blog dengan mudah dan cocok untuk semua tema tanpa kamu pusingin lagi, jadi silahkan simak tutorialnya dibawah.

Apa itu Navigasi Breadcrumb

Navigasi Breadcrumb merupakan bentuk navigasi atau penunjuk halaman yang umumnya bertujuan memberikan informasi kepada pembaca tentang lokasi mereka dalam artikel dan menu blog. Bagi Anda yang tertarik untuk memasang navigasi pengarah di blog Anda, silakan ikuti tutorial yang sudah saya siapkan. Saya jamin itu tidak akan mengalami masalah teknis dan tentunya ramah terhadap SEO.

Cara Memasang Navigasi Breadcrumb di Blog

1. Log in ke Blog
2. Klik Theme > Edit HTML
4. Letakkan kode berikut di atas kode ]]></b:skin>. ( gunakan 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;
}

5. Kemudian sobat cari kode <b:includable id='post' var='post'>

6. Tempelkan kode berikut dibawahnya

<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>

7. Jika sudah semua terpasang silahkan simpan dan lihat hasilnya

Penutup

Oke mungkin itu saja yang dapat codepelajar sampaikan semoga dengan ini blog kamu menjadi banyak penggemar dan prngunjung.