Membuat Breadcrumb Navigation pada blogger

Apa sih breadcrumb,saya sendiri dulu juga gak tahu apa itu breadcrumb blog,katanya jika blog dipasang breadcrumb akan lebih SEO friendly,dan apakah itu benar? tergantung juga terserah kamu aja juga,tapi aq punya keyakinan juga,bahwa dengan menambah breadcrumb,akan mempermudah pembaca menelusuri blog kita,he he...gak usah aq jelaskan apa itu breadcrumb blog,lihat aja gambar dibawah ini,aq yakin kamu akan langsung faham.


jika masih belum faham juga lihatlah diatas judul postinganku ini,akan ada tulisan browse-label juga judul posting,itulah yang dinamakan breadcrumb blog,jika kamu pengen juga membuatnya pada blog kamu,lihat saja tutorial dibawah ini:

• Login ke blogger.com.
• Klik Tata Letak.
• Pilih tab Edit HTML
• Click Download Full Template andplease back up your template first.
• Kemudian beri tanda centangpada kotak kecil di sampingtulisan Expand Template Widget.
• Silahkan cari kode ]]></b:skin>
• letakkan kode 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;
}

---

• langkah berikutnya kamu cari kode <div class='post hentry uncustomized-post-template'>
• Setelah ketemu kode diatas,kamu letakkan 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' 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>

---

• Kemudian Save Template,
• Tunggu beberapa saat sampai template anda tersimpan. Setelah selesai lihat pada posting anda tepatnya di atas judul artikel untuk menentukan berhasil tidaknya anda memasang breadcrumb-navigation. Jika berhasil maka breadcrumb-navigation nya akan tampil seperti di atas judul posting ini.

semoga bermanfaat!


BACA JUGA!
- Cara membuat widget hanya tampil di homepage
- bertukar link dengan adil
- Membuat 3 kolom element dibawah header
- Membuat dua element dibawah header
- Cara menghapus komentar blog
- Cara membuat navbar auto hidden
- Membuat search engin pada navbar blog
- Cara membuat kotak banner
- Cara Memasang search engin pada blog
- Membuat background pada relate post/artikel terkait
- Cara membuat text area dengan background warna dan gambar
- Membuat footer tiga kolom di bawah posting
- Cara memasang sitemeter pada blog
- Memasang tombol share twitter dan facebook pada setiap postingan
- Meta tag title blog yang ramah SEO
- Membuat efek turun salju pada blog
- Menambah elemen dibawah postingan
- Menampilkan kode html dalam postingan blog