Cara Membuat Breadcrumbs di Blog

Baca Juga

Cara Membuat Breadcrumbs di Blog Blogger (Blogspot) sangat mudah. 

Menurut para pakar SEO, Breadcrumbs, yaitu baris navigasi blog di atas judul posting, sangat penting agar postingan kita mudah terindeks oleh mesin pencari, utamanya Google. 

Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents (wikipedia).
Katanya, kalau kita menggunakan Breadcrumbs ini, maka posting di blog kita akan mudahterlihat di mesin pencari Google dengan waktu yang singkat dan semua label atau kategori blog akan ter-indeks.

Lagi pula, Breadcrumbs akan membuat blog jadi "User Friendly" --memudahkan user atau pembaca mencari tulisan yang mereka inginkan di blog kita. Contoh Breadcrumbs? Itu.... ada di atas judul tulisan ini....!

Clear? 

Ok, saatnya kita membuat Breadcrumbs!

Cara membuat breadcrumbs di blogspot:

1. Login ke Blogger

2. Klik Tema > klik Edit HTML

3. Copas kode CSS breadcrumbs berikut ini 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;}

4. Cari dan ganti kode <b:includable id='main' var='top'> 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'/>

5. SAVE!

Selesai sudah. Good luck!