Cara Membuat Navigasi Breadcrumb di Blog

Salam hangat dari AF Sahabat Artikel sobat2 blogger. Pada malam hari yang dingin ini saya akan coba share tentang Cara Membuat Navigasi Breadcrumb di Blog. Breadcrumb bisa dikatakan sebagai alat navigasi  yang menunjukkan setiap isi menu label pada setiap atikel terkait yang sangat membantu sekali bagi para pembaca menulusuri blog kita. Dengan memasang Breadcrumb juga bisa meningkatkan optimasi SEO kita sehingga menjadi lebih SEO Friendly. Agar lebih mudah lagi mengetahui apa itu Navigasi Breadcrumb bisa lihat gambar dibawah ini :

Baiklah mungkin itu sedikit penjelasan tentang Breadcrumb, langsung saja kita praktekkan Cara Membuat Navigasi Breadcrumb di Blog . Langkah-langkahnya sebagai berikut :

1. Pertama seperti biasa Sign in ke akun blog masing2, lalu pilih Layout > Template > Edit HTML > sebagai berjaga-jaga jika terjadi kesalahan silahkan download template terlebih dahulu. Lalu jangan lupa untuk mencentang Expand Template Widget.

2. Selanjutnya carilah kode ]]></b:skin>  untuk mempermudah pencarian gunakan ctrl+f. Lalu letakkanlah kode script dibawah ini tepat diatas kode ]]></b:skin>

.breadcrumbs {

padding:5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:95%;

line-height: 1.4em;

border-bottom:3px double

#e6e4e3;

}

3. Selanjutnya carilah kode <div class='post hentry uncustomized-post-template'> dan letakkanlah kode script dibawah ini tepat dibawah kode <div class='post hentry uncustomized-post-template'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='breadcrumbs'>

Browse &#187; <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 == &quot;true&quot;'> &#187;

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</b:if>

&#187; <span><data:post.title/></span>

</b:loop>

</b:if>

</b:loop>

</div>

</b:if>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<div class='breadcrumbs'>

Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>

</div>

</b:if>

<b:else/>

<b:if cond='data:navMessage'>

<div class='breadcrumbs'>

<data:navMessage/>

</div>

</b:if>

</b:if>

4. Jika sudah klik save. dan lihatlah hasilnya. buka salah satu artikel blog untuk melihat apakah Navigasi Breadcrumb telah terpasang dengan benar atau belum.

Dan selesai sudah postingan pada malam hari ini tentang Cara Membuat Navigasi Breadcrumb di Blog

Selamat mencoba dans emoga bermanfaat . . .

Posted in: Tutorial Blog