TENTANG DAN SEPUTAR NAVIGASI BREADCRUMB

Pembuatan Navigasi Breadcrumb ini masih sangat simpang siur, ada sebagian kalangan yang beranggapan bahwa navigasi breadcrumb baru terindex oleh Google search engines saat blog kita telah memiliki page-rank minimal #3. Dan ada sebagian kalangan menjelaskan bahwa untuk dapat terindeks Google search engines tidak perlu menunggu sampai blog kita memiliki page-rank #3. Dalam hal ini saya telah membuktikannya sekaligus telah melakukan research dengan mempergunakan beberapa dummy-blog yang saya miliki. Hasilnya ada dua cara membuat navigasi breadcrumb ini. Cara pertama memang tidak langsung dapat terindeks oleh Google search engines, namun dengan mempergunakan cara kedua, navigasi breadcrumb ini langsung dapat terindeks oleh Google search engines (walaupun blog kita tidak memiliki page-rank sama sekali alias no-rank).

Bentuk umum navigasi breadcrumb ini adalah seperti gambar di bawah ini :

Adapun cara membuatnya adalah sebagai berikut  :

CARA PERTAMA

Pertama, pastikan anda sudah membuat label pada blog.
Selanjutnnya,pergi ke Dashboard,lalu pilih Tata Letak dan kemudian pilih Edit HTML, jangan lupa contreng tulisan Expand Widget Templates.
Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian):

]]></b:skin>

Setelah ketemu,letakkan kode berikut tepat diatasnya:

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

Nah,setelah itu,sobat cari lagi kode seperti ini (ketik aja di Ctrl+F)

<div class='post hentry

Nah nanti sobat akan temukan barisan kode seperti:

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

Nah,tepat dibawah kode tersebut,sobat letakkan kode ini:

<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'>Beranda</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' 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>

Setelah itu simpan templates sobat.

CARA KEDUA

Cara pemasangannya pun seperti ini kawan :

1. Login ke Blogger kawan.

2. klik Rancangan klik Edit HTML.

3. Beri tanda centang pada kotak di samping tulisan Expand Template Widget.

4. Lalu sobat cari kode ini. Agar lebih mudah dengan menggunakan Ctrl F atau F3.

 

]]></b:skin>

5. Kalau sudah ketemu copy kode dibawah ini dan paste diatasnya.

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

Setelah itu cari kode  <b:includable id='main' var='top'> , hapus kode tersebut dan ganti dengan kode berikut,

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
 &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/> 

Save template. untuk mengecek kinerja breadcrumb, silahkan anda buat artikel dengan menyertakan label yang sudah terindex oleh google (untuk cek anda tinggal copy paste url label ke google), setelah membuat artikel baru, tunggu hingga artikel tersebut terindex, dan lihat hasilnya.

Note : Dengan mempergunakan cara yang kedua, navigasi breadcrumb kita dapat langsung terindeks oleh Google search engines. 

Sumber tulisan :

http://semangat888.blogspot.com/2012/02/cara-membuat-navigasi-breadcumb.html

http://semangat888.blogspot.com/2012/02/membuat-navigasi-breadcumb.html