Membuat Breadcrumb Navigation

Setelah berkeliling melihat blognya blogger pemula maupun blognya para master blogger, ternyata masih banyak blog-blog yang belum memanfaatkan fitur ‘Breadcrumb Navigation’, padahal fitur ini merupakan salah satu syarat dari sekian banyak syarat agar webpage atau blog bisa lebih ‘SEO Friendly’.

‘Breadcrumb Navigation’ merupakan menu navigasi yang terletak diatas Judul artikel pada sebuah postingan. Fungsinya untuk mempermudah pembaca artikel tersebut dalam melihat posisi artikel yang dibacanya, atau dalam mencari artikel dalam satu kategori atau label.
‘Breadcrumb Navigation’ , sebenarnya merupakan artikel yang sudah lama dan jarang dibahas lagi dalam jangka waktu tertentu oleh para master. Termasuk ‘Kang Rohman’ juga sudah membahasnya, kalau tidak salah judul dan link-nya Cara Membuat “breadcrumb-navigation” Di Blogger.
Perhatikan gambar berikut ini :

Breadcrumb Navigation : Browse>>Home>>Tutorial HTM>>Recent Comment dengan Scroll

Saya membahasnya kembali di 'Teknik Blogging' ini hanya untuk sekedar mengingatkan blogger pemula maupun master blogger yang belum menggunakan fitur ini, bahwa fitur ‘Breadcrumb Navigation’ memiliki manfaat yang cukup berpengaruh didalam ‘Search Engine Optimation’ atau optimasi mesin pencari, sehingga tidak ada salahnya saya bahas kembali.

1. Silahkan login ke Account Blogger anda

2. Pilih Menu Tata Letak atau Layout

3. Pilih Menu Edit HTML

4. Apabila anda ragu dengan fitur ini dan untuk menghindari kesalahan silahkan terlebih dahulu anda Download Full Template untuk menyimpan template anda.

5. Berikan tanda ‘Checklist’ pada kolom sebelah kiri ‘Expand Template Widget’.

6. Copy kode berikut ini :

.breadcrumbs {

padding:5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:95%;

line-height: 1.4em;

border-bottom:3px double #e6e4e3;

}

7. Paste dan letakkan kode tersebut di atas kode :

]]></b:skin>

8. Silahkan cari kode berikut pada template anda :

<div class='post hentry uncustomized-post-template'>

Atau bila tidak ketemu, cari kode :

<div class='post hentry'>

9. Copy kode di bawah ini dan letakkan dibawah kode tersebut :

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

<b:else/>

<b:if cond='data:blog.pageType == "item"'>

<div class='breadcrumbs'>

Browse » <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 == "true"'> »

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

</b:if>

» <span><data:post.title/></span>

</b:loop>

</b:if>

</b:loop>

</div>

</b:if>

<b:else/>

<b:if cond='data:blog.pageType == "archive"'>

<div class='breadcrumbs'>

Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » 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>

10. Save Template anda.
11. Finish, silahkan cek blog anda. Semoga berhasil.

PR: wait...  I: wait...  L: wait...  LD: wait...  I: wait... wait...  Rank: wait...  Traffic: wait...  Price: wait...  CY: wait...  I: wait...  YCat: wait...  I: wait...  Top: wait...  I: wait...  L: wait...  C: wait...