Tips Membuat Menu Breadcrumbs di Blog

Menu Breadcrumbs banyak kita jumpai pada blog-blog yang didukung wordpress, akan tetapi menu seperti yang ditunjukkan pada gambar dibawah ini merupakan menu navigasi yang dipasang di blogspot. Banyak kalangan yang menyebut Menu Breadcrumbs ini dengan "breadcrumb-navigation”. Dengan adanya “breadcrumb-navigation” maka pengunjung blog anda dapat dengan mudah melihat posisi postingan serta akan membuat penasaran untuk mencari dan melihat artikel dalam satu kategori.

Bahkan ada pula hal pembuatan breadcrumb-navigation menjadi salah satu penunjang SEO Friendly.

Menu Breadcrumbs

Cara membuatnya gak terlalu ribet, seperti ini caranya....
  • Masuk ke akun Blogger Anda;
  • Klik tombol Rancangan dan pilih Edit HTML;
  • Beri Centang Expend Widget;
  • Cari kode ]]></b:skin>
  • Jika ketemu copy paste kode berikut diatas
.breadcrumbs{padding:10px 5px 5px 0;margin: 0 0 5px;font-size:95%;line-height:1.4em;border-bottom:4px double #AFB0B2}
  • Terus scroll kebawah dan cari kode
<div class='post hentry uncustomized-post-template'>
  • Lalu letakkan kode berikut sesudah kode diatas
<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>
  • Simpan Template
selamat mencoba dan semoga brhasil serta bermanfaat bagi anda semua.

Source : Kang Fathur 
Labels: , ,