Cara Membuat Breadcrumb di Blog

Dalam artikel berikut ini, akan dijelaskan bagaimana cara membuat breadcrumb navigation di Blog, khususnya Blogger atau Blogspot. Jika Anda kurang mengerti apa itu breadcrumb navigation, silakan baca artikel yang sangat lengkap di Wikipedia

Breadcrumb navigation sangat berguna untuk memudahkan navigasi. Apalagi tutorial yang akan kita berikan ini adalah Cara Membuat Breadcrumb di Blog yang SEO Friendly. Untuk memperjelas apa itu Breadcrumb, silakan lihat gambar berikut ini:

Gambar Breadcrumb

Nah, manfaatnya akan terasa langsung di Google Search. Silakan lihat ilustrasi berikut:

Gambar Breadcrumb di Google Search

Maka dari itu, silakan. Inilah caranya:

1. Login ke Blogger Anda
2. Masuk ke Menu Template
3. Pilih Edit HTML.
4. Lalu cari kode ]]></b:skin> (untuk mempermudah pencarian gunakan CTRL+F)
5. Silahkan Anda copy kode CSS Breadcrumbs di bawah ini dulu dan paste 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. Lanjutkan cari kode seperti ini <b:includable id='main' var='top'> lagi. Jika sudah ketemu ganti kode tersebut dengan kode di bawah 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'/>

7. Terakhir, simpan Template Anda, dan selesai! :D

Semoga bermanfaat, jangan lupa kasih komentar! :p