Membuat Navigasi Breadcrumb pada Blogspot

Cara membuat navigasi breadcrumb di blogger ini saya fikir penting. Kabarnya google menggunakan bredcrumb untuk menentukan serp di mesin pencari google. Pada beberapa hasil search google blog peluang usaha ini menunjukan bahwa memang google juga menggunakan navigasi breadcrumb dalam hasil pencarian google, meskipun belum sangat signifikan dampaknya pada serp tetapi dari pemantauan saya beberapa waktu terakhir memang kayaknya google lebih suka blog yang mempunyai struktur teratur.


Bagi yang belum tau breadcrumb, dibawah ini ada gambar breadcrumb yang saya ambil dari posting contoh surat. Gambar akan bercerita lebih banyak:)
 

Perhatikan struktur Browse >>Home >> Contoh surat  yang saya garis hijau, itu yang disebut navigasi breadcrumb. Untuk blog dengan enggine wordpress gak masalah ya, tetapi untuk membuat navigasi breadcrumb di blogspot  memang agak sulit. Ok sebelum masuk ke cara  membuat navigasi breadcrumb di blogspot perhatikan hasil pencarian google berikut ini

 

Yups google mengindex posting contoh surat ini dengan menyertakan navigasi breadcrumbnya. Saya memperoeh tutorial cara membuat ara  membuat navigasi breadcrumb di blogspot ini dari salah satu blognya kang rohman.

1. Masuk ke blogger anda
2. Klik tab layout
3. Klik tab Edit HTML
4. Jangan lupa back up dulu template blog anda
5. Klik box beside Expand Widget Templateexpand
6. Cari kode ]]></b:skin>
7. Paste kode dibawah ini persis diatas kode ]]></b:skin>

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

8.Kemudian cari kode berikut
<div class='post hentry uncustomized-post-template'>

9.Paste kode dibawah ini tepat dibawah kode <div class='post hentry uncustomized-post-template'>

<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'>Home</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' 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>

10. Save hasil modifikasi
11. Dan lihat hasilnya di blog anda.

Sekian semoga bermanfaat tutorialnya......
Oh ya, Saya mengambil artikel ini dari : di sini

Tags : cara membuat navigasi breadcrumb di blogspot