Cara Membuat Breadcrumbs di Blogspot

Cara Membuat Breadcrumbs di Blogspot - Apakah sobat tau apa itu breadcrumbs ? Mungkin ada beberapa sobat newbietolol yang belum tau, Breadcrumbs itu adalah navigasi di atas postingan yang berbentuk hirarki atau lebih jelasnya navigasi postingan yang menunjukan dimana adanya postingan tersebut.

Contoh sebuah blog yang sudah terpasang breadcrumbs seperti gambar berikut :

Cara Membuat Breadcrumbs di Blogspot

Seperti gambar diatas terlihat artikel yang berjudul Cara Membuat Fanspage Di Facebook terletak pada Label Internet dan Tips Trik

PENTING ATAU TIDAK SIH BREADCRUMBS ITU ?

Agar sobat tau jawabannya baca saja manfaat breadcrumbs dibawah ini :

1. Memperkecil Bounce Rate

2. Pengunjung dapat dengan mudah mengetahui letak artikel kita di label mana
3. Breadcrumbs juga dapat Menambah sebuah keyword dalam postingan
4. Dan yang terakhir Untuk Memberikan sebuah informasi yang dibutuhkan oleh Search Engine, seperti Google dalam memahami struktur / skema sebuah web/blog.

Cara Membuat Breadcrumbs SEO Friendly

1. Masuk ke Akun blogspot sobat
2. Klik pada Template - Edit HTML - Lanjutkan
3. Centang Expand Template Widget
4. Cari kode ]]></b:skin> dan simpan kode ini diatasnya:

.breadcrumbs{ 
padding:0px 5px 5px 0; 
margin-bottom:20px; 
font-size:11px; 
color:#5B5B5B; 
border-bottom:1px dotted #bbb; 
}

5. Cari kode <b:includable id='main' var='top'>, ganti dengan:

<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'/>

6. Simpan Template sobat

nb: untuk mengecek apakah breadcrumbs sudah terpasang dengan benar pada blog sobat silahkan copy link ini : http://www.google.com/webmasters/tools/richsnippets