Cara Membuat Breadcrumb SEO Friendly Di Blog

Berikut contoh Navigasi Breadcrumb:

Perhatikan tulisan Earn Free Money dan Tips Blog dipisahkan dengan tanda koma, itu karena Postinga Blog memiliki dua Kategori atau label. Sebanyak apa pun label dalam satu artikel selalu akan dipisahkan dengan tanda koma.

Jika Sobat tertarik untuk Memasang Navigasi Breadcrumb ini silahkan ikuti tutorial Membuat Navigasi Breadcrumb SEO Friendly Berikut:

1. Loggin Blog - Rancangan - Edit HTML - Centang Expand Template Widget
2. Cari kode <div class='post hentry'>
3. Copy Kode berikut dan Paste tepat dibawah kode <div class='post hentry'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Your Are Here</span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb-uISShoQIqoU4jjQSER0vuZVkBRclgZ_XukFTD6M_kG8_-WACLUwmtnd1u0xEJWjD_b7EsDOOCETQrH1aI7fD1HhzlN5h6xicjapK_NreQHlJ8uJeKFMZqahyphenhyphenO-Lmptof6N9EwHvSOE/s1600/kangsalman+crumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'>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>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Browse</span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb-uISShoQIqoU4jjQSER0vuZVkBRclgZ_XukFTD6M_kG8_-WACLUwmtnd1u0xEJWjD_b7EsDOOCETQrH1aI7fD1HhzlN5h6xicjapK_NreQHlJ8uJeKFMZqahyphenhyphenO-Lmptof6N9EwHvSOE/s1600/kangsalman+crumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
&#187; Archives for <data:blog.pageName/>
</div>
</b:if>

Keterangan:
-Sobat bisa mengganti tulisan yang berwarna merah dengan tulisan yang anda suka.

4. Apabila Sobat ingin menambahkan Kotak (Border) pada tampilan Breadcrum, silahkan Copy kode dibawawah ini, paste kode tepat di atas kode ]]></b:skin>:

.breadcrumbs {
padding:8px 0px 10px 5px;
margin: 0px 0px 5px 0px;
font-size:88%;
border:1px double
#e6e4e3;
}

5. Simpan dan lihat hasilnya.