Cara Membuat Navigasi Breadcrumb di Blogger

Apa sih itu breadcrumb? breadcrumb itu adalah history tempat artikel kita dan biasa dipakai di forum2, misalkan kamu post artikel di parent kategori “SEO” terus ada subkategorinya “tutorial blog”, maka breadcrumbnya menjadi :

Berikut ceritanya, lho maksudnya begini caranya :

Cara Pasang Breadcrumb Di Blogger Cara 1
1. Masuk ke blogger anda
2. Klik tab layout
3. Klik tab Edit HTML
4. Jangan lupa back up dulu template blog anda
5. Klik box beside Expand Widget Template expand
6. Cari kode ]]></b:skin>
7. Paste kode dibawah ini persis diatas kode ]]></b:skin>

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;}

8.Kemudian cari kode berikut
<div class=’post hentry uncustomized-post-template’>
9.Paste kode 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’>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>

10. Save hasil modifikasi
11. Dan lihat hasilnya di blog anda.
Cara Pasang Breadcrumb Di Blogger Cara 2
1. Masuk ke blogger anda
2. Klik tab layout
3. Klik tab Edit HTML
4. Jangan lupa back up dulu template blog anda
5. Klik box beside Expand Widget Template expand
6. Cari kode ]]></b:skin>
7. Paste kode dibawah ini persis diatas kode ]]></b:skin>

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

8. Kemudian cari kode <b:includable id=’post’ var=’post’>
Setelah itu letakkan kode berikut tepat di bawah kode <b:includable id=’post’ var=’post’> tadi:

<div class=’breadcrumbs’>
Browse: <a expr:href=’data:blog.homepageUrl’>Home</a> / <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> / <a expr:href=’data:post.link’><data:post.title/></a>
</div>

9. Kemudian silahkan simpan perubahan template anda dan silahkan cek di halaman artikel (post page) apakah Breadcrumb sudah ada.
Cara Pasang Breadcrumb Di Blogger Cara 3
Navigasi breadcrumb di blogspot akan tampil berdasarkan label/tag dari postingan anda. Berikut tutorialnya.
1. Masuk ke blogger.
2. Pilih menu Tata Letak (Layout) » Edit HTML.
3. Centang tulisan Expand Widget Templates.
4. Cari kode beriku
<b:if cond=’data:post.title’>
5.Tambahkan kode berikut di bawahnya.

<b:if cond=’data:blog.pageType == “item”‘>
<a href=’http://namablog.blogspot.com/’>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 != “true”‘>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</b:if>

7.Jangan lupa ganti tulisan warna biru dengan nama blog anda.
8.Simpan template.
Anda bisa menambahkan garis di bawah navigasi dengan menambahkan kode di bawah kode <hr/><data:post.title/> di atas.
Selamat Mencoba ya..

Bookmark this post:blogger tutorials Social Bookmarking Blogger Widget