Apakah Navigasi Breadcrumb itu?

Navigasi breadcrumb itu merupakan aplikasi yang digunakan untuk mempermudah dalam mengetahui posisi dimana kita berada dalam suatu blog. Termasuk mengetahui artikel dan Label apa yang sedang kita buka.

Breadcrumb merupakan salah satu aplikasi yang banyak digunakan blogger untuk melakukan optimasi blog dalam tujuan untuk mempermudah di index oleh Google. Siapa sih yang tidak mau artikel-artikelnya di index oleh Google yang merupakan Search Engine terbesar saat ini. Sehingga blog yang bersangkutan lambat laun akan menjadi populer bahkan tidak mustahil akan kebanjiran pengunjung (trafic).

Teknik pada posting kali ini dengan kata lain adalah salah satu trik SEO seperti yang pada posting yang lalu tentang Dasar SEO. SEO sendiri merupakan Cara untuk optimalisasi blog sehingga lebih mudah diketemukan oleh SEarch Engine.

Bagaimana sih wujud dari Breadcrumb ini?

Sobat dapat liat pada gambar berikut :

    Oke untuk langkah-langkah pembuatannya adalah :

1.Buka Blog sobat

2.Masuk ke Template >>Edit HTML, jangan lupa centang kotak "Expand Template Widget"

3. Kemudian Klik Ctrl+F untuk membuka kotak Pencarian Kode.

4. Ketikkan ]]></b:skin>

5. Kopikan kode berikut ini tepat di atas kode ]]></b:skin>

.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

6. Kemudian cari kode <b:includable id='main' var='top'> (gunakanlah CTRL+F lagi untuk mempermudah pencarian)

7. Ganti kode <b:includable id='main' var='top'> dengan kode yang dibawah ini

<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'> 
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> 
</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'/>

8. Klik Save Template untuk menyimpan perubahan

Kemudian Buka Tab Baru dan Buka Blog Anda. Harusnya saat ini Navigasi Breadcrum akan muncul setiap Anda membuka Artikel dengan label-label tertentu.

Oke Selamat Mencoba...